Promise の概要と一般的なメソッドの紹介-jsチュートリアル-php.cn

Promise の概要と一般的なメソッドの紹介

零下一度

リリース： 2017-07-16 14:46:23

オリジナル

2164 人が閲覧しました

Promise の概要

Promise オブジェクトは、非同期操作のための統一インターフェイスを提供するために CommonJS ワーキンググループによって提案された仕様です。

では、約束とは何ですか?

まず第一に、これはオブジェクトであり、他の JavaScript オブジェクトと何ら変わりなく使用されます。次に、プロキシとして機能し、非同期操作とコールバック関数の間の仲介者として機能します。これにより、非同期操作に同期操作用のインターフェイスを持たせることができるため、プログラムは通常の同期実行プロセスを持ち、コールバック関数を層ごとにネストする必要がなくなります。

簡単に言えば、各非同期タスクはすぐに Promise オブジェクトを返すという考え方です。これにより、同期操作プロセスを使用できます。この Promises オブジェクトには、非同期タスクの完了後に呼び出されるコールバック関数を指定できる then メソッドがあります。

たとえば、非同期操作 f1 は Promise オブジェクトを返し、そのコールバック関数 f2 は次のように記述されます。

(new Promise(f1)).then(f2);

はじめに

Promise は JavaScript の非同期操作ソリューションであり、最近、bluebird などのプロジェクトで Promise ライブラリクラスを使用している人をよく見かけます。、q、jQuery.Defered やその他の Polyfill Promise メソッドを使用する場合、長い文書に目を通すのは本当に疲れるので好きではありません。

es5 の開発により、node はバージョン 0.12 で Promise をサポートするようになりました。クライアント側では、ほとんどのブラウザーも Promise をサポートします。以前のバージョンのブラウザーと互換性を持たせたい場合は、es5-shim などの Polyfill Promise を追加できます。。以下で言うことはあまりありません。詳細な紹介を見てみましょう:

使用法

一般的なシナリオを約束します。

非同期コールバックの処理
複数の非同期関数の同期処理
非同期コールバックの非同期依存関係
統合エントリメソッドまたはエラー処理のカプセル化

1.非同期コールバック

非同期コールバックを処理するための Promise の基本的な使用法。

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
//调用
Pro1()
.then(function(data){
 console.log(data) //pro1
})
.catch(function(err){
 throw new Error(err)
})

ログイン後にコピー

2. 複数の非同期関数の同期処理

場合によっては、2 つの ajax を送信し、それらが一緒にデータを返すことができるようにする必要があるため、次のメソッドを使用できます。

function Pro1(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro1&#39;)
  }, 300)
 })
}
function Pro2(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve(&#39;pro2&#39;)
  }, 300)
 })
}
//调用
var Pro = Promise.all([Pro1(), Pro2()]);
Pro
.then(function(data){
 console.log(data[0], data[1]) //Pro1 Pro2
})
.catch(function(err){
 throw new Error(err)
})

ログイン後にコピー

3. 非同期コールバックへの非同期依存

1 つの非同期が別の非同期の戻り値に依存する一部のシナリオでは、次の使用法を使用できます。

例: 注文番号を使用して注文の詳細を非同期的に取得し、注文詳細の製品 ID を使用して製品の詳細を取得します。

function Pro1(orderId){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var orderInfo = {
    orderId: orderId,
    productIds: [&#39;123&#39;, &#39;456&#39;]
   }
   resolve(orderInfo.productIds)
  }, 300)
 })
}
function Pro2(productIds){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   var products = productIds.map(function(productId){
    return {
     productId: productId,
     name: &#39;衣服&#39;
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

Pro1(&#39;abc123&#39;)
.then(function(productIds){
 console.log(&#39;商品id&#39;,productIds) 
 return Pro2(productIds)
})
.then(function(products){
 console.log(&#39;商品详情&#39;,products) 
})
.catch(function(err){
 throw new Error(err)
})

ログイン後にコピー

4. 統合されたエントリメソッドまたはエラー処理をカプセル化します

エラー処理

function ErrorHandler(promiseObj, rejectOrResOrCallback){
 return promiseObj.then(null, function(err){
 if(!err)
 })
}

ログイン後にコピー

以上がPromise の概要と一般的なメソッドの紹介の詳細内容です。詳細については、PHP 中国語 Web サイトの他の関連記事を参照してください。