logo

TechCodeview

JavaScript での非同期と待機

JavaScript の Async と Await は、Promise を使用して非同期操作を処理するために使用される強力なキーワードです。 Async 関数は暗黙的に Promise を返しますが、Await は Promise が解決されるまで実行を一時停止します。これにより、非同期コードが簡素化され、同期的に見えるようになり、可読性が向上します。

世界最高の自動車

非同期関数

のasync>関数を使用すると、同期しているかのように Promise ベースのコードを作成できます。これにより、実行スレッドがブロックされなくなります。



  • プロミスの処理 : 非同期関数は常に Promise を返します。 Promise ではない値が返された場合、JavaScript はその値を解決された Promise に自動的にラップします。

非同期構文

async function myFunction() { return 'Hello'; }>

例： ここでは、JavaScript での async の基本的な使用法を見ていきます。

JavaScript 
const getData = async () =>{ let data = 'Hello World';  データを返す。 getData().then(data => console.log(data));>>
出力 
Hello World>

キーワード待ち

のawait>キーワードは、Promise が解決されるまで待機するために使用されます。非同期ブロック内でのみ使用できます。

  • 実行一時停止 : Await は、Promise が結果を返すまでコードを待機させるため、非同期コードがよりクリーンで管理しやすくなります。

構文 



let value = await promise;>

例 : この例は、JavaScript での await キーワードの基本的な使用法を示しています。

JavaScript 
const getData = async () =>{ let y = 「Hello World」を待ちます;  コンソール.ログ(y);コンソール.ログ(1); getData();コンソール.ログ(2);>>
出力 
1 2 Hello World>

の 非同期 キーワードは、通常の JavaScript 関数を非同期関数に変換し、Promise を返します。

の 待つ キーワードは、非同期関数内で実行を一時停止し、続行する前に Promise が解決されるのを待つために使用されます。



非同期/待機の例

ここでは、メソッドにいくつかの Promise を実装し、そのメソッドを結果の表示に使用します。 JSを確認できる 非同期/待機構文 例では。

Javaの比較可能な文字列
JavaScript 
function asynchronous_operational_method() {  let first_promise =   new Promise((resolve, reject) =>解決('こんにちは'));  let Second_promise = new Promise((resolve,拒否) => { setTimeout(() => {solve(' Techeduportal..'); }, 1000); });  let combined_promise = Promise.all([first_promise, Second_promise]);  combined_promise を返します。 async 関数 display() { let data = await asynchronous_operational_method();  コンソール.ログ(データ); } 画面（）;>>

出力： 

[ 'Hello', ' techcodeview.com..' ]>

説明：

  1. 約束の作成 :
    • 2 つの Promise が作成されます。1 つは Hello ですぐに解決され、もう 1 つは techcodeview.com で 1 秒後に解決されます。
  2. 約束を組み合わせる :
    • Promise.all() メソッドは、両方の Promise を 1 つの Promise (combined_promise) に結合します。
  3. 非同期関数 :
    • display() 関数は async として宣言されており、非同期操作が含まれていることを示しています。
  4. 約束の解決を待っています :
    • await キーワードは、combined_promise が解決されるまで実行を一時停止します。
  5. ロギング結果 :
    • combined_promise から解決された配列がコンソールに記録されます。

注記

に 解決する そして 拒否する JavaScript によって事前定義された引数です。

  • solve 関数は、非同期タスクが完了し、結果を返すときに使用されます。
  • 拒否関数は、非同期タスクが失敗し、失敗の理由を返すときに使用されます。

非同期と待機の利点

  1. 可読性の向上 : Async と Await を使用すると、非同期コードを同期スタイルで記述できるため、読みやすく理解しやすくなります。
  2. エラー処理 : try/catch ブロックを async/await とともに使用すると、エラー処理が簡単になります。
  3. コールバック地獄を回避 : Async と Await は、ネストされたコールバックと複雑な Promise チェーンを回避するのに役立ちます。
  4. より良いデバッグ : 非同期/待機コードのデバッグは、同期コードのように動作するため、より直感的です。

結論

JavaScript の Async と Await は、コードをより読みやすく、保守しやすくすることで、非同期プログラミングに革命をもたらしました。非同期コードを同期スタイルで記述できるようにすることで、コールバックや Promise チェーンに関連する複雑さが軽減されます。 async と await を理解して効果的に使用すると、JavaScript プログラミング スキルが大幅に向上し、プロジェクトでの非同期操作の処理が容易になります。

サポートされているブラウザ:

JSがサポートするブラウザ 非同期/待機関数 以下にリストされています。

  • Google Chrome 55以降
  • Firefox 52 以降
  • Apple Safari 10.1 以降
  • Opera 42 以降
  • エッジ 14 以降