Detaillierte Erläuterung der Schritte zur Verwendung von Promise in ES6

Dieses Mal werde ich Ihnen die Schritte zur Verwendung von Promise in ES6 ausführlich erläutern. Was sind die Vorsichtsmaßnahmen bei der Verwendung von Promise in ES6?

Das bedeutet natürlich nicht, dass Burst ein Full Stack geworden ist. Die Fähigkeiten des gesamten Stapels sind sehr konzentriert. Nicht nur das Front-End kann HTML und einige Interaktionen schreiben, sondern das Back-End ist auch mit dem Hinzufügen, Löschen, Überprüfen und Ändern der Datenbank vertraut.

Jeder, der mit Node in Kontakt gekommen ist, muss wissen, dass Node für seine asynchronen (Async) Rückrufe bekannt ist. Seine Asynchronität verbessert die Ausführungseffizienz des Programms, verringert aber auch die Lesbarkeit des Programms. Wenn wir mehrere asynchrone Vorgänge haben und die letztere Operation die Ausführung der von der vorherigen Operation zurückgegebenen Daten erfordert, werden ordnungsgemäße asynchrone Vorgänge gemäß den allgemeinen Ausführungsregeln von Node normalerweise Schicht für Schicht verschachtelt.

Um dieses Problem zu lösen, schlug ES6 die Implementierung von Promise vor.

Bedeutung

Versprechen Objekt, das für den endgültigen Abschluss (oder Fehler) eines asynchronen Vorgangs und seinen Ergebniswert verwendet wird äußern. Vereinfacht ausgedrückt wird es zur Verarbeitung asynchroner Vorgänge verwendet. Wenn die asynchrone Verarbeitung erfolgreich ist, wird die erfolgreiche Operation ausgeführt. Wenn die asynchrone Verarbeitung fehlschlägt, wird der Fehler erfasst oder nachfolgende Vorgänge gestoppt.

Seine allgemeine Darstellung ist:

new Promise(
  /* executor */
  function(resolve, reject) {
    if (/* success */) {
      // ...执行代码
      resolve();
    } else { /* fail */
      // ...执行代码
      reject();
    }
  }
);

Unter diesen ist der Parameter Executor in Promise eine Executor-Funktion, die zwei Parameter hat: Auflösung und Ablehnung. Normalerweise sind darin einige asynchrone Vorgänge enthalten. Wenn der asynchrone Vorgang erfolgreich ist, können Sie „resolve()“ aufrufen, um den -Status der Instanz auf „erfüllt“ zu setzen, d. h. auf „abgeschlossen“. () setzt den Status der Instanz auf „Abgelehnt“, also „fehlgeschlagen“.

Wir können uns das Promise-Objekt als ein Fabrik-Fließband vorstellen. Aufgrund seiner Aufgaben hat das Fließband nur drei Zustände, einer ist der Anfangszustand (wenn es gerade eingeschaltet ist), und der andere ist der Anfangszustand, dass das verarbeitete Produkt erfolgreich ist, und der andere ist, dass das verarbeitete Produkt fehlschlägt (ein Fehler ist aufgetreten). Ebenso hat das Promise-Objekt drei Zustände:

1. ausstehend: Der Anfangszustand, auch unentschlossener Zustand genannt, ist der Zustand nach dem Aufruf der Executor-Executor-Funktion bei der Initialisierung des Promise.

2. erfüllt: Abschlussstatus, was bedeutet, dass der asynchrone Vorgang erfolgreich ist.

3. abgelehnt: Fehlerstatus, was bedeutet, dass der asynchrone Vorgang fehlgeschlagen ist.

Es gibt nur zwei Zustände, die konvertiert werden können, nämlich

1. Der Vorgang ist erfolgreich: ausstehend -> erfüllt

2. Vorgang fehlgeschlagen: ausstehend -> abgelehnt

Und diese Zustandstransformation ist einseitig und irreversibel und kann nicht zurückübertragen werden in den Ausgangszustand (ausstehend) versetzt.

Methoden

Promise.prototype.then()

Das Promise-Objekt enthält das Dann Methode, Then() gibt nach dem Aufruf ein Promise-Objekt zurück, was bedeutet, dass das instanziierte Promise-Objekt in einer Kette aufgerufen werden kann und diese then()-Methode zwei Funktionen empfangen kann, eine ist die Funktion nach erfolgreicher Verarbeitung und die andere ist das Fehlerergebnis.

