异步promise

TomorrowLM
23 阅读10分钟

promise

概念

  • 状态

    一共有三种状态，分别为pending（进行中）、fulfilled（已成功）和rejected（已失败）。

  • 特点

    • 只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态

    • 一旦状态改变，就不会在变。状态改变的过程只可能是：从pending变为fulfilled和从pending变为rejected。如果状态发生上述变化后，此时状态就不会在改

      变了，这时就称为resolved（已定型）

      为了行文方便，本章后面的resolved统一只指fulfilled状态，不包含rejected状态。

  • 优点： 可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数

  • 缺点： 无法取消Promise 其次，如果没有使用catch()方法指定错误处理的回调函数，Promise内部抛出的错误，不会反应到外部。 Promise 内部的错误不会影响到 Promise 外部的代码，通俗的说法就是“Promise 会吃掉错误”。

     const someAsyncThing = function () {
   return new Promise(function (resolve, reject) {
     // 下面一行会报错，因为x没有声明
     throw new Error("x 必须为正数");
   });
 };
 try {
   someAsyncThing()
     .then(function () {
       console.log("everything is great");
     })
     .catch((err) => {
       console.log(err);
     });
 } catch (error) {
   setTimeout(() => {
     console.log(123);
   }, 3000);
 }
 ​

基本用法

  • Promise对象是一个构造函数，用来生成Promise实例。

     const promise = new Promise(function(resolve, reject) {
   if (/* 异步操作成功 */){
     resolve(value);
   } else {
     reject(error);//在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去
   }
 });
 ​
 //Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。第二个函数是可选的，不一定要提供。
 promise.then(function(value) {
   // success
 }, function(error) {
   // failure
 });

  • Promise对象实现的 Ajax 操作的例子。

     const getJSON = function(url) {
   const promise = new Promise(function(resolve, reject){
     const handler = function() {
       if (this.readyState !== 4) {
         return;
       }
       if (this.status === 200) {
         resolve(this.response);
       } else {
         reject(new Error(this.statusText));
       }
     };
     const client = new XMLHttpRequest();
     client.open("GET", url);
     client.onreadystatechange = handler;
     client.responseType = "json";
     client.setRequestHeader("Accept", "application/json");
     client.send();
   });
   return promise;
 };
 getJSON("/posts.json").then(function(json) {
   console.log('Contents: ' + json);
 }, function(error) {
   console.error('出错了', error);
 });

  • 调用resolve函数和reject函数时带有参数,参数是另一个Promise对象

     const p1 = new Promise(function (resolve, reject) {
   // ...
 });
 ​
 const p2 = new Promise(function (resolve, reject) {
   // ...
   resolve(p1);
 })

    注意，这时p1的状态就会传递给p2，也就是说，p1的状态决定了p2的状态。如果p1的状态是pending，那么p2的回调函数就会等待p1的状态改变；如果p1的状态已经是resolved或者rejected，那么p2的回调函数将会立刻执行。

     const p1 = new Promise(function (resolve, reject) {
   setTimeout(() => reject(new Error('fail')), 3000)
 })
 ​
 const p2 = new Promise(function (resolve, reject) {
   setTimeout(() => resolve(p1), 1000)
 })
 ​
 p2
   .then(result => console.log('result', result))
   .catch(error => console.log('error', error))
 // error [Error: fail] 

    上面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后改变，resolve方法返回的是p1。由于p2返回的是另一个 Promise，导致p2自己的状态无效了，由p1的状态决定p2的状态。所以，后面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch方法指定的回调函数。

  • 调用resolve或reject并不会终结 Promise 的参数函数的执行。

     new Promise((resolve, reject) => {
   resolve(1);
   console.log(2);
 }).then(r => {
   console.log(r);
 });
 // 2
 // 1

    上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

    一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。

API

then

它的作用是为 Promise 实例添加状态改变时的回调函数。

