前端 JS 经典：Promise 详解

1. Promise 由来

在以前我们实现异步是用的回调函数，当一个异步哀求需要依赖上一个异步哀求返回的结果的时候，就会形成如下这种的调用布局。

1. 请求1(function (结果1) {
2.   请求2(function (结果2) {
3.     请求3(function(结果3)) {
4.       请求4(function(结果4) {})
5.     }
6.   });
7. });

复制代码

这种布局看着很紊乱且不易维护，被我们亲切的叫做 “回调地狱”。为了办理回调地狱的问题，Promise 就诞生了。
Promise 诞生的使命：优雅的去表示异步回调。
2. Promise 基础概念

2.1 创建 promise 实例

Promise 是一个构造函数，所以我们在调用一个 Promsie 的时候，要用 new Promsie 的方式去调用。

1. const ps = new Promise();

复制代码

new Promise 接受一个函数类型的参数。这个函数又吸取两个参数 resolve 和 reject，分别对映成功回调和失败回调。Promise 内部有 3 种状态 pending（举行时），fulfilled（已成功），rejected（已失败）。且这三种状态是不可逆的，只能由 pending 到 fulfilled，pending 到 rejected。resolve 使 promise 状态由 pending 到 fulfilled，reject 使 promise 状态由 pending 到 rejected。

1. const ps = new Promise(function () {});

复制代码

 

1. const ps = new Promise(function (resolve, reject) {
2.   let number = 10;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });

复制代码

 

2.2 实例方法

为了更好的控制下一步执行，又诞生了三个实例方法 then、catch、finally。
2.2.1 then 方法

then 方法一样平常接受两个参数 resolve、reject。分别对应成功时的回调和失败时的回调。
成功状态的 promise 实例

1. const ps1 = new Promise(function (resolve, reject) {
2.   let number = 10;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });
10. ps1.then(function (res) {
11.   console.log(res);
12. });

复制代码

失败状态的 promise 实例

1. const ps2 = new Promise(function (resolve, reject) {
2.   let number = 9;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });
10. ps2.then(
11.   function (res) {},
12.   function (err) {
13.     console.log(err);
14.   }
15. );

复制代码

2.2.2 catch 方法

then 方法支持链式调用，then 的执行严峻依赖上一步的结果，上一步假如没有结果，那么下一步就不会执行。但是每一步都写 reject 特别麻烦，所以诞生了 catch，then 就可以省略 reject 方法，reject 方法就交给 catch 执行，同时 catch 还可以捕获执行 resolve 的非常。

1. const ps2 = new Promise(function (resolve, reject) {
2.   let number = 9;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });
10. ps2
11.   .then(function (res) {})
12.   .catch(function (err) {
13.     console.log(err);
14.   });

复制代码

2.2.3 finally 方法

有的时候，无论成功还是失败都需要执行一些利用，就诞生了 finally。我们可以在这做一些清算工作。

1. const ps2 = new Promise(function (resolve, reject) {
2.   let number = 9;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });
10. ps2
11.   .then(function (res) {})
12.   .catch(function (err) {
13.     console.log(err);
14.   })
15.   .finally(function () {
16.     console.log("end");
17.   });

复制代码

2.2.4 then 的链式调用

因为 then 方法支持链式调用，所以我们需要知道使用 then 方法会有什么结果。只要调用 promise 实例的 then 方法一定产生一个新的 promise，这个 promise 的状态由里面的函数决定。函数什么时候有结果，这个新 promise 状态什么时候由 pending 转 fulfilled。catch 和 finally 同理。

1. const ps = new Promise(function (resolve, reject) {
2.   let number = 10;
3.   if (number >= 10) {
4.     resolve(number);
5.   } else {
6.     reject("number 小于10");
7.   }
8. });ps.then(function (res) {  return res * 10;})  .then(function (res) {    return res + 2;  })  .then(function (res) {    if (res > 100) {      console.log(res);    } else {      console.log("最后结果小于100");    }  });

复制代码

3. Promise 原型方法

为了满意更多的业务需要，又诞生了 6 个原型方法 Promise.all()、Promise.allSettled()、Promise.any()、Promise.race()、Promise.reject()、Promise.resolve()。且都会返回一个确定状态的 Promsie 对象。
统一使用两个成功异步 ps1、ps2。两个失败异步 ps3、ps4。作为测试用例。如下：

1. const ps1 = new Promise(function (resolve, reject) {
2.   setTimeout(() => {
3.     resolve("成功结果1");
4.   }, 1000);
5. });
7. const ps2 = new Promise(function (resolve, reject) {
8.   setTimeout(() => {
9.     resolve("成功结果2");
10.   }, 2000);
11. });
13. const ps3 = new Promise(function (resolve, reject) {
14.   setTimeout(() => {
15.     reject("失败结果1");
16.   }, 3000);
17. });
19. const ps4 = new Promise(function (resolve, reject) {
20.   setTimeout(() => {
21.     reject("失败结果2");
22.   }, 2000);
23. });

复制代码

3.1 Promise.all()

通过数组的形式传入异步利用，全部的异步执行都成功，才执行成功，假如有一个失败了，就执行失败。例子如下：
都成功，执行 then 方法，成功返回结果，通过 res 以数组的方式返回

1. Promise.all([ps1, ps2])
2.   .then(function (res) {
3.     console.log("都成功", res);
4.   })
5.   .catch(function (err) {
6.     console.log(err);
7.   });

复制代码

按传入顺序执行，假如有一个异步执行失败，中断其他异步利用，执行 catch 方法，通过 err 返回失败结果

1. Promise.all([ps1, ps2, ps3, ps4])
2.   .then(function (res) {
3.     console.log("都成功", res);
4.   })
5.   .catch(function (err) {
6.     console.log("执行失败", err);
7.   });

复制代码

3.2 Promise.allSettled()

全部执行都有结果了就执行，无论成功还是失败

1. Promise.allSettled([ps1, ps2, ps3, ps4]).then(function (res) {
2.   console.log("都返回结果", res);
3. });

复制代码

3.3 Promise.any()

任意异步成功了就执行

1. Promise.any([ps1, ps2, ps3, ps4]).then(function (res) {
2.   console.log("任意成功", res);
3. });

复制代码

3.4 Promise.race()

任意异步成功或失败就执行。

1. Promise.race([ps1, ps2, ps3, ps4]).then(function (res) {
2.   console.log("任意成功或失败", res);
3. });

复制代码

3.5 Promise.reject()

返回一个状态为 rejected 的 Promise 对象

3.6 Promise.resolve()

会吸取 4 种类型的参数：promise 实例 、具有 then 方法的对象、没有 then 方法的对象、不传参
当参数是一个 Promise 实例时，直接返回这个实例。

1. Promise.resolve(ps1);

复制代码

 当参数是一个具有 then 方法的对象时，将这个对象转为 Promise 对象，并立即执行对象的 then 方法

1. let obj = {
2.   name: "yqcoder",
3.   then(resolve) {
4.     resolve(this.name);
5.   },
6. };
8. Promise.resolve(obj);

复制代码

当参数是一个没有 then 方法的对象，大概参数不是对象时，就会返回状态为 fulfilled 的新的 Promise 对象，并将参数传入下一个 then。

1. let obj = {
2.   name: "yqcoder",
3. };
5. let ps = Promise.resolve(obj);
7. ps.then(function (res) {
8.   console.log("结果", res);
9. });

复制代码

 

当不带任何参数时，就会返回一个状态为 fulfilled 的 Promise 对象

1. Promise.resolve();

复制代码

 

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。