lautet wie folgt:

var promise1 = new Promise(function(resolve, reject) {
 // 2秒后置为接收状态
 setTimeout(function() {
  resolve('success');
 }, 2000);
});
promise1.then(function(data) {
 console.log(data); // success
}, function(err) {
 console.log(err); // 不执行
}).then(function(data) {
 // 上一步的then()方法没有返回值
 console.log('链式调用：' + data); // 链式调用：undefined 
}).then(function(data) {
 // ....
});

Hier konzentrieren wir uns hauptsächlich auf den Status des Promise-Objekts, das nach dem Aufruf der Promise1.then()-Methode zurückgegeben wird. Ist es ausstehend, erfüllt oder abgelehnt?

Der Status des zurückgegebenen Promise-Objekts basiert hauptsächlich auf dem von der Promise1.then()-Methode zurückgegebenen Wert, der grob in die folgenden Situationen unterteilt wird:

1. If Wenn im then()-Methodenwert ein Parameter zurückgegeben wird, wird das zurückgegebene Promise zum Empfangsstatus.

2. Wenn in der then()-Methode eine Ausnahme ausgelöst wird, wird das zurückgegebene Promise abgelehnt.

3. Wenn die then()-Methode die discover()-Methode aufruft, wird das zurückgegebene Promise zum Empfangsstatus.

4. Wenn die Methode „then()“ die Methode „reject()“ aufruft, wird das zurückgegebene Versprechen abgelehnt.

5. Wenn die then()-Methode eine neue Promise-Instanz mit einem unbekannten Status (ausstehend) zurückgibt, dann befindet sich das neue zurückgegebene Promise in einem unbekannten Status.

6. Wenn die then()-Methode nicht explizit Auflösungsdaten (Daten)/Reject(Daten)/Rückgabedaten angibt, ist das neue zurückgegebene Versprechen der Empfangsstatus, der auf der Ebene ausgeführt werden kann nach Ebene Weitergeben.

Konvertierungsbeispiele sind wie folgt:

var promise2 = new Promise(function(resolve, reject) {
 // 2秒后置为接收状态
 setTimeout(function() {
  resolve('success');
 }, 2000);
});
promise2
 .then(function(data) {
  // 上一个then()调用了resolve，置为fulfilled态
  console.log('第一个then');
  console.log(data);
  return '2';
 })
 .then(function(data) {
  // 此时这里的状态也是fulfilled, 因为上一步返回了2
  console.log('第二个then');
  console.log(data); // 2
  return new Promise(function(resolve, reject) {
   reject('把状态置为rejected error'); // 返回一个rejected的Promise实例
  });
 }, function(err) {
  // error
 })
 .then(function(data) {
  /* 这里不运行 */
  console.log('第三个then');
  console.log(data);
  // ....
 }, function(err) {
  // error回调
  // 此时这里的状态也是fulfilled, 因为上一步使用了reject()来返回值
  console.log('出错：' + err); // 出错：把状态置为rejected error
 })
 .then(function(data) {
  // 没有明确指定返回值，默认返回fulfilled
  console.log('这里是fulfilled态');
});

Promise.prototype.catch()

catch()方法和then()方法一样，都会返回一个新的Promise对象，它主要用于捕获异步操作时出现的异常。因此，我们通常省略then()方法的第二个参数，把错误处理控制权转交给其后面的catch()函数，如下：

var promise3 = new Promise(function(resolve, reject) {
 setTimeout(function() {
  reject('reject');
 }, 2000);
});
promise3.then(function(data) {
 console.log('这里是fulfilled状态'); // 这里不会触发
 // ...
}).catch(function(err) {
 // 最后的catch()方法可以捕获在这一条Promise链上的异常
 console.log('出错：' + err); // 出错：reject
});

Promise.all()

Promise.all()接收一个参数，它必须是可以迭代的，比如数组。

它通常用来处理一些并发的异步操作，即它们的结果互不干扰，但是又需要异步执行。它最终只有两种状态：成功或者失败。

它的状态受参数内各个值的状态影响，即里面状态全部为fulfilled时，它才会变成fulfilled，否则变成rejected。

成功调用后返回一个数组，数组的值是有序的，即按照传入参数的数组的值操作后返回的结果。如下：