Promise.prototype.then()方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。

 new Promise((resolved) => {
   setTimeout(() => {
     resolved(1);
     console.log(3);
   }, 2000);
   console.log(2);
 })
   .then(function (res) {
     // throw new Error("12");
     console.log(res);
     return 2;
   })
   .then(
     function (res) {
       console.log("resolved: ", res);
     },
     function (err) {
       console.log("rejected: ", err);
     }
   );
 console.log(4);
 ​
 2 •••••at ••••••quokka.js:6:3•
 ​
 4 •••••at ••••••quokka.js:21:1•
 ​
 3 •••••at ••••••quokka.js:4:5•
 ​
 1 •••••at ••••••••res••• •quokka.js:10:5•
 ​
 resolved:  2 •••••at ••••••quokka.js:15:7•

上面代码中，第一个then方法指定的回调函数，返回的是另一个Promise对象。这时，第二个then方法指定的回调函数，就会等待这个新的Promise对象状态发生变化。如果变为resolved，就调用第一个回调函数，如果状态变为rejected，就调用第二个回调函数。

catch

Promise.prototype.catch方法是.then(null, rejection)的别名，用于指定发生错误时的回调函数。

 getJSON('/posts.json').then(function(posts) {
   // ...
 }).catch(function(error) {
   // 处理 getJSON 和 前一个回调函数运行时发生的错误
   console.log('发生错误！', error);
 });

getJSON()方法返回一个 Promise 对象，如果该对象状态变为resolved，则会调用then()方法指定的回调函数；如果异步操作抛出错误，状态就会变为rejected，就会调用catch()方法指定的回调函数，处理这个错误。另外，then()方法指定的回调函数，如果运行中抛出错误，也会被catch()方法捕获。

 var promise = new Promise(function(resolve, reject) {
   throw new Error('test');
 });
 promise.catch(function(error) {
   console.log(error);// Error: test
 });
 ​
 // 写法二
 var promise = new Promise(function(resolve, reject) {
   reject(new Error('test'));
 });
 promise.catch(function(error) {
   console.log(error);// Error: test
 });

如果Promise状态已经变成Resolved，再抛出错误是无效的。

 var promise = new Promise(function(resolve, reject) {
   resolve('ok');
   throw new Error('test');
 });
 promise
   .then(function(value) { console.log(value) })
   .catch(function(error) { console.log(error) });
 // ok

一般来说，不要在then方法里面定义Reject状态的回调函数（即then的第二个参数），总是使用catch方法。理由是catch可以捕获前面then方法执行中的错误，也更接近同步的写法（try/catch）。因此，建议总是使用catch方法，而不使用then方法的第二个参数。

 // bad
 new Promise((resolve) => {
   resolve(1)
 }).then(
   function (data) {
     throw new Error("test"); // test
   },
   function (err) {
     // error
     console.log(err);
   }
 );
 ​
 // good
 new Promise((resolve) => {
   resolve(1)
 })
   .then(function (data) {
     throw new Error("test");
   })
   .catch(function (err) {
     // error
     console.log(err); //[Error: test] •••••at ••••••••err••
   });
 ​

catch()方法返回的还是一个 Promise 对象，因此后面还可以接着调用then()方法。

 const someAsyncThing = function() {
   return new Promise(function(resolve, reject) {
     // 下面一行会报错，因为x没有声明
     resolve(x + 2);
   });
 };
 ​
 someAsyncThing()
 .catch(function(error) {
   console.log('oh no', error);
 })
 .then(function() {
   console.log('carry on');
 });
 // oh no [ReferenceError: x is not defined]
 // carry on
all

Promise.prototype.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

 const p = Promise.all([p1, p2, p3]);

Promise.all()方法接受一个数组作为参数，p1、p2、p3都是 Promise 实例，如果不是，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口，且返回的每个成员都是 Promise 实例。

p的状态由p1、p2、p3决定，分成两种情况。

（1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

（2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

 const p1 = new Promise((resolve, reject) => {
   resolve('hello');
 })
 .then(result => result)
 .catch(e => e);
 ​
 const p2 = new Promise((resolve, reject) => {
   throw new Error('报错了');
 })
 .then(result => result)
 .catch(e => e);
 ​
 Promise.all([p1, p2])
 .then(result => console.log(result))
 .catch(e => console.log(e));
 // ["hello", Error: 报错了]

上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

如果p2没有自己的catch方法，就会调用Promise.all(

race/any

Promise.race方法同样是将多个Promise实例，包装成一个新的Promise实例。

 var p = Promise.race([p1, p2, p3]);

上面代码中，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。

Promise.race方法的参数与Promise.all方法一样，如果不是 Promise 实例，就会先调用下面讲到的Promise.resolve方法，将参数转为 Promise 实例，再进一步处理。

下面是一个例子，如果指定时间内没有获得结果，就将Promise的状态变为reject，否则变为resolve。

 var p = Promise.race([
   fetch('/resource-that-may-take-a-while'),
   new Promise(function (resolve, reject) {
     setTimeout(() => reject(new Error('request timeout')), 5000)
   })
 ])
 p.then(response => console.log(response))
 p.catch(error => console.log(error))

上面代码中，如果5秒之内fetch方法无法返回结果，变量p的状态就会变为rejected，从而触发catch方法指定的回调函数。

any参数实例只要有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。

Promise.any()跟Promise.race()方法很像，只有一点不同，就是Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。

finally

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作。 finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。

 promise
 .then(result => {···})
 .catch(error => {···})
 .finally(() => {···});

在执行完then或catch指定的回调函数以后，都会执行finally方法指定的回调函数。

resolve

有时需要将现有对象转为Promise对象，Promise.resolve方法就起到这个作用。

（1）参数是一个Promise实例

如果参数是Promise实例，那么Promise.resolve将不做任何修改、原封不动地返回这个实例。

（3）参数不是一个Promise实例

如果参数是一个原始值，或者是一个不具有then方法的对象，则Promise.resolve方法返回一个新的Promise对象，状态为Resolved。

 var p = Promise.resolve('Hello');
 // 等价于
 var p = new Promise(resolve => resolve('Hello'))
 ​
 p.then(function (s){
   console.log(s)
 });
 // Hello

（4）不带有任何参数

Promise.resolve方法允许调用时不带参数，直接返回一个Resolved状态的Promise对象。

所以，如果希望得到一个Promise对象，比较方便的方法就是直接调用Promise.resolve方法。

 var p = Promise.resolve();
 ​
 p.then(function () {
   // ...
 });

上面代码的变量p就是一个Promise对象。

需要注意的是，立即resolve的Promise对象，是在本轮“事件循环”（event loop）的结束时，而不是在下一轮“事件循环”的开始时。

 setTimeout(function () {
   console.log('three');
 }, 0);
 ​
 Promise.resolve().then(function () {
   console.log('two');
 });
 ​
 console.log('one');
 ​
 // one
 // two
 // three
reject

Promise.reject(reason)方法也会返回一个新的Promise实例，该实例的状态为rejected。它的参数用法与Promise.resolve方法完全一致。

 var p = Promise.reject('出错了');
 // 等同于
 var p = new Promise((resolve, reject) => reject('出错了'))
 ​
 p.then(null, function (s){
   console.log(s)
 });
 // 出错了

上面代码生成一个Promise对象的实例p，状态为rejected，回调函数会立即执行。

Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。

 Promise.reject('出错了')
 .catch(e => {
   console.log(e === '出错了')
 })
 // true

上面代码中，Promise.reject()方法的参数是一个字符串，后面catch()方法的参数e就是这个字符串。

源码

zhuanlan.zhihu.com/p/76811638

avatar
文章
阅读
粉丝