Promise、await、async

Promise概念

Promise是异步编程的一种解决方案，将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数。

状态

1. 三种状态：pending（等待）、fulfilled（已完成）、rejected（已拒绝）；
2. 只能有两种状态改变：pending=>fulfilled、pending=>rejected；
3. 根据异步操作结果，决定状态的改变，一旦状态改变，不受外界任何影响，'承诺(Promise)'不会再变。

特点

1. Promise一旦新建就会立即执行

let promise = new Promise(function(resolve, reject) {
  console.log('Promise');
  resolve();
});

promise.then(function() {
  console.log('resolved.');
});

console.log('Hi!');

// Promise
// Hi!
// resolved

2. Promise.resolve()、Promise.reject()

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

const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))

3. Promise.prototype.then(success, fail)
   then方法的第一个参数是resolved状态的回调函数，第二个参数（可选）是rejected状态的回调函数。then方法会返回一个新的Promise实例，也因此可以采用链式写法在then()后面再调用另一个then()。

new Promise((resolve, reject)=>{
  if('成功')resolve('成功')
  if('失败')reject('失败')
}).then(
  result => console.log("resolved: ", result),
  err => console.log("rejected: ", err)
);

4. Promise.prototype.catch()
   用于指定出错时的回调函数，返回一个新的Promise实例。

Promise.prototype.catch()
//等同于
Promise.prototype.then(null/undefines, rejection)

5. Promise.all
   将多个Promise实例包装成一个新的Promise实例。

const p = Promise.all([p1, p2, p3]).then(success, fail)

其中p1、p2、p3都是Promise实例;
p1、p2、p3状态都是fulfilled时，才会执行then里面的回调函数success，p1、p2、p3的返回值组成一个数组做为success的参数；
p1、p2、p3状态只要有一个是reject，就会执行then里面的回调函数fail，第一个被reject的返回值作为fail的参数。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result)
.catch(e => e);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result)
.catch(e => e);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// ["hello", Error: 报错了]

以上代码，p1会是resolved，p2里面抛出错误进入rejected状态，执行catch里面的回调，catch方法返回一个新的Promise实例给p2，catch执行完后变成resolved，p2会是resolved状态。p1、p2返回值组成一个数组["hello", Error: 报错了]做为参数result的值。

const p1 = new Promise((resolve, reject) => {
  resolve('hello');
})
.then(result => result);

const p2 = new Promise((resolve, reject) => {
  throw new Error('报错了');
})
.then(result => result);

Promise.all([p1, p2])
.then(result => console.log(result))
.catch(e => console.log(e));
// Error: 报错了

以上代码，p2没有了出错时执行的回调函数，p2会rejected，从而调用Promise.all()后面的catch方法。

6. Promise.race()

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

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

Promise缺点

1. 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
2. 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
3. 当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

aync await

MDN这样解释：

async function 用来定义一个返回 AsyncFunction 对象的异步函数。异步函数是指通过事件循环异步执行的函数，它会通过一个隐式的 Promise 返回其结果。如果你在代码中使用了异步函数，就会发现它的语法和结构会更像是标准的同步函数。

await 操作符用于等待一个Promise 对象。它只能在异步函数 async function 中使用。

• async的目的是为了标记这个function，返回的Promise对象会运行执行(resolve)异步函数的返回结果，或者运行拒绝(reject)——如果异步函数抛出异常的话；
• await的写法就是为了让代码看起来更像是同步代码，返回 Promise 对象的处理结果；
  基本用法：

function resolveAfter2Seconds(x) {
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(x);
    }, 2000);
  });
}
async function test(x){
    await resolveAfter2Seconds(x)
    console.log('成功', x)
    // 等价于 Promise.resolve(resolveAfter2Seconds(1)).then(()=>{console.log('成功')})
}
test(1)//成功 1

捕获异常用到try...catch：

async function test(){
    try{
        let n = await resolveAfter2Seconds()
        console.log('成功'+n) 
    }catch(error){
        console.log(error)
    }
}
test()

当await遇到多个Promise还是需要配合Promise.all/race()：

function p1(x) {
  return new Promise((resolve, reject) => {
      if(x>10){
        resolve(x)
      }else{
        reject('error')
      }
  })
}
function p2(x) {
  return new Promise((resolve, reject) =>  {
       if(x<10){
        resolve(x)
      }else{
        reject('error')
      }
  })
}
async function test(a, b){
    try{
        let n = await Promise.all([p1(a), p2(b)])
        console.log('p1大于10同时p2小于10', n);    
    }catch(error){
        console.log(error);  
    }
}
test(18, 3)//p1大于10同时p2小于10 [18, 3]
test(3, 18)//error

手写Promise

手写了一个简易版Promise来加深对Promise的理解

function _Promise(doSomething){
    let _this = this
    _this.status = 'pending'
    _this.success = undefined
    _this.error = undefined
    function resolve(success){
        if(_this.status === 'pending'){
            _this.status = 'resolved'
            _this.success = success
        }
    }
    function reject(error){
        if(_this.status === 'pending'){
            _this.status = 'rejected'
            _this.error = error
        }
    }
    doSomething(resolve, reject)
}
_Promise.prototype._then = function(resolved, rejected){
    let _this = this
    if(_this.status==='resolved'){
        resolved(_this.success)
    }
    if(_this.status==='rejected'){
        rejected(_this.error)
    }
}

new _Promise((resolve, reject)=>{
    console.log('yes ok')
    resolve('成功')
})._then((success)=>{
    console.log(success)
},(error)=>{
    console.log(error)
})
//yes ok 
//成功