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

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('pro1')
  }, 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('pro1')
  }, 300)
 })
}
function Pro2(){
 return new Promise(function(resolve, reject) {
  setTimeout(function(){
   resolve('pro2')
  }, 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: ['123', '456']
   }
   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: '衣服'
    }
   })
   resolve(products)
  }, 300)
 })
}
//调用

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

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

エラー処理

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

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