Überblick über Promise und Einführung in gängige Methoden

Promise-Übersicht

Das Promise-Objekt ist eine von der CommonJS-Arbeitsgruppe vorgeschlagene Spezifikation, um eine einheitliche Schnittstelle für asynchrone Vorgänge bereitzustellen.

Was sind also Versprechen?

Erstens ist es ein Objekt, was bedeutet, dass es nicht anders verwendet wird als andere JavaScript-Objekte; zweitens fungiert es als Proxy, agiert als asynchrone Operation und Vermittler zwischen Rückruffunktionen . Es ermöglicht asynchronen Vorgängen, über eine Schnittstelle für synchrone Vorgänge zu verfügen, sodass das Programm über einen normalen synchron laufenden Prozess verfügt und Rückruffunktionen nicht Schicht für Schicht verschachtelt werden müssen.

Einfach ausgedrückt besteht die Idee darin, dass jede asynchrone Aufgabe sofort ein Promise-Objekt zurückgibt. Da sie sofort zurückgegeben wird, kann der synchrone Betriebsprozess verwendet werden. Dieses Promises-Objekt verfügt über eine then-Methode, mit der Sie eine Rückruffunktion angeben können, die nach Abschluss der asynchronen Aufgabe aufgerufen werden soll.

Zum Beispiel gibt die asynchrone Operation f1 ein Promise-Objekt zurück und seine Rückruffunktion f2 wird wie folgt geschrieben.

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

Vorwort

Promise ist JavaScript Als asynchrone Betriebslösung habe ich in letzter Zeit viele Leute im Projekt gesehen, die Promise-Bibliotheksklassen wie Bluebird, q, jQuery.Deffered und andere Polyfill-Promise-Methoden verwenden. Bei der Verwendung habe ich das lange Dokument gelesen . Ich habe es aufrichtig satt, zu schlafen und nicht zu lieben.

Mit der Entwicklung von es5 unterstützt Node jetzt Versprechen in Version 0.12. Auf der Clientseite unterstützen die meisten Browser auch Promise. Wenn Sie mit Browsern niedrigerer Versionen kompatibel sein möchten, können Sie es5 hinzufügen -shim und andere Polyfill-Versprechen. Werfen wir ohne weiteres einen Blick auf die ausführliche Einführung:

Nutzung

Versprechen Sie häufige Szenarien.

• Verarbeitung asynchroner Rückrufe

• Synchronisierte Verarbeitung mehrerer asynchroner Funktionen

• Asynchrone Abhängigkeiten von asynchronen Rückrufen

• Kapseln Sie eine einheitliche Eingabemethode oder Fehlerbehandlung
  

1. Handhabung asynchroner Rückruf

Grundlegende Verwendung von Promise zur Verarbeitung asynchroner Rückrufe.

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. Synchrone Verarbeitung mehrerer asynchroner Funktionen

Manchmal müssen wir zwei Ajax senden, ich hoffe, sie können Um die Daten zusammen zurückzugeben, können Sie die folgende Methode verwenden.

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. Asynchrone Abhängigkeiten Asynchrone Rückrufe

Einige Szenarien sind asynchron Wenn Sie sich auf einen anderen asynchronen Rückgabewert verlassen, können Sie die folgende Verwendung verwenden.

Beispiel: Verwenden Sie eine Bestellnummer, um die Bestelldetails asynchron abzurufen, und verwenden Sie dann die Produkt-ID in den Bestelldetails, um die Produktdetails abzurufen.

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. Kapseln Sie eine einheitliche Eingabemethode oder Fehlerbehandlung

Fehlerbehandlung

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

Das obige ist der detaillierte Inhalt vonÜberblick über Promise und Einführung in gängige Methoden. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!