Asyncを理解するのが待っています

Webのコードを書くときは、最終的には完了するのに少し時間がかかる可能性のあるプロセスを実行する必要があります。 JavaScriptは実際にはマルチタスクではないため、これらの長期にわたるプロセスを処理する方法が必要です。

Async/awaitは、このタイプの時間ベースのシーケンスを処理する方法です。何らかのネットワークリクエストを行い、結果のデータを操作する必要がある場合に特に最適です。掘り下げましょう！

約束？約束。

async/awaitは一種の約束です。 JavaScriptの約束は、複数の状態を持つことができるオブジェクトです（実際の状態のようなものです☺️）。私たちが求めるものがすぐに利用できないことがあり、それがどのような状態にあるかを検出できる必要があるため、約束はこれを行います。

誰かが彼らのために何かをすることを約束するようにあなたに頼むと考えてください。彼らが尋ねた最初の状態があります。しかし、あなたが現れて彼らが動くのを助けるまで、あなたは彼らへのあなたの約束を果たしていません。計画をキャンセルすると、約束を拒否しました。

同様に、JavaScriptの約束のための3つの可能な状態は次のとおりです。

• 保留中：最初に約束を呼ぶとき、それが何を返すのかは不明です。
• 満たされた：操作が正常に完了したことを意味します
• 拒否：操作に失敗しました

これらの州の約束の例は次のとおりです。

これが充実した状態です。 GetSometacosと呼ばれる約束を保存し、決意を渡し、パラメーターを拒否します。私たちはそれが解決された約束を伝え、それにより、ログをさらに2回コンソールすることができます。

 const getSometacos = new Promise（（Resolve、Reject）=> {
  console.log（ "初期状態：すみません、タコスを頂けますか"）;

  解決する（）;
}）
  .then（（）=> {
    console.log（ "いくつかのタコスを注文"）;
  }）
  .then（（）=> {
    console.log（ "これはあなたのタコスです"）;
  }）
  .catch（err => {
    console.error（ "nope！no tacos for you。"）;
  }）;

 >初期状態：すみません、タコスを頂けますか
>いくつかのタコスを注文します
>これがあなたのタコスです

拒否された状態を選択した場合、同じ機能を行いますが、今回は拒否します。これで、コンソールに印刷されるのは、初期状態とキャッチエラーです。

 const getSometacos = new Promise（（Resolve、Reject）=> {
  console.log（ "初期状態：すみません、タコスを頂けますか"）;

  拒否する（）;
}）
  .then（（）=> {
    console.log（ "いくつかのタコスを注文"）;
  }）
  .then（（）=> {
    console.log（ "これはあなたのタコスです"）;
  }）
  .catch（err => {
    console.error（ "nope！no tacos for you。"）;
  }）;

 >初期状態：すみません、タコスを頂けますか
>いいえ！あなたのためのタコスはありません。

また、保留中の状態を選択するとき、私たちが保存したもの、GetSometacosを単純にコンソールします。これは保留中の状態を印刷します。なぜなら、それは私たちがそれを記録したときに約束がある州だからです！

 console.log（getSometacos）

 >初期状態：すみません、＆＃x1f32e; sを頂けますか
>約束{<pending>}
>いくつかの注文＆＃x1f32e; s
>これがあなたの＆＃x1f32e; sです</pending>

それでは何？

しかし、ここに最初は私に混乱していた部分があります。約束から価値を得るには、.then（）またはあなたの約束の解決を返すものを使用する必要があります。考えてみると、これは理にかなっています。なぜなら、それが最初にその保留状態にあるからではなく、最終的にそれが何であるかをキャプチャする必要があるからです。そのため、上記の約束を記録したときに約束を印刷した{}を見ました。実行中のその時点ではまだ何も解決していませんでした。

Async/awaitは、あなたが今見たことのある約束の上に本当に構文的な砂糖です。複数の実行をスケジュールするという約束とともに、どのように使用するかの小さな例を示します。

 async function tacos（）{
  return wait await.resolve（「今、私はおいしいタコスを食べることができます！」）
};

tacos（）。then（console.log）

またはより詳細な例：

 //これは、スケジュールしたい関数です。それは約束です。
