JavaScript非同期動作のいくつかの一般的な処理方法の例をまとめました。

本論文の実例は、JavaScript非同期動作のいくつかの一般的な処理方法を述べている。皆さんに参考にしてあげます。具体的には以下の通りです。
ことばを引く
jsの非同期操作はもうありふれた話題です。この話題についての文章は簡単にgoogleでもいっぱい見られます。なぜ私はこのものを書くべきですか？最近の作業では、比較的複雑なプラグインを作成するために、様々な非同期操作が必要です。しかし、容積と互換性のために、いかなるpollyfillも導入するつもりはなく、babelも使用できない。これはes 5の方法でしか処理できないことを意味している。リピート方式はデカップリングに非常に不利であるので、他の方法を探してこの問題を処理した。問題は解決済みですが、自分の考えを引き起こしました。jsの非同期操作を処理するには、どんな方法がありますか？
一、コールバック関数
伝説の「calback hell」はコールバック関数です。また、コールバック関数は最も基本的によく使われるjs非同期動作を処理する方法でもある。簡単な例を紹介します。
最初に3つの関数を定義します。

function fn1 () {
 console.log('Function 1')
}

function fn2 () {
 setTimeout(() => {
  console.log('Function 2')
 }, 500)
}

function fn3 () {
 console.log('Function 3')
}

fn2は、500ミリ秒の遅延された非同期関数と見なしてもよい。今はfn1、fn2、fn3を順次実行したいです。fn3が最後に実行されることを保証するために、fn2のコールバック関数として使用できます。

function fn2 (f) {
 setTimeout(() => {
  console.log('Function 2')
  f()
 }, 500)
}

fn2(fn3)

fn2とfn3は完全に結合されており、類似の関数が複数あるとfn1(fn2(fn3(fn4(...))))のような場合があります。地獄のデメリットを改めて説明します。読者の皆さんはきっと自分の体験があると信じています。
二、イベントのリリース/購読
リリース/購読モードも多くのデザインモードの中の一つであり、このような方式はes 5でかなり優雅に非同期操作ができます。何が発行/購読ですか？上記のセクションの例では、fn1、fn2、fn3はいずれもイベントのリリース者と見なされ、実行すれば、イベントがリリースされる。この時、私達は一つのイベントの購読者を通して、それらの順序を含めてこれらのイベントを大量に購読して処理することができます。前の章の例に基づいて、メッセージ購読者の方法を追加します。

class AsyncFunArr {
 constructor (...arr) {
  this.funcArr = [...arr]
 }

 next () {
  const fn = this.funcArr.shift()
  if (typeof fn === 'function') fn()
 }

 run () {
  this.next()
 }
}

const asyncFunArr = new AsyncFunArr(fn1, fn2, fn3)

fn1、fn2、fn3内でnext()方法を呼び出す。

function fn1 () {
 console.log('Function 1')
 asyncFunArr.next()
}

function fn2 () {
 setTimeout(() => {
  console.log('Function 2')
  asyncFunArr.next()
 }, 500)
}

function fn3 () {
 console.log('Function 3')
 asyncFunArr.next()
}

// output =>
// Function 1
// Function 2
// Function 3

関数の処理順序は、到来AsyncFunArrのパラメータ順序に等しいことが分かる。AsyncFunArrは、内部で1つの配列を維持し、next()メソッドを呼び出すたびに、配列に保存されているオブジェクトを順番に出して実行します。これも実際の作業でよく使われている方法です。
三、Promise
Promiseの方式を使うと、もう一つのメッセージ購読者関数を書く必要がなく、非同期関数が一つのPromiseに戻るだけでいいです。例を見てください

function fn1 () {
 console.log('Function 1')
}

function fn2 () {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   console.log('Function 2')
   resolve()
  }, 500)
 })
}

function fn3 () {
 console.log('Function 3')
}

同様に、私達は3つの関数を定義しました。そのうち、fn2はPromiseに戻る非同期関数です。今は順番に実行したいです。次のようにすればいいです。

fn1()
fn2().then(() => { fn3() })

// output =>
// Function 1
// Function 2
// Function 3

Promiseを使うとリピートは二つの最大の違いがあります。最初はfn2とfn3が結合されました。第二に、関数の入れ子をチェーン式呼出しに変えて、意味からも書き方も開発者にもっと友好的です。
四、ゲナート
Promiseの使用がチェーンに回されると、generatorのやり方はその多くのPromise特徴方法を消滅させることができます。例えば、一山のthen()です。

function fn1 () {
 console.log('Function 1')
}

function fn2 () {
 setTimeout(() => {
  console.log('Function 2')
  af.next()
 }, 500)
}

function fn3 () {
 console.log('Function 3')
}

function* asyncFunArr (...fn) {
 fn[0]()
 yield fn[1]()
 fn[2]()
}

const af = asyncFunArr(fn1, fn2, fn3)

af.next()

// output =>
// Function 1
// Function 2
// Function 3

この例では、GEnerator関数asyncFunArr()は、実行対象関数リストfnを受け取り、非同期関数はyieldを介して実行される。非同期関数において、generator関数の次のステップの動作はaf.next()によって活性化される。
このように大雑把に見えますが、実はリリース／購読モードとよく似ています。すべては非同期関数の内部で能動的に方法を呼び出して、購読者に次のステップの操作を実行するように教えます。しかし、この方法はまだ優雅ではありません。例えば、複数の非同期関数があれば、このgenerator関数はきっと書き換えられます。また、意味化の程度においても、少し直感的ではありません。
五、優雅なasync/await
最新バージョンを使ったNodeはすでにasync/awaitと表記できます。様々なpollyfillを通じて古いブラウザでも使えます。どうしてasync/await方法が一番優雅ですか？コードを見てください

function fn1 () {
 console.log('Function 1')
}

function fn2 () {
 return new Promise((resolve, reject) => {
  setTimeout(() => {
   console.log('Function 2')
   resolve()
  }, 500)
 })
}

function fn3 () {
 console.log('Function 3')
}

async function asyncFunArr () {
 fn1()
 await fn2()
 fn3()
}

asyncFunArr()

// output =>
// Function 1
// Function 2
// Function 3

非同期関数fn2を定義するとき、その内容は前の文でPromiseを使用した時と同じであることが分かりましたか？また、実行関数asyncFunArr()を見ても、その実行方法はゲナートを使用する場合と非常に似ています。
非同期の操作はすべてPromiseに戻ります。順序実行が必要な場合はawait対応の関数だけでいいです。この方式は語義化においてとても友好的で、コードの維持も簡単です。
六、おわりに
一つのまとめとして、本文の内容の多くの知識点も他人の経験から来たのですが、自分の理解と経験を加えました。他人に課せず、個人としての蓄積を求める。読者が訂正の意見を提出して、一緒に勉強して進歩してほしいです。
興味のある友達はオンラインHTML/CSS/JavaScriptコードを使ってツールを実行できます。http://tools.jb51.net/code/HtmlJsRun上記コードの運行効果をテストします。
もっと多くのJavaScriptに関する内容は当駅のテーマを調べられます。「JavaScript操作DOM技巧まとめ」、「JavaScriptページ要素操作技術のまとめ」、「JavaScript事件に関する操作と技巧大全書」、「JavaScript検索アルゴリズムのテクニックのまとめ」、「JavaScriptデータ構造とアルゴリズム技術のまとめ」、「JavaScriptはアルゴリズムと技術の総括を遍歴します。」および「JavaScriptエラーとデバッグテクニックのまとめ」
本論文で述べたように、JavaScriptプログラムの設計に役に立ちます。