Promise的九大方法(resolve、reject、then、catch、finally、all、allSettl ...

媒介：
          定期复盘---今天我们来复习一下 Promise 的几个方法，分别是：Promise.resolve、Promise.reject、Promise.then、Promise.catch、Promise.finally、Promise.all、Promise.allSettled、Promise.race、Promise.any；
          接下来我们一起去看看吧，从深处去了解他们有什么区别！！！
   
目录
Promise 状态
1. Promise.resolve
2. Promise.reject
3. Promise.then
  ① 函调函数异步执行
  ② 返回值   
  ③ promise穿透
4. Promise.catch
  ① 语法糖的本质
  ② 只有一个主人
5. Promise.finally
6. Promise.all
7. Promise.allSettled
8. Promise.race
9. Promise.any

---

Promise 状态

• 初始状态 -> pending
  
  
  
  • 初始状态可以改变
    
  • 在resolve 大概 reject 调用之前都处于这个状态
    
  
  
• 最终成功状态 -> fulfilled
  
  
  
  • 执行 resolve 函数，状态改变为 fulfilled
    
  • 执行 onFulfilled 函数
    
  
  
• 最终失败状态 -> rejected
  
  
  
  • 执行 reject 函数，状态改变为 rejected
    
  • 执行 onRejected 函数
    
  
  
• then 方法
  
  
  
  • then 方法为 Promise 对象注册了 onFulfilled 和 onRejected 函数
    
  
  
• catch 方法
  
  
  
  • catch 方法为Promise 对象注册了 onRejected 函数
    
  
  

---

1. Promise.resolve

    静态方法 Promise.resolve(value)可以认为是 new Promise方法的语法糖,比如Promise.resolve(42) 可以认为是以下代码的语法糖。

2. new Promise(function (resolve) {
3.     resolve(42)
4. })

复制代码

     这个静态方法会让Promise对象立即进入确定(即resolved) 状态，并将42通报给后面 then 里所指定的 onFulfilled函数。作为 new Promise的快捷方式，在进行 Promise 对象的初始化大概编写测试代码的时候都非常方便。
      简单总结一下 Promise.resolve方法的话，它的作用就是将通报给它的参数添补 Fulfilled 到 Promise 对象后并返回这个 Promise 对象。

2. Promise.reject

  Promise.reject(error)是和Promise.resolve(value)雷同的静态方法，是 new Promise 方法的快捷方式。比如 Promise.reject(new Error("romise reject error")) 就是下面代码的语法糖形式

2. new Promise(function (reject) {
3.     reject(new Error("Promise reject error"))
4. })

复制代码

      简单总结一下 Promise.reject方法的话：它的功能是调用该 Promise对象通过then指定的 onRejected函数，并讲错误（Error）对象通报给这个onRejected函数


3. Promise.then

    Promise.then(onFulfilled, onRejected)
  ① 函调函数异步执行

2. var promise = new Promise((resolve, reject) => {
3.   console.log("inner Promise"); // 1
4.   setTimeout(() => {
5.     resolve("Fashion Barry"); // 3
6.   }, 1000);
7. });
9. promise.then((res) => {
10.   console.log("res", res);
11. });
12. console.log("outer promise"); // 2
13. // Promise 实际是一个同步函数，then 方法才是异步
14. // 所以输出顺序如上

复制代码

  Promise/A+规范统一规定：Promise 只能使用异步调用方式

  ② 返回值   

    不管你在回调函数 onFulfilled中会返回一个什么样的值，大概不返回值，该值都会由 Promis.resolve(return 的返回值) 进行响应的包装处理。因此，最终 then的结果都是返回一个新创建的 Promise对象。
    也就是说，Promis.then不仅仅是注册一个回调函数那么简单，它还会将回调函数的返回值进行变换，创建并返回一个Promise 对象。正是 then函数中有了如许返回值的机制，才能使得在整个Promise链式结构当中，每个then方法都能给 下一个then方法通报参数。现在我们知道怎么返回的Promise是之前的还是新的？另外该Promise的状态又是怎样？

2. var aPromise = new Promise((resolve, reject) => {
3.   resolve("aPromise");
4. });
5. var thenPromise = aPromise.then((res) => {
6.   console.log("thenPromise: ", res);
7. });
8. var catchPromise = aPromise.catch((err) => {
9.   console.error("catchPromise: ", err);
10. });
12. console.log(aPromise !== thenPromise); // true
13. console.log(thenPromise !== catchPromise); // true
14. console.log(aPromise, thenPromise, catchPromise); // Promise { "aPromise" }, Promise { <pending> }, Promise { <pending> }

复制代码

    从上面结果来看，实际上不管是调用 then还是catch方法， 都返回了一个新的Promise对象

  ③ promise穿透

   我们先来举个例子：

2. Promise.resolve("Barry")
3. .then(Promise.resolve("Barry Promise"))
4. .then((result) => {
5.   console.log("result", result); // "Barry"
6. });

复制代码

如果你认为输出的是【 Barry Promise 】，那么你就错了，实际上他输出的是 【 Barry 】
产生这么的输出是因为你给then方法通报了一个非函数(比如promise对象)的值，代码会如许明白 : then(null),因此导致了前一个promise的结果产生了坠落的效果，也就是和下面代码是一样的， 代码直接穿透了then(null)进入了下一层链：

2. Promise.resolve("Barry")
3. .then(null)
4. .then((result) => {
5.   console.log("result", result); // "Barry"
6. });

复制代码

随意添加多个then(null)结果都是一样的

2. Promise.resolve("Barry")
3. .then(null)
4. .then({ name: "My name is Barry" })
5. .then(null)
6. .then((result) => {
7.   console.log("result", result); // "Barry"
8. });

复制代码

4. Promise.catch


  ① 语法糖的本质

        这里我们再说一遍，实际上Promise.catch只是promise.then(undefined, onRejected) 方法的一个别名而已。也就是说，这个方法用来注册当Promise对象状态变为 Rejected时 的回调函数。可以看下面代码，两者写法是等价的，但是很显着 Promise.catch会让人第一眼看上去不会眼花缭乱:

2. // 第一种写法
3. Promise.resolve()
4.   .then((data) => console.log(data))
5.   .then(undefined, (err) => console.log(err));
7. // 第二种写法
8. Promise.resolve()
9.   .then((data) => console.log(data))
10.   .catch((err) => console.log(err));

复制代码

那么我们现在来说说为什么保举使用第二种方法，而不是第一种:

• 使用promise.then(onFulfilled, onRejected) 的话，在onFulfilled中发生非常的话，onRejected 中是捕获不到这个非常的。而且如果链式很长，每一条链上都要这么写。
  
• 在promise.then(onFulfilled).catch(onRejected) 的情况下.then中产生非常能在.catch 中捕获。.then和.catch本质上是没有区别的， 必要分场合使用
  

  ② 只有一个主人

        我们上面已经说过了，在书写很长的Promise链式，从代码清晰度和浅易程度来讲，在末了添加 catch是远远在每一层链上写onRejected回调函数是要好的，因为catch可以捕获 Promise链中每一层节点的错误，这句话本身没有错，但从这句话延伸出一种错误的明白：catch 同时监控着所有节点。实际上catch函数在同一个时间点只属于某一个Promise，因为它的主人是随着程序 的执行而不停变化的，我们来举个例子：

2. let p1 = new Promise((resolve, reject) => {
3.   // 第一层执行逻辑
4.   resolve("first promise"); // Promise(1)
5. })
6.   .then((res) => {
7.     // 第二层执行逻辑
8.     return "second promise"; // Promise(2)
9.   })
10.   .then((res) => {
11.     // 第三层执行逻辑
12.     return "third promise"; // Promise(3)
13.   })
14.   .catch((err) => {
15.     console.log("err", err);
16.   });

复制代码

在上述例子中，如果整个程序每一步都正确执行，那么会次序产生三个Promise对象，分别是 Promise(1),Promise(2),Promise(3):

• 可是如果在第一层具体执行逻辑出错了后，那实际上后面的两个then 中的回调函数压根不会被异步执行，所以会直接异步触发catch中的回调函数执行， 所以这种情况下catch是Promise(1)对象的catch。
  
• 如果第一层具体执行逻辑正确执行，就会异步触发第二个then中的回调函数执行，那么同理 ，在第二次具体执行逻辑抛出错误，会导致Promise(2)的状态变化，所以这种情况下catch 是Promise(2)对象的catch。
  
• 同理Promise(3)也是云云
  

总结下来就是：整个Promise链中，catch只属于异步触发它当中回调函数 执行的那个Promise，并不属于所有 Promise


5. Promise.finally

    promise.finally方法的回调函数不接受任何参数，这意味着finally没有办法 知道，前面的Promise状态到底是fulfilled还是rejected 。这表明，finally方法里面的操纵，应该是与Promise状态无关的，不依赖于 Promise的执行结果。我们来看下面代码：

2. var p1 = new Promise((resolve, rejevt) => {
3.   setTimeout(() => {
4.     resolve;
5.   }, 1000);
6. });
8. p1.then((res) => console.log(res))
9.   .catch((err) => console.log(err))
10.   .finally(() => console.log("finally"));

复制代码

finally本质上是then方法的特例。我们来看下面伪代码：

2. promise.finally(() => {
3.   // 执行逻辑
4. });
5. // 上面代码等同于下面
6. promise.then(
7.   (onFulilled) => {
8.     // 语句
9.     return onFulilled;
10.   },
11.   (onRejected) => {
12.     // 语句
13.     throw onRejected;
14.   }
15. );

复制代码

上面代码中，如果不使用finally方法，同样的语句必要为成功和失败的状态各写一次。 有了finally方法，则只必要写一次。那么它是怎样实现的呢？

2. Promise.prototype.finally = function (callback) {
3.   let p = this.constructor;
4.   return this.then(
5.     (value) => p.resolve(callback()).then(() => value),
6.     (reason) =>
7.       p.reject(callback()).then(() => {
8.         throw reason;
9.       })
10.   );
11. };
13. var p = new Promise((resoleve, reject) => {
14.   setTimeout(() => {
15.     reject("Promise err");
16.   }, 1000);
17. });
18. p.catch((err) => console.log("err", err)).finally(() => {
19.   console.log("finally");
20. });

复制代码

上述代码中，不管前面的Promise是fulfilled还是rejected ，都会执行回调函数callback



6. Promise.all

    Promise.all接受一个promise对象的数组作为参数，当这个数组里的所有 Promise 对象 全部变为resolve大概reject状态的时候，它才会去调用.then方法。
    通报给Promise.all的 promise并不是一个个的次序执行的，而是同时开始、并行执行的，我们可以看下面例子

2. var promise1 = new Promise((resoleve, reject) => {
3.   setTimeout(() => {
4.     resoleve("promise1--3000");
5.   }, 3000);
6. });
7. var promise2 = new Promise((resoleve, reject) => {
8.   setTimeout(() => {
9.     resoleve("promise2--1000");
10.   }, 1000);
11. });
12. var promise3 = new Promise((resoleve, reject) => {
13.   setTimeout(() => {
14.     resoleve("promise3--5000");
15.   }, 5000);
16. });
18. var promiseArr = [promise1, promise2, promise3];
19. console.time("promiseArr");
20. Promise.all(promiseArr)
21.   .then((res) => {
22.     console.log("res", res); // ['promise1--3000', 'promise1--1000', 'promise1--5000']
23.     console.timeEnd("promiseArr"); // 5523.29296875 ms
24.   })
25.   .catch((err) => console.log(err));

复制代码

为什么这个例子可以看出来Promise.all()是并行的呢？因为所有Promise执行完只用了5秒，如果3个 Promise是按照次序执行的，那么应该是9秒大概，在5-9之间，因为4个Promise并不是同时执行的，同时执行的 话总时间就是那个花费时间最长的Promise
Promise.all()紧张细节点 （口试常考）：

• 如果所有的Promise中只有一个执行错误，那么整个Promise.all不会走Promise.all().then() 而是走Promise.all().catch()这个流程了。但是要注意的是固然走到了Promise.all().catch()这个流程 ，但是其他 Promise 还是会正常执行，但不会返回结果
  
• 要注意Promise.all()的返回值次序，Promise.all().then()的返回值次序和传入的次序是一致的，笔试时 遇得手写Promise.all()时要注意。
  

7. Promise.allSettled

  Promise.allSettled()的入参和Promise.all、Promise.race一样，接受一个promise 对象的数组作为参数,也是同时开始、并行执行的。但是Promise.allSettled的返回值必要注意以下几点：
Promise.allSettled不会走进catch，当所有输入Promise都被推行大概拒绝时， statusesPromise 会剖析一个具有具体完成状态的数组

• { status: 'fulfilled', value:value } ：如果相应的promise被推行
  
• { status: 'rejected', reason: reason }：如果相应的promise被拒绝
  

我们看下面示例:

2. var promise1 = new Promise((resoleve, reject) => {
3.   setTimeout(() => {
4.     reject(new Error("promise1--3000"));
5.     // resoleve("promise1--3000");
6.   }, 3000);
7. });
8. var promise2 = new Promise((resoleve, reject) => {
9.   setTimeout(() => {
10.     // reject(new Error("promise1--1000"))
11.     resoleve("promise2--1000");
12.   }, 1000);
13. });
14. var promise3 = new Promise((resoleve, reject) => {
15.   setTimeout(() => {
16.     resoleve("promise3--5000");
17.     // reject(new Error("promise1--5000"))
18.   }, 5000);
19. });
20. var promiseArr = [promise1, promise2, promise3];
21. console.time("promiseArr");
22. Promise.allSettled(promiseArr)
23.   .then((res) => {
24.     console.log("res", res);
25.     console.timeEnd("promiseArr");
26.   })
27.   .catch((err) => console.error(err))
28.   .finally(() => console.log("finally"));

复制代码

总结一下：Promise.allSettled()在你必要执行平行和独立的异步操纵并网络所有结果时非常有效， 即使某些异步操纵可能失败。


8. Promise.race

  Promise.rece()的使用方法和 Promise.all一样，接收一个promise 对象的数组为参数，Promise.race是要有一个promise对象进入Fulfilled大概 Rejected状态的话，就会继续进行后面的处理。这里依旧有两个点要注意：

• 和Promise.all一样是所有数组当中的Promise同时并行的
  
• Promise.race 在第一个Promise对象变为Fulfilled之后，并不会 取消其他promise对象的执行。
  
• Promise.race接受的是一个Promise对象数组，但是返回的确实最先完成Fulfilled 大概最先被Rejected的一个Promise的结果
  

下面我们来举个例子：

2. let arr = [1000, 3000, 5000, 7000];
3. let promiseArr = [];
5. for (let i = 0; i < arr.length; i++) {
6.   let newPromise = new Promise((resolve, reject) => {
7.     if (i === 0) {
8.       reject(new Error("第二个错误"));
9.     } else {
10.       setTimeout(() => {
11.         console.log(arr[i]);
12.         resolve(arr[i]);
13.       }, arr[i]);
14.     }
15.   });
16.   promiseArr.push(newPromise);
17. }
19. Promise.race(promiseArr)
20.   .then((res) => {
21.     console.log(res);
22.   })
23.   .catch((err) => {
24.     console.log(err);
25.   });
27. // 控制台报错
28. // 3000
29. // 5000
30. // 7000

复制代码

这里我们再复习一下Node当中变乱循环的知识：

• 第一层循环：i为0时，异步触发了Promise.race().catch()，这里面的回调代码被放在了微任务队列中， 后面的3个setTimeout宏任务的回调函数代码被放进了timer阶段中的队列当中(实在并不是如许，因为 三个定时器都有延迟，都是在后面的变乱循环中添加进来的)
  
• 第二层循环：清空微任务对列，所以控制台打印出了错误，然后清空宏任务，分别打印出3000/5000/7000
  

9. Promise.any


  Promise.any的入参和Promise.all、Promise.race、Promise.allSettled一样， 接收一个promise对象的数组作为参数。

• 只要此中有一个Promise成功执行，就会返回已经成功执行的Promise的结果
  
• 如果这个promise对象的数组中没有一个promise 可以成功执行（即所有的 promise都失败 ），就返回一个失败的promise 和AggregateError范例的实例，它是Error的一个子类，用于把单一的错误聚集 在一起
  

2. var promise1 = new Promise((resoleve, reject) => {
3.   setTimeout(() => {
4.     // reject(new Error("promise1--3000"));
5.     resoleve("promise1--3000");
6.   }, 3000);
7. });
8. var promise2 = new Promise((resoleve, reject) => {
9.   setTimeout(() => {
10.     // reject(new Error("promise2--1000"))
11.     resoleve("promise1--1000");
12.   }, 1000);
13. });
14. var promise3 = new Promise((resoleve, reject) => {
15.   setTimeout(() => {
16.     // resoleve("promise3--5000");
17.     reject(new Error("promise1--5000"))
18.   }, 5000);
19. });
20. var promiseArr = [promise1, promise2, promise3];
21. console.time("promiseArr");
22. Promise.any(promiseArr)
23.   .then((res) => {
24.     console.log("res", res); // res promise1--1000
25.     console.timeEnd("promiseArr");
26.   })
27.   .catch((err) => console.error(err));
28.   //所有的Promise都失败， AggregateError: All promises were rejected

复制代码

总计一下Promisea.any的应用场景：如果我们现在有多台服务器，则只管使用响应速度最快的服务器，在这种情况下， 可以使用Promise.any()方法从最快的服务器接收响应。

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