const addone =（x）=> {
  新しい約束を返す（Resolve => {
    setimeout（（）=> { 
      console.log（ `追加しました！
      解決する（）
    }、2000）;
  }）
}

//すぐに最初のものを記録します。 
//その後、Addone Promiseが実行され、2秒かかります
//その後、最終コンソール。logが発射されます
async関数addasync（）{
  console.log（ '私は10' '）
  addoneを待っています（10）
  console.log（ `今私は終わった！`）
}

addasync（）

 >私は10を持っています
>追加しました！今は11です。
>今私は終わった！ 

あること（a）別のことを待ちます

Async/awaitの一般的な使用の1つは、それを使用して複数の非同期呼び出しをチェーンすることです。ここでは、次のフェッチコールに渡すために使用するJSONをフェッチして、2番目のAPIからどのタイプのものをフェッチしたいかを把握します。私たちの場合、プログラミングジョークにアクセスしたいのですが、まず別のAPIからどのタイプの見積もりが必要かを確認する必要があります。

最初のJSONファイルはこのように見えます - 見積もりの​​タイプをランダムにしたい：

 {
  「タイプ」：「ランダム」
}

2番目のAPIは、次のようなランダムクエリパラメーターを考えると、次のようなものを返します。

 {
  "_id"： "5a933f6f8e7b510004cba4c2"、
  「en」：「そのすべての力について、コンピューターは厳しいタスクマスターです。そのプログラムは正しくなければならず、私たちが言いたいことは、あらゆる詳細で正確に言わなければなりません。
  「著者」：「アラン・ペルリス」、
  "id"： "5A933F6F8E7B510004CBA4C2"
}

ASYNC関数を呼び出してから、APIからデータを取得する前に、最初の.JSONファイルを取得するのを待ちます。それが起こったら、ページに追加するなど、その応答で何かをすることができます。

 async関数getQuote（）{
  // 1つのフェッチコールから見積もりの​​種類を取得し、他のすべてがこれが終了するのを待っています
  let quotetyperesponse = await fetch（ `https：// s3-us-west-2.amazonaws.com/s.cdpn.io/28963/quotes.json`）
  let quoteType = await quotetyperesponse.json（）

    // 2回目の呼び出しで最初の呼び出しからAPIへのコールを使用して、他のすべてがこれが終了するのを待っています
  let quoteresponse = await fetch（ "https://programming-quotes-api.herokuapp.com/quotes/" quotetype.type）
  QUOTE = await quoteresponse.json（）

  //仕上げます
  console.log（ 'done'）
}

テンプレートリテラルと矢印関数を使用してこれを簡素化することもできます。

 async関数getQuote（）{
  // 1つのフェッチコールから見積もりの​​種類を取得し、他のすべてがこれが終了するのを待っています
  let quoteType = await fetch（ `quotes.json`）.then（res => res.json（））

    // 2回目の呼び出しで最初の呼び出しからAPIへのコールを使用して、他のすべてがこれが終了するのを待っています
  QUOTE = await fetch（ `programming-quotes.com/$ {quoteType.type}`）.then（res => res.json（））

  //仕上げます
  console.log（ 'done'）
}

getquote（）

このプロセスのアニメーションの説明です。

試してみてください、キャッチ、最後に

最終的には、このプロセスにエラー状態を追加します。私たちは便利な試み、キャッチ、そして最後にこれをブロックします。

試す {
  //私はあなたのためにいくつかのコードを実行しようとします
}
catch（error）{
  //そのプロセスのエラーを処理します
} 
ついに {
  //どちらの方法でも発射します
}

上記のコードを再構築して、この構文を使用し、エラーをキャッチしましょう。

 async関数getQuote（）{
  試す {
    // 1つのフェッチコールから見積もりの​​種類を取得し、他のすべてがこれが終了するのを待っています
    let quoteType = await fetch（ `quotes.json`）.then（res => res.json（））

      // 2回目の呼び出しで最初の呼び出しからAPIへのコールを使用して、他のすべてがこれが終了するのを待っています
    QUOTE = await fetch（ `programming-quotes.com/$ {quoteType.type}`）.then（res => res.json（））

    //仕上げます
    console.log（ 'done'）
  }

  catch（error）{
    console.warn（ `ここにエラーがあります：$ {error}`）
  }
}

getquote（）

私たちはいつもそれを必要とするとは限らないので、ついにここで使用しませんでした。それは、成功したか失敗しているかにかかわらず、常に発射するブロックです。試してみることの両方で物事を複製するときはいつでも最終的に使用することを検討してください。私は通常、これをいくつかのクリーンアップに使用します。あなたがもっと知りたいなら、私はこれについての記事を書きました。

最終的には、非同期機能をキャンセルする方法など、より洗練されたエラー処理が必要になる場合があります。残念ながら、これをネイティブに行う方法はありませんが、ありがたいことに、カイルシンプソンは、役立つCAFというライブラリを作成しました。

さらに読む

Async/async/awaitの説明は、コールバックから始めてから約束し、それらの説明を使用してAsync/待ち望をフレーム化するのが一般的です。最近、Async/待ち望が十分にサポートされているため、これらすべてのステップを進めませんでした。特に古いコードベースを維持する必要がある場合は、まだかなり良い背景です。ここに私のお気に入りのリソースがいくつかあります：

• async javascript：コールバックから、約束まで、async/waint（タイラーマクギニス）まで
• 非同期JavaScriptをasync/await（Marius Schulz）
• async javascriptのマスター（ジェームズK.ネルソン）

以上がAsyncを理解するのが待っていますの詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。