// 置为fulfilled状态的情况
var arr = [1, 2, 3];
var promises = arr.map(function(e) {
 return new Promise(function(resolve, reject) {
  resolve(e * 5);
 });
});
Promise.all(promises).then(function(data) {
  // 有序输出
 console.log(data); // [5, 10, 15]
 console.log(arr); // [1, 2, 3]
});

// 置为rejected状态的情况
var arr = [1, 2, 3];
var promises2 = arr.map(function(e) {
 return new Promise(function(resolve, reject) {
  if (e === 3) {
   reject('rejected');
  }
  resolve(e * 5);
 });
});
Promise.all(promises2).then(function(data) {
 // 这里不会执行
 console.log(data);
 console.log(arr);
}).catch(function(err) {
 console.log(err); // rejected
});

Promise.race()

Promise.race()和Promise.all()类似，都接收一个可以迭代的参数，但是不同之处是Promise.race()的状态变化不是全部受参数内的状态影响，一旦参数内有一个值的状态发生的改变，那么该Promise的状态就是改变的状态。就跟race单词的字面意思一样，谁跑的快谁赢。如下：

var p1 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 300, 'p1 doned');
});
var p2 = new Promise(function(resolve, reject) {
 setTimeout(resolve, 50, 'p2 doned');
});
var p3 = new Promise(function(resolve, reject) {
 setTimeout(reject, 100, 'p3 rejected');
});
Promise.race([p1, p2, p3]).then(function(data) {
 // 显然p2更快，所以状态变成了fulfilled
 // 如果p3更快，那么状态就会变成rejected
 console.log(data); // p2 doned
}).catch(function(err) {
 console.log(err); // 不执行
});

Promise.resolve()

Promise.resolve()接受一个参数值，可以是普通的值，具有then()方法的对象和Promise实例。正常情况下，它返回一个Promise对象，状态为fulfilled。但是，当解析时发生错误时，返回的Promise对象将会置为rejected态。如下：

// 参数为普通值
var p4 = Promise.resolve(5);
p4.then(function(data) {
 console.log(data); // 5
});
// 参数为含有then()方法的对象
var obj = {
 then: function() {
  console.log('obj 里面的then()方法');
 }
};
var p5 = Promise.resolve(obj);
p5.then(function(data) {
 // 这里的值时obj方法里面返回的值
 console.log(data); // obj 里面的then()方法
});
// 参数为Promise实例
var p6 = Promise.resolve(7);
var p7 = Promise.resolve(p6);
p7.then(function(data) {
 // 这里的值时Promise实例返回的值
 console.log(data); // 7
});
// 参数为Promise实例,但参数是rejected态
var p8 = Promise.reject(8);
var p9 = Promise.resolve(p8);
p9.then(function(data) {
 // 这里的值时Promise实例返回的值
 console.log('fulfilled:'+ data); // 不执行
}).catch(function(err) {
 console.log('rejected:' + err); // rejected: 8
});

Promise.reject()

Promise.reject()和Promise.resolve()正好相反，它接收一个参数值reason，即发生异常的原因。此时返回的Promise对象将会置为rejected态。如下：

var p10 = Promise.reject('手动拒绝');
p10.then(function(data) {
 console.log(data); // 这里不会执行，因为是rejected态
}).catch(function(err) {
 console.log(err); // 手动拒绝
}).then(function(data) {
 // 不受上一级影响
 console.log('状态：fulfilled'); // 状态：fulfilled
});

总之，除非Promise.then()方法内部抛出异常或者是明确置为rejected态，否则它返回的Promise的状态都是fulfilled态，即完成态，并且它的状态不受它的上一级的状态的影响。

总结

大概常用的方法就写那么多，剩下的看自己实际需要再去了解。

解决Node回调地狱的不止有Promise，还有Generator和ES7提出的Async实现。

相信看了本文案例你已经掌握了方法，更多精彩请关注php中文网其它相关文章！

推荐阅读：

怎样用JS实现DOM树遍历

VUE中地区选择器组件使用详解

Das obige ist der detaillierte Inhalt vonDetaillierte Erläuterung der Schritte zur Verwendung von Promise in ES6. Für weitere Informationen folgen Sie bitte anderen verwandten Artikeln auf der PHP chinesischen Website!