关于javascript:Promise详解

前言：

日常开发中，异步操作简直每天都能见到。传统的意不解决方案是通过回调函数，随着程序逻辑越来越简单，回调函数的形式变得越来越繁琐，很容易呈现回调天堂，于是一种更正当更弱小的代替计划呈现--Promise，接下来就深刻学习Promise是如何解决异步操作的。

一.根底

定义： Promise 对象用于示意一个异步操作的最终实现 (或失败), 及其后果值.

const promise1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve('foo');  }, 300);});promise1.then((value) => {  console.log(value);  // expected output: "foo"});console.log(promise1);// expected output: [object Promise]

运行下面这段代码，先是打印 [object Promise] ，300ms后打印foo

语法

new Promise( function(resolve, reject) {...} /* executor */  )

参数 executor executor是带有 resolve 和 reject 两个参数的函数。Promise构造函数执行时立刻调用executor 函数， resolve 和 reject 两个函数作为参数传递给executor（executor 函数在Promise构造函数返回promise实例对象前被调用）。resolve 和 reject 函数被调用时，别离将promise的状态改为fulfilled（实现）或rejected（失败）。executor 外部通常会执行一些异步操作，一旦异步操作执行结束(可能胜利/失败)，要么调用resolve函数来将promise状态改成fulfilled，要么调用reject 函数将promise的状态改为rejected。如果在executor函数中抛出一个谬误，那么该promise 状态为rejected。executor函数的返回值被疏忽。

这段形容合成下就是：

实例化Promise对象时须要传入一个executor函数，所有业务代码都须要写在这个函数中；
executor函数在构造函数执行时就会调用，此时实例化对象还并没有被创立， resolve 和 reject 两个函数作为参数传递给executor，resolve 和 reject 函数被调用时，别离将promise的状态改为fulfilled（实现）或rejected（失败）。一旦状态扭转，就不会再变，任何时候都能够失去这个后果。
如果executor中代码抛出了谬误，promise 状态为rejected；
executor函数的返回值被疏忽。

状态一个 Promise有以下几种状态:

pending: 初始状态，既不是胜利，也不是失败状态。
fulfilled: 意味着操作胜利实现。
rejected: 意味着操作失败。

pending 状态的 Promise 对象可能会变为fulfilled 状态并传递一个值给相应的状态解决办法，也可能变为失败状态（rejected）并传递失败信息。当其中任一种状况呈现时，Promise 对象的 then 办法绑定的解决办法（handlers ）就会被调用（then办法蕴含两个参数：onfulfilled 和 onrejected，它们都是 Function 类型。当Promise状态为fulfilled时，调用 then 的 onfulfilled 办法，当Promise状态为rejected时，调用 then 的 onrejected 办法，所以在异步操作的实现和绑定解决办法之间不存在竞争）。

const promise1 = new Promise((resolve, reject) => {  setTimeout(() => {    resolve('fulfilled');  }, 1000);});const promise2 = new Promise((resolve, reject) => {  setTimeout(() => {    reject('rejected');  }, 3000);});promise1.then((fulfilled) => {  console.log(fulfilled);},(rejected)=>{    console.log(rejected);});promise2.then((fulfilled) => {  console.log(fulfilled);},(rejected)=>{    console.log(rejected);});

运行下面这段代码，1s后打印fulfilled，3s后打印rejected rejected状态的 Promise也能够通过.catch进行捕捉，因为 Promise.prototype.then 和 Promise.prototype.catch 办法返回promise 对象，所以它们能够被链式调用。所以上述代码能够改为：

promise1.then((fulfilled) => {  console.log(fulfilled);}).catch((rejected)=>{    console.log(rejected);});promise2.then((fulfilled) => {  console.log(fulfilled);}).catch((rejected)=>{    console.log(rejected);});

二.深刻了解

1.Promise 是用来治理异步编程的，它自身不是异步的，new Promise的时候会立刻把executor函数执行，只不过咱们个别会在executor函数中解决一个异步操作。例如上面一段代码：

let firstPromise = new Promise(()=>{    setTimeout(()=>{      console.log(1)    },1000)    console.log(2)  })console.log(3) // 2 3 1

2.Promise 采纳了回调函数提早绑定技术，在执行 resolve 函数的时候，回调函数还没有绑定，那么只能推延回调函数的执行。这具体是啥意思呢？咱们先来看上面的例子：

let p1 = new Promise((resolve,reject)=>{  console.log(1);  resolve('浪里行舟')  console.log(2)})// then:设置胜利或者失败后处理的办法p1.then(result=>{ //p1提早绑定回调函数  console.log('胜利 '+result)},reason=>{  console.log('失败 '+reason)})console.log(3)// 1// 2// 3// 胜利 浪里行舟

new Promise的时候先执行executor函数，打印出 1、2，Promise在执行resolve时，触发微工作，还是持续往下执行同步工作，执行p1.then时，存储起来两个函数（此时这两个函数还没有执行）,而后打印出3，此时同步工作执行实现，最初执行刚刚那个微工作，从而执行.then中胜利的办法。

3.错误处理，多个Promise链式操作的谬误捕捉能够通过一个catch解决；例如上面一段代码：

let executor = function(resolve,reject){    let random = Math.random()    if(random>0.5){        resolve()    }else{        reject()    }}let p1 = new Promise(executor)p1.then(resualt=>{    console.log(1)    return new Promise(executor)}).then(resualt=>{    console.log(2)    return new Promise(executor)}).then(resualt=>{    console.log(3)    return new Promise(executor)}).catch((error) => {  console.log('error', error)})

这段代码有四个 Promise 对象，无论哪个对象外面抛出异样，都能够通过最初一个.catch 来捕捉异样，通过这种形式能够将所有 Promise 对象的谬误合并到一个函数来解决，这样就解决了每个工作都须要独自解决异样的问题。

4.罕用办法

Promise.resolve() Promise.resolve(value)办法返回一个以给定值解析后的Promise 对象。 Promise.resolve()等价于上面的写法:

Promise.resolve('foo')// 等价于new Promise(resolve => resolve('foo'))

Promise.resolve办法的参数分成四种状况。

（1）参数是一个 Promise 实例

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))  .catch(error => console.log(error))// Error: fail

下面代码中，p1是一个 Promise，3 秒之后变为rejected。p2的状态在 1 秒之后扭转，resolve办法返回的是p1。因为p2返回的是另一个 Promise，导致p2本人的状态有效了，由p1的状态决定p2的状态。所以，前面的then语句都变成针对后者（p1）。又过了 2 秒，p1变为rejected，导致触发catch办法指定的回调函数。

（2）参数不是具备then办法的对象，或基本就不是对象

Promise.resolve("Success").then(function(value) { // Promise.resolve办法的参数，会同时传给回调函数。  console.log(value); // "Success"}, function(value) {  // 不会被调用});

（3）不带有任何参数 Promise.resolve()办法容许调用时不带参数，间接返回一个resolved状态的 Promise 对象。如果心愿失去一个 Promise 对象，比拟不便的办法就是间接调用Promise.resolve()办法。

Promise.resolve().then(function () {  console.log('two');});console.log('one');// one two

（4）参数是一个thenable对象 thenable对象指的是具备then办法的对象,Promise.resolve办法会将这个对象转为 Promise 对象，而后就立刻执行thenable对象的then办法。

let thenable = {  then: function(resolve, reject) {    resolve(42);  }};let p1 = Promise.resolve(thenable);p1.then(function(value) {  console.log(value);  // 42});

Promise.reject() Promise.reject()办法返回一个带有回绝起因的Promise对象。

new Promise((resolve,reject) => {    reject(new Error("出错了"));});// 等价于 Promise.reject(new Error("出错了"));  // 应用办法Promise.reject(new Error("BOOM!")).catch(error => {    console.error(error);});

值得注意的是，调用resolve或reject当前，Promise 的使命就实现了，后继操作应该放到then办法外面，而不应该间接写在resolve或reject的前面。所以，最好在它们后面加上return语句，这样就不会有意外。

new Promise((resolve, reject) => {  return reject(1);  // 前面的语句不会执行  console.log(2);})

Promise.all()

var p1 = Promise.resolve(1)var p2 = Promise.resolve({a:2})var p3 = new Promise(function(resolve,reject){    setTimeout(function(){        resolve(3)    },3000)})Promise.all([p1,p2,p3]).then(result=>{    // 返回的后果是依照Array中编写实例的程序来    console.log(result)})

Promise.all 生成并返回一个新的 Promise 对象，所以它能够应用 Promise 实例的所有办法。参数传递promise数组中所有的 Promise 对象都变为resolve的时候，该办法才会返回，新创建的 Promise 则会应用这些 promise 的值。 如果参数中的任何一个promise为reject的话，则整个Promise.all调用会立刻终止，并返回一个reject的新的 Promise 对象。

Promise.allSettled()

有时候，咱们不关怀异步操作的后果，只关怀这些操作有没有完结。这时，ES2020 引入Promise.allSettled()办法就很有用。如果没有这个办法，想要确保所有操作都完结，就很麻烦。Promise.all()办法无奈做到这一点。

如果有这样的场景：一个页面有三个区域，别离对应三个独立的接口数据，应用 Promise.all 来并发申请三个接口，如果其中任意一个接口出现异常，状态是reject,这会导致页面中该三个区域数据全都无奈进去，显然这种情况咱们是无奈承受，Promise.allSettled的呈现就能够解决这个痛点：

Promise.allSettled([  Promise.reject({ code: 500, msg: '服务异样' }),  Promise.resolve({ code: 200, list: [] }),  Promise.resolve({ code: 200, list: [] })]).then(res => {  console.log(res)  /*    0: {status: "rejected", reason: {…}}    1: {status: "fulfilled", value: {…}}    2: {status: "fulfilled", value: {…}}  */  // 过滤掉 rejected 状态，尽可能多的保障页面区域数据渲染  RenderContent(    res.filter(el => {      return el.status !== 'rejected'    })  )})

Promise.allSettled跟Promise.all相似, 其参数承受一个Promise的数组, 返回一个新的Promise, 惟一的不同在于, 它不会进行短路, 也就是说当Promise全副解决实现后,咱们能够拿到每个Promise的状态, 而不论是否解决胜利。

Promise.race()

Promise.all()办法的成果是"谁跑的慢，以谁为准执行回调"，那么绝对的就有另一个办法"谁跑的快，以谁为准执行回调"，这就是Promise.race()办法，这个词原本就是赛跑的意思。race的用法与all一样，接管一个promise对象数组为参数。

Promise.all在接管到的所有的对象promise都变为FulFilled或者Rejected状态之后才会持续进行前面的解决，与之绝对的是Promise.race只有有一个promise对象进入FulFilled或者Rejected状态的话，就会持续进行前面的解决。

// `delay`毫秒后执行resolvefunction timerPromisefy(delay) {    return new Promise(resolve => {        setTimeout(() => {            resolve(delay);        }, delay);    });}// 任何一个promise变为resolve或reject的话程序就进行运行Promise.race([    timerPromisefy(1),    timerPromisefy(32),    timerPromisefy(64)]).then(function (value) {    console.log(value);    // => 1});

下面的代码创立了3个promise对象，这些promise对象会别离在1ms、32ms 和 64ms后变为确定状态，即FulFilled，并且在第一个变为确定状态的1ms后，.then注册的回调函数就会被调用。

Promise.prototype.finally()

ES9 新增 finally() 办法返回一个Promise。在promise完结时，无论后果是fulfilled或者是rejected，都会执行指定的回调函数。这为在Promise是否胜利实现后都须要执行的代码提供了一种形式。这防止了同样的语句须要在then()和catch()中各写一次的状况。 比方咱们发送申请之前会呈现一个loading，当咱们申请发送实现之后，不论申请有没有出错，咱们都心愿关掉这个loading。

this.loading = truerequest()  .then((res) => {    // do something  })  .catch(() => {    // log err  })  .finally(() => {    this.loading = false  })

finally办法的回调函数不承受任何参数，这表明，finally办法外面的操作，应该是与状态无关的，不依赖于 Promise 的执行后果。

三.理论利用

假如有这样一个需要：红灯 3s 亮一次，绿灯 1s 亮一次，黄灯 2s 亮一次；如何让三个灯一直交替反复亮灯？三个亮灯函数曾经存在：

function red() {    console.log('red');}function green() {    console.log('green');}function yellow() {    console.log('yellow');}

这道题简单的中央在于须要“交替反复”亮灯，而不是亮完一遍就完结，咱们能够通过递归来实现：

// 用 promise 实现let task = (timer, light) => {  return new Promise((resolve, reject) => {    setTimeout(() => {      if (light === 'red') {        red()      }      if (light === 'green') {        green()      }      if (light === 'yellow') {        yellow()      }      resolve()    }, timer);  })}let step = () => {  task(3000, 'red')    .then(() => task(1000, 'green'))    .then(() => task(2000, 'yellow'))    .then(step)}step()

同样也能够通过async/await 的实现：

//  async/await 实现let step = async () => {  await task(3000, 'red')  await task(1000, 'green')  await task(2000, 'yellow')  step()}step()

参考资料你真的懂Promise吗