摘要

Promise 对象表示一个异步操作的最终完成（或失败）及其结果值。状态：一个 promise 必然处于以下几种状态之一

Promise

Promise 介绍

Promise 对象表示一个异步操作的最终完成（或失败）及其结果值。

状态：

一个 promise 必然处于以下几种状态之一

• 待定：初始状态(pending)
• 已兑现：操作成功完成(fulfilled)
• 已拒绝：操作失败(reject)

创建 Promise

Promise 对象是由关键字 new 及其构造函数来创建的。该构造函数会把一个叫做“处理器函数”（executor function）的函数作为它的参数。这个“处理器函数”接受两个函数——resolve 和 reject ——作为其参数。当异步任务顺利完成且返回结果值时，会调用 resolve 函数；而当异步任务失败且返回失败原因（通常是一个错误对象）时，会调用 reject 函数。

new Promise((resolve, reject) => {   //处理操作  返回resolve或者reject   if (flag) resolve(data);   eles(reject(data)); }); 

需要某个自定义的函数，变成 Promise 只需返回一个 Promise 即可

function myFun(flag) {   return new Promise((resolve, reject) => {     //处理操作  返回resolve或者reject     if (flag) resolve(data);     eles(reject(errorData));   }); } 

在具体项目中，使用 Promise 封装获取当前配置方法。

/**  * 获取字典列表  * axios : axios  * lang : 当前传入语言 ，根据不同语言，获取配置不同  *  * 判断sessionStorage里是否获取到当前所需要字典配置。  * 如果有返回该配置，获取不到再从接口中获取数据，并保存到sessionStorage。  */ function getDictionary(axios, lang) {   // 查看sessionStorage   const dic = sessionStorage.getItem("dictionary_data_" + lang) || null;   // 返回一个Promise对象   return new Promise((resolve, reject) => {     if (dic) resolve(JSON.parse(dic));     else {       axios         .get(`/api/dictionary?language=${lang}`)         .then((res) => {           const dic_data = {};           if (res.data.code === 0 && res.data.result) {             res.data.result.forEach((r) => (dic_data[r.itemName] = r));             //存放sessionStorage             sessionStorage.setItem(               "dictionary_data_" + lang,               JSON.stringify(dic_data)             );             // 返回数据             resolve(dic_data);           } else reject();         })         .catch((error) => reject());     }   }); } 

静态方法

Primise.all(iterable)

传参需要是一个可迭代对象
Promise.all 返回一个 Promise 对象。
该 Promise 对象会在 Promise.all 的 iterable 参数对象里的所有 Promise 对象都成功才会触发。

简单来说就是只有 Promise.all 参数里的所有 Promise 成功才会触发，有一个失败就不会触发。

例如：

var promise1 = Promise.resolve("heihei"); var promise2 = "wenbo"; var promise3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1, 2, 3]);   }, 2000); });  Promise.all([promise1, promise2, promise3]).then((res) => {   console.log(res); }); 

上面代码 会在大约两秒之后 打印输出 [ 'heihei', 'wenbo', [ 1, 2, 3 ] ]
因为 Promise.all 需要等待 promise3 中的 setTimeout 完成后才会触发返回 Promise 对象

又例如：

var promise1 = Promise.reject("heihei"); var promise2 = "wenbo"; var promise3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1, 2, 3]);   }, 2000); });  Promise.all([promise1, promise2, promise3])   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e);   }); 

上面代码，并不会在等待 2 秒左右输出[ 'heihei', 'wenbo', [ 1, 2, 3 ] ]，而会直接输出heihei因为在 promise1 中返回的是一个 reject，Promise.all认为promise1失败(rejected)。Promise.all会异步的将失败的结果返回，而不管其它 promise 是否完成。

在某些特定的场合，需要 Promise.all 返回的数据，才让继续执行代码。因为Promise.all是异步的，我们可以借助 async 与 await 实现。

var promise1 = Promise.resolve("heihei"); var promise2 = "wenbo"; var promise3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1, 2, 3]);   }, 2000); });  function demo() {   Promise.all([promise1, promise2, promise3]).then((res) => {     console.log(res);   });   console.log("heihei"); } demo(); 

以上代码会在执行之后 先打印"heihei"，之后 2 秒左右才会打印输出[ 'heihei', 'wenbo', [ 1, 2, 3 ] ]

var promise1 = Promise.resolve("heihei"); var promise2 = "wenbo"; var promise3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1, 2, 3]);   }, 2000); });  async function demo() {   await Promise.all([promise1, promise2, promise3]).then((res) => {     console.log(res);   });   console.log("heihei"); } demo(); 

上方在使用了 async 和 await之后 会等在 Promise.all 执行完成之后才会打印输出heihei。在实际项目中可以在下面使用Promise.all返回的数据进行操作。

Promise.allSettled(iterable)

传参需要是一个可迭代对象
Promise.allSettled 返回一个 Promise 对象。
该 Promise 对象会在 Promise.allSettled 的 iterable 参数对象里的所有 Promise 对象都成功或者失败才会触发。

简单说就是等所有的 Promise 执行完成才会触发，无论成功还是失败。

var promise1 = Promise.reject("heihei"); var promise2 = "wenbo"; var promise3 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1, 2, 3]);   }, 2000); });  Promise.allSettled([promise1, promise2, promise3])   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e);   }); 

输出为：

[   { status: "rejected", reason: "heihei" },   { status: "fulfilled", value: "wenbo" },   { status: "fulfilled", value: [1, 2, 3] }, ]; 

可以看到Promise.allSettled的返回值为一个数组，数组里包括每个 Promise 的状态status,返回值value,和 rejected 的值reason

和Promise.all() 相比，Promise.all() 更适合彼此相互依赖或者在其中任何一个 reject 时立即结束。

Promise.any(iterable)

传参需要是一个可迭代对象
Promise.any 返回一个 Promise 对象。
接收一个 Promise 对象的集合，当其中的一个 promise 成功，就返回那个成功的 promise 的值。

var promise1 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([4000]);   }, 4000); }); var promise2 = new Promise((resolve, reject) => {   setTimeout(() => {     resolve([1000]);   }, 1000); });  Promise.any([promise1, promise2])   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e);   }); 

简单来说, Promise.any 像是竞速模式，那个 Promise 先成功，就返回哪一个 Promise

Promise.any 和 Promise.all 是相反的，一个是全部成功才触发，一个只要有一个成功就触发。

var promise1 = Promise.reject("error"); var promise2 = Promise.reject("error2"); Promise.any([promise1, promise2])   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e);   });  //输出  //AggregateError: All promises were rejected 

如上代码，当所有 Promise 都没有成功时，将返回一个 Error 的 Promise

Promise.race(iterable)

传参需要是一个可迭代对象
Promise.any 返回一个 Promise 对象。
接收一个 Promise 对象的集合，当其中的一个 promise 成功或者失败时，就返回那个成功或者失败的 promise 的值。

和 Promise.any 对比，Promise.any 为当有一个成功时，返回成功的 promise，Promise.race 则是不论成功失败都返回

var promise1 = Promise.resolve("resolve"); var promise2 = Promise.reject("error"); Promise.race([promise1, promise2])   .then((res) => {     console.log(res); //resolve   })   .catch((e) => {     console.log(e);   }); // 输出为resolve var promise1 = Promise.reject("error"); var promise2 = Promise.resolve("resolve");  Promise.race([promise1, promise2])   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e); //error   });  //输出为 error 

Promise.reject(reason)

返回一个状态为失败的 Promise 对象，并将给定的失败信息传递给对应的处理方法
Promise.reject()方法返回一个带有拒绝原因的 Promise 对象。

Promise.reject("test-reject")   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e); //test-reject   }); 

Promise.resolve(value)

返回一个状态由给定 value 决定的 Promise 对象

如果这个是一个 Promise 对象，则返回这 Promise 对象。
如果这个值是 thenable（即带有"then" 方法），返回的 promise 会“跟随”这个 thenable 的对象，采用它的最终状态

Promise.resolve("test-resolve")   .then((res) => {     console.log(res); //test-resolve   })   .catch((e) => {     console.log(e);   }); 

当 Resolve 是一个 Promise 对象，则返回这个 Promise 对象。

var promise = Promise.resolve({   name: "resolve", });  Promise.resolve(promise)   .then((res) => {     console.log(res); //{name:resolve}   })   .catch((e) => {     console.log(e);   }); //reject情况 var promise = Promise.reject({   name: "reject", });  Promise.resolve(promise)   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e); //{name:reject}   }); 

当 Resolve 是一个 thenable 对象时

var p1 = Promise.resolve({   then: function (resolve, reject) {     resolve("hello ~!");   }, }); p1.then((res) => {   console.log(res); //hello ~! }); 

注意：要在解析为自身的 thenable 上调用 Promise.resolve。这将导致无限递归。

Promise 原型方法

Promise.prototype.catch(onRejected)

catch() 方法返回一个 Promise ，并且处理拒绝的情况
实际上 catch 的行为与调用 Promise.prototype.then(undefined, onRejected) 相同
obj.catch(onRejected) 内部 calls obj.then(undefined, onRejected)

var promise = new Promise((resolve, reject) => {   throw "出现了错误~"; }); promise.then(   (res) => {     console.log(res);   },   (e) => {     console.log(e); //出现了错误~   } );  promise   .then((res) => {     console.log(res);   })   .catch((e) => {     console.log(e); //出现了错误~   }); 

以上两种方法 都可以实现异常的捕获

Promise.prototype.then(onFulfilled, onRejected)

then() 方法返回一个 Promise。它最多需要有两个参数：Promise 的成功和失败情况的回调函数。

当只穿一个值得时候默认是 Promise 成功的回调函数

//默认一个参数 var promise = new Promise((resolve, reject) => {   resolve("成功~");   //or   // reject('失败~') });  promise.then(   (res) => {     console.log(res); //成功~   },   (error) => {     console.log(error); // 失败~   } ); 

Promise.prototype.finally(onFinally)

finally() 方法返回一个 Promise。在 promise 结束时，无论结果是 fulfilled 或者是 rejected，都会执行指定的回调函数。这为在 Promise 是否成功完成后都需要执行的代码提供了一种方式。
这避免了同样的语句需要在 then()和 catch()中各写一次的情况。

var promise = new Promise((resolve, reject) => {   resolve("成功~");   //or   // reject('失败~') });  promise   .then(     (res) => {       console.log(res); //成功~     },     (error) => {       console.log(error); // 失败~     }   )   .finally((res) => {     console.log("finally~");   }); 

如以上代码所示，无论 Promise 返回 resolve 还是 reject，都会执行 finally 里的内容。

链式使用

由于 promise.then()，promise.catch() 和 promise.finally()可以对已完成(成功或者失败)的 Promise 进行操作，还会返回一个新的 Promise 对象，在新的 Promise 对象上我们还可以使用这些方法进行操作，形成一个链式操作。

var promise = new Promise((resolve, reject) => {   resolve("成功~"); });  promise   .then((res) => {     console.log(res); //成功     return new Promise((resolve, reject) => {       resolve("成功01~");     });   })   .then((res) => {     console.log(res); //成功01~     return new Promise((resolve, reject) => {       resolve("成功02~");     });   })   .then((res) => {     console.log(res); //成功02~     throw "error~";   })   .catch((e) => {     console.log(e); //error~   });