非同期 JavaScript のマスター: Promise、Async/Await、コールバックの説明-jsチュートリアル-php.cn

非同期 JavaScript のマスター: Promise、Async/Await、コールバックの説明

Patricia Arquette

リリース： 2024-11-10 07:08:02

オリジナル

328 人が閲覧しました

Mastering Asynchronous JavaScript: Promises, Async/Await, and Callbacks Explained

JavaScript は多用途で応答性に優れています。非同期性の使用方法を知ることで、非同期性を最大限に活用できます。 API 結果の取得からファイルのロードまで、非同期開発ではブロックすることなく複数の作業を同時に行うことができます。 JavaScript で非同期コードを記述するための 3 つの異なるアプローチ (Promises、Async/Await、Callbacks) を検討します。それぞれをいつ使用するか、どのように実装するかを理解します。

非同期 JavaScript を使用する理由

Web アプリケーションが API からデータを取得するたび、または大きな画像ファイルのダウンロードを待機するたびにフリーズすることを想像してください。最良のケースではありませんよね？そこで、非同期 JavaScript が登場します。非同期 JavaScript を使用すると、いくつかのタスクが完了するのを待っている間もプログラムを実行し続けることができるため、よりスムーズなユーザーエクスペリエンスが実現します。

コールバックについてコールバックは、別の関数に引数として渡される関数であり、非同期タスクの完了後に関数を実行できるようになります。コールバックは、JavaScript で非同期操作を処理するための最も古い手法の 1 つです。

例: 基本的なコールバック

関数 fetchData(コールバック) {
setTimeout(() => {
console.log("データが取得されました");
コールバック();
}、2000);
}

関数 processData() {
console.log("データを処理しています。");
}

fetchData(processData);
この例では、fetchData は 2 秒待機し、完了したら processData を呼び出します。これは単純なシナリオでは問題なく機能しますが、複数のコールバックを積み重ね始めると、深くネストされたコールバックによってコードの読み取りと保守が困難になる「コールバック地獄」に陥る可能性があります。

ヒント: ネストされたコールバックが 3 つを超えている場合は、Promises または Async/Await に切り替えることを検討してください。

約束: 非同期を処理するより良い方法 Promise は、非同期操作の最終的な完了 (または失敗) を表すオブジェクトです。 Promise は、ネストを使用する代わりに、読みやすくする .then() メソッドと .catch() メソッドを提供します。

例: Promise の使用

関数 fetchData() {
return new Promise((解決、拒否) => {
setTimeout(() => {
solve("データは正常に取得されました!");
}、2000);
});
}

fetchData()
.then((メッセージ) => {
console.log(メッセージ);
return "データを処理しています。";
})
.then((processingMessage) => {
console.log(processingMessage);
})
.catch((エラー) => {
console.error("エラー:", エラー);
});
ここでは、各 .then() を使用してタスクを順番に処理できるため、深くネストされたコールバックよりも読みやすくなります。 Promise ではエラーもよりエレガントに処理され、.catch() を使用して 1 か所でエラーを処理できるようになります。

ヒント: 複数のタスクを順番に実行し、前のタスクが完了する必要がある場合は、Promise を適用します。

非同期/待機: 最新のアプローチ ES8 では、Async および await 構文が登場し、Promise をよりクリーンに操作できる方法が提供されました。これにより、同期コードと同じように非同期コードを作成できるため、非常に読みやすくなります。

例: 非同期/待機

非同期関数 fetchData() {
{
を試してください const data = await new Promise((resolve) =>
setTimeout(() =>solve("データが正常に取得されました!"), 2000);
});
console.log(データ);

const processMessage = await new Promise((resolve) => {
  setTimeout(() => resolve("Processing data."), 1000);
});
console.log(processMessage);

ログイン後にコピー

} キャッチ (エラー) {
console.error("エラー:", エラー);
}
}

fetchData();
async と await を使用すると、.then() 呼び出しの連鎖が回避されるため、コードは同期コードと非常に似たものになります。これは、特に関連する操作が複雑な場合に、読みやすさを向上させるための優れた方法です。

ベストプラクティス: 可読性が高いため、最新の JavaScript アプリケーションで可能な場合、可能な限り Async/Await を使用するのが常に最良のアプローチです。

どこでどれを使用する

コールバック: 複雑ではなく、可読性が問題にならない小さなタスクに使用します。単純な非同期呼び出しにはほとんど使用されません。

約束: エラー処理と逐次処理に最適です。 Promise を使用すると、深くネストされたコールバックを含む乱雑なコードを回避できます。

Async/Await: シーケンスで操作を実行する場合、読みやすさとコードのクリーンさが向上します。

非同期 JavaScript をマスターするための最後のヒント
各方法を試してみましょう: 各方法を練習すればするほど、非同期プログラミングを理解し、どの方法をいつ使用するべきかがわかるようになります。

エラーの処理には十分な注意を払ってください: Promise と Async/Await の両方で、.catch() または try.catch のいずれかを使用してエラー処理を使用します。

パフォーマンスの最適化: 並列実行できるタスクの場合は、Promise.all を使用して並列実行します。

詳しく調べる準備はできましたか?プロジェクトに非同期テクニックを実装してみて、その違いを確認してください。非同期プログラミングをマスターすると、JavaScript スキルが次のレベルに上がり、滑らかで応答性の高いアプリケーションを作成できるようになります。

以上が非同期 JavaScript のマスター: Promise、Async/Await、コールバックの説明の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。