JavaScriptの2つの非同期処理方法とは何ですか?

JavaScript の 2 つの非同期処理メソッド: 1. 「Promise」を使用して非同期を処理し、非同期メソッドによって返されるコードの管理に役立ちます。 2. 「async/await」を使用して非同期を処理します。非同期を処理する イベントは同期構文を使用して処理されます。

このチュートリアルの動作環境: Windows7 システム、JavaScript バージョン 1.8.5、Dell G3 コンピューター。

JavaScript の非同期処理メソッド

Promise

(1) Promise オブジェクト Itは、非同期プログラミング用の統一インターフェイスを提供することを目的として、commonJS ワーキング グループによって提案された仕様およびパターンです。

(2) Promise はパターンです。Promise は、非同期で返されるコードの管理に役立ちます。彼はコードをカプセル化し、イベント処理と同様の管理レイヤーを追加しました。 Promise を使用して、Promise が成功または失敗した後に実行されるコードを登録できます。

(3) Promise が完了すると、対応するコードも実行されます。成功または失敗時に実行する関数をいくつでも登録でき、いつでもイベント ハンドラーを登録できます。

(4) Promise には 2 つの状態があります: 1. 待機中 (保留中)、2. 完了 (決済済み)。

Promise は、ラップする非同期呼び出しが返されるか、タイムアウトするか、終了するまで、待機状態のままになります。

(5) この時点で約束ステータスは完了となります。完了ステータスは、1. 解決済み、2. 拒否済みの 2 つのカテゴリに分類されます。

(6) プロミス解決済み (解決済み): 正常に終了したことを意味します。プロミスが拒否された（拒否された）とは、正常に終了しなかったことを意味します。

//promise
var p=new Promise(function(resolved))
//在这里进行处理。也许可以使用ajax
setTimeout(function(){
   var result=10*5;
   if(result===50){
      resolve(50);
   }else{
     reject(new Error('Bad Math'));
  }
},1000);
});
p.then(function(result){
    console.log('Resolve with a values of %d',result);
});
p.catch(function(){
   console.error('Something went wrong');
});

(1) コードの鍵は setTimeout() の呼び出しにあります。

(2) 重要なことは、彼が関数solve()とreject()を呼び出したことです。 solve() 関数は、Promise ユーザーに Promise が解決されたことを通知し、reject() 関数は、Promise ユーザーに Promise が正常に完了しなかったことを通知します。

(3) Promise を使用するコードもいくつかあります。 then と catch の使用法に注意してください。これらは、onsucess イベントと onfailure イベントのハンドラーと考えることができます。

(4) 賢いのは、Promise の処理を​​状態から分離していることです。言い換えれば、Promise の状態に関係なく、 p.then (または p.catch) を何度でも呼び出すことができます。

(5) Promise は、ECMAscript 6 で非同期コードを管理する標準的な方法です。JavaScript ライブラリは、Promise を使用して、ajax、アニメーション、およびその他の一般的な非同期対話を管理します。

簡単に言えば、アイデアは次のとおりです。各非同期タスクは、コールバック関数を指定できる then メソッドを持つ Promise オブジェクトを返します。たとえば、f1 のコールバック関数 f2 は次のように記述できます。

f1.then(f2);

f1 は次のように書き換える必要があります (jquery を使用して実装):

function f1(){
   var dfd=$.deferred();
   settimeout(function(){
     //f1的任务代码
     dfd.resolve();
　 },500);
  return dfd.promise;  
}

このように記述することの利点: コールバック関数チェーン形式で書かれており、プログラムの流れがわかりやすく、強力な機能を実現するためのサポートメソッドが充実しています。

例: 複数のコールバック関数を指定します。

f1().then(f2).then(f3);

別の例、エラーが発生した場合のコールバック関数を指定します。

f1().then(f2).fail(f3);

さらに、前の 3 つの関数のどれにも当てはまらないものがあります。利点: タスクが完了し、コールバック関数が追加された場合、コールバック関数はすぐに実行されます。

したがって、イベントや信号を見逃すことを心配する必要はありません。

この方法の欠点: 書いて理解するのが比較的難しいです。

async await

ES6 Promise の出現以来、非同期コードはコールバック地獄からエレガントな関数パイプライン処理へと徐々に変化してきました。これに慣れていない開発者にとっては、コールバック地獄から Promise 地獄に変わるだけです。

新しい async/await は ES8 で標準化され、Promise と Generator Function を組み合わせるための単なる糖衣構文ですが、async# を経由します。 # #/await そうすれば、古い木に新しい花が咲くように、非同期イベントを同期構文で処理できるようになります。書き方は Promise とはまったく異なります:

function wait(time, fn) {
  return new Promise(resolve => {
    setTimeout(() => {
      console.log('wait:', time)
      resolve(fn ? fn() : time)
    }, time)
  })
}
await wait(500, () => console.log('bar'))
console.log('foo')
// wait: 500
// bar
// foo

By

setTimeout は Promise にパッケージ化され、 await キーワードで呼び出されます。結果は、最初に bar 、次に foo が同期的に実行されることがわかります。つまり、冒頭で述べた同期処理に非同期イベントを書き込むことです。

別の例を見てください:

async function withAsyncAwait() {
  for(let i = 0; i < 5; i++) {
    await wait(i*500, () => console.log(i))
  }
}await withAsyncAwait()
// wait: 0
// 0
// wait: 500
// 1
// wait: 1000
// 2
// wait: 1500
// 3
// wait: 2000
// 4

コードは、

for ループと await を使用して、withAsyncAwait 関数を実装します。キーワード wait 関数を繰り返し実行します。ここで実行すると、ループは次のループを実行する前に、順番に異なる秒数待機します。

async/await を使用する場合、await キーワードは非同期関数内でのみ実行できるため、必ず次の場所で使用することを忘れないでください。同時に。

さらに、ループを使用して非同期イベントを処理する場合、ES6 以降に提供される多くの Array メソッドは

async/await 構文をサポートしていないことに注意する必要があります。ここで ## が使用されています #forEach は for を置き換えます。結果は同期実行され、数値は 0.5 秒ごとに出力されます: [関連する推奨事項:

JavaScript の学習]チュートリアル

#]#

以上がJavaScriptの2つの非同期処理方法とは何ですか?の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。