同期プログラミングは一般に簡単にデバッグしてメンテナンスしますが、非同期プログラミングは一般に、パフォーマンスの向上と柔軟性を高めることができます。非同期の最大の特徴は、待つ必要がないことです。 「約束」は徐々にJavaScriptの最も重要な部分になり、多数の新しいAPIが約束の原則を実装し始めました。約束とは何か、そのAPIと使用法を見てみましょう!
約束のステータス
xmlhttprequest APIは非同期ですが、Promise APIを使用しません。しかし、約束を使用する多くのネイティブJavaScript APIがあります。
*バッテリーAPI
*APIを取得する(XHRの代替品)
*サービスワーカーAPI
約束は将来的にはより人気があり一般的になるだけであり、すべてのフロントエンド開発者がそれを使用することが非常に重要です。注目に値するもう1つのことは、node.jsが約束に基づいたプラットフォームであることです(約束がコア機能であることは明らかです)。
約束の使用は、あなたが思っているよりも簡単です - あなたがSetimeoutを使用して非同期タスクを制御していたなら!
約束の基本的な使用
新しいPromise()コンストラクターは、以前のSettimeOutとXMLHTTPREQUESTの使用と同様に、従来の非同期タスクで使用できます。新しいキーワードを使用して新しい約束が生成されます。同時に、この約束は、コールバック操作を実行できるようにするための解決および拒否機能を提供します。
var p = new Promise(function(resolve、拒否){//非同期タスクの非典型的なタスクを実行します。プログラマーは、実行状況に応じてコールバック関数内でResolveを手動で呼び出して拒否することができます。以下は、XMLHTTPREQUESTコールを約束ベースのタスクに変換するより現実的な例です。
// Jake Archibaldの約束と戻って:// http://www.html5rocks.com/en/tutorials/es6/promises/#toc-promising-xmlhttprequestfunction get(url){//新しい約束を返します。新しい約束(function(resolve、拒否){//通常のxhrのものvar req = new xmlhttprequest(); req.open( 'get'、url); req.onload = function(){//これは404などでも呼ばれます。 }それ以外の場合は、意味のあるエラー(req.statustext)で拒否します。 {console.log( "success!"、response);}、function(error){console.error( "faild!"、error);});promise.resolve()およびpromise.reject()は直接呼び出すことができます。時には、約束を実行する必要がないと判断した場合、Promiseオブジェクトを作成するために新しい使用する必要はありませんが、Promise.Resolve()およびPromise.Reject()を直接呼び出すことができます。例えば:
var usercache = {}; function getUserDetail(username){//どちらの場合も、キャッシュされたかどうかにかかわらず、(usercache [username]){//「new」キーワードを返すことなく約束を返す場合、約束が返されます。 } // Fetch APIを使用して情報を取得する// Fetch Returns Promise return return fetch( 'users/' + username + '.json')約束は間違いなく戻ってくるので、当時を使用して、返品値を処理する方法をキャッチできます!
次にメソッド
すべてのPromiseオブジェクトインスタンスには、この約束と対話するために使用されるThenメソッドがあります。まず、次のメソッドはデフォルトでResolve()関数を呼び出します。
new Promise(function(resolve、拒否){// settimeout settimeout(function(){resolve(10);}、3000);})を使用した模擬非同期アクション次に、コールバックアクションのトリガー時間は、約束が実行されることです。また、次の方法を連結してコールバック操作を実行することもできます。
new Promise(function(resolve、拒否){// settimeout setimeout(function(){resolve(10);}、3000);})を使用した模擬非同期アクション(num){console.log( 'first thin:'、num); rurne num * 2;})。 })then(function(num){console.log( 'last then:'、num);}); // console:// first:10 // second:20 // last then:40それぞれの通話は、前の後続の返品値をパラメーターとして呼び出すことがわかります。
約束が実行され、シングルが再び呼び出された場合、コールバックアクションが再び実行されます。この約束で拒否コールバック関数が実行され、その後のメソッドが呼び出された場合、コールバック関数は実行されません。
キャッチ方法
約束が拒否された場合(拒否)、キャッチ方法が実行されます。
new Promise(function(resolve、拒否){// setimeout settimeout(){reject( 'don!');}、3000);}); function(console.log( 'done'、e);})。 終わり!'通常、拒否法の実行障害の結果を処理し、キャッチで例外結果を実行します。
拒否(エラー( 'データが見つからなかった'));
Promise.allメソッド
多くの場合、非同期に電話するときにシナリオがあります。複数の非同期操作を同時に呼び出す必要がありますが、すべての操作が完了した後にのみ応答操作を実行することを願っています。これはPromise.allの役割です。 Promise.allメソッドは、配列の形でパラメーターとして複数の約束を受信でき、これらすべての約束が正常に実行された後、コールバック関数が呼び出されます。
promise.all([Promise1、Promise2])
Promise.allを使用する良い例は、複数のAJAX操作を実行することです(フェッチ経由)コール:
var request1 = fetch( '/users.json'); var request2 = fetch( '/article.json'); promist.all([request1、request2])。
また、フェッチとバッテリー状態のAPIのミックスを実行することもできます。
promise.all([fetch( '/users.json')、navigator.getBattery()])。
拒否関数が約束で呼び出されると、実行は拒否され、正常に完了することはできません。状況は少し複雑になります。約束が拒否されると、キャッチ方法は最初に実行された拒否関数をキャッチします。
var req1 = new Promise(function(resolve、requed){// setimeout setimeout(){resolve( 'first!');}、4000);}); var req2 = new promise(resolve、拒否){// settimeout setimeout( 'second(' second( 'second(' second); 3000);}); promise.all([req1、req2])。then(function(results){console.log( 'then:'、one);})。Promise.allは非常に重要なインターフェイスであり、多くの新しく生まれたPromise APIで重要な役割を果たします。
promise.race
Promise.raceは興味深い機能です - すべての約束が解決または拒否されるのを待つことはありませんが、すべての約束では、1つの実行が終了する限り発生します。
var req1 = new Promise(function(resolve、requed){// setimeout setimeout(){resolve( 'first!');}、8000);}); var req2 = new promise(function(resolve、拒否){// settimeout setimeout( 'second(); 3000);}); promise.race([req1、req2])。便利なシナリオは、複数のミラーサーバーからリソースをダウンロードすることです。一方が戻ってくると、もう一方の返品は処理されません。
約束を使用することを学びます
約束は過去数年間で非常にホットなトピックであり、言語アーキテクチャになるためにJavaScriptから引き出されました。私たちはすぐに、約束ベースのパターンを使用するますます多くのJavaScript APIを見ると信じています。
上記はこの記事のすべての内容です。みんなの学習に役立つことを願っています。誰もがwulin.comをもっとサポートすることを願っています。