ES6 Promise 异步编程

Promise “承诺”

它是异步编程的一种解决方案。

Promise 对象的特点：

（1）对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。

（2）Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected`。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。

基本用法

Promise构造函数接受一个函数作为参数，该函数的两个参数分别是resolve 和 reject

const myPromise = new Promise((resolve,reject)=>{
  if(true){
    resolve(val);
  }else{
    reject(error);
  }
})

then方法分别指定resolved状态和rejected状态的回调函数。

myPromise.then((res)=>{
  console.log('success：',res)
},(error)=>{
  console.log('failure：',error)
})

Promise.prototype.then()

then方法是定义在原型对象Promise.prototype上，返回的是一个新的Promise实例。因此可以实现链式调用。

myPromise.then((res1)=>{
  resolve(res1)
}).then((res2)=>{
  resolve(res2)
})...

Promise.prototype.catch()

与then的原理相同，用于指定发生错误时的回调函数

myPromise.then((res)=>{
  console.log(res)
}).catch((err)=>{
  console.log('出现错误：' err)
})

Promise.prototype.finally()

finally()方法用于指定不管 Promise 对象最后状态如何，都会执行的操作

myPromise.then(res=>{
  ...
}).catch(err =>{
  ...
}).finally(()=>{
  let a = 1 + 2 ;
  ...
})

// finally() 等同于
myPromise.then(res=>{
  let a = 1 + 2 ;
  ...
}).catch(err=>{
  let a = 1 + 2 ;
})

Promise.all()

用于将多个 Promise 实例，包装成一个新的 Promise 实例。

const allPromise = Promise.all([p1, p2, p3]); // p1、p2、p3都是 Promise 实例

allPromise 的状态由 p1、p2、p3决定。

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

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

Promise.race()

将多个 Promise 实例，包装成一个新的 Promise 实例

const racePromise = Promise.race([p1, p2, p3])

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

Promise.allSettled()

接受一组 Promise 实例作为参数，包装成一个新的 Promise 实例。只有等到所有实例返回结果，才会结束。

const arr =[
  fetch('/api-get1'),
  fetch('/api-get2'),
  fetch('/api-get3'),
];
let allsettledPromise = Promise.allSettled(arr)

Promise.resolve()

有时需要将现有对象转为 Promise 对象

**（1）参数是一个 Promise 实例 **

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

（2）参数是一个thenable对象

将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。

let thenable = {
  then: function(resolve,reject){
    resolve('good');
  }
};

let resPromise = Promise.resolve(thenable);
resPromise.then(res=>{
  console.log(res); // good
})

（3）参数根本就不是对象

如果参数是一个原始值,Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved

const resPromise = Promise.resolve('job');
resPromise.then(res=>{
  console.log(res); // job
})

（4）不带有任何参数

直接返回一个resolved状态的 Promise 对象，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法。

const resPromise = Promise.resolve();
resPromise.then(()=>{
  ...
})

setTimeout(()=>{
  console.log(3);
},0);
Promise.resolve().then(()=>{
  console.log(2);
});
console.log(1);
// 1 2 3

setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行

Promise.reject()

返回一个新的 Promise 实例，该实例的状态为rejected

Promise.reject('404').catch(err=>{
  if(err == '404') console.log('错误页面');
  ...
})

参考文献

阮一峰老师的 ECMAScript 6 入门