promise

Promise基础

1. 什么是Promise

Promise是异步编程的一种解决方案。es6内置的一个构造函数，用来生成Promise的实例。Promise可以解决回调地狱的问题。

2. promise的三种状态

pending: 进行中
fulfilled: 成功
rejected: 失败

3. promise的特点

1. 对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态
2. 一旦状态改变，就不会再变，任何时候都可以得到这个结果。状态只能改变一次，从pending到fulfilled或者从pending到rejected，只要处于 fulfilled 和 rejected ，状态就不会再变了,即 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果（TODO: 如何对已执行完的promise获取状态！！！）。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

4. 缺点

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

使用

传参

Promise构造函数接受一个立即执行的函数作为参数，该函数的两个参数分别是resolve和reject。它们是两个函数，由 JavaScript 引擎提供，不用自己部署。

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去；reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

 const promise = new Promise((resolve,reject) => {
    console.log('立即执行')
    resolve('resolve')
    reject('reject') // 状态只能改变一次
  })

Promise实例生成以后，可以用then方法分别指定resolved状态和rejected状态的回调函数。

promise.then(function(value) {
  // success
}, function(error) {
  // failure
});

Promise实例的3个方法

1.then: then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用，第二个回调函数是Promise对象的状态变为rejected时调用。这两个函数都是可选的，不一定要提供。它们都接受Promise对象传出的值作为参数。(then方法接收两个函数作为参数，第一个参数是 Promise 执行成功时的回调，第二个参数是 Promise 执行失败时的回调，两个函数只会有一个被调用。两个函数都有参数，是从上个方法传入。),then方法返回的是一个新的Promise实例（注意，不是原来那个Promise实例）。因此可以采用链式写法，即then方法后面再调用另一个then方法。
2.catch: 失败的函数，一个方法参数，有参
3.finally: 最后执行的，成功失败都会执行，一个方法参数，无参。

 const p1 = new Promise((resolve, reject) => {
    // resolve()会进入then中第一个方法,reject()会进入then中的第二个方法或者后面的catch（执行跳转至最近的 rejection 处理程序）
    resolve('进入then中第一个方法')
    // reject("进入then中第二个方法或者catch")
  })
  p1.then((res) => {
  // resolve()成功时执行
    console.log(res);
  }, (err) => {
  // reject()失败时执行
    console.log(err);
  })
  .catch((err) => {
  // reject()方法会先进入后面第一个then中的第二个失败方法参数中,如果then中没有第二个参数,则进入catch
    console.log(err);
  })
  .finally(() => {
  // 不管是resolve还是reject,finally()中都会执行
    console.log('finally');
  })

then、catch、finally的返回值

1. then

then方法将返回一个 resolved 或 rejected 状态的 Promise 对象用于链式调用，且 Promise 对象的值就是这个返回值。

// then中第一个函数正常return或者return resolve状态，会进入后面一个then中
 const p1 = new Promise((resolve, reject) => {
    resolve('成功')
  })
  p1.then((res) => {
  // 第一个then中成功，使用return正常返回，会进入后面一个then中
    return '第一个then中成功' // 第一个then中成功,进入后面then中
    return Promise.resolve('resolve'); // resolve,进入后面then中  // TODO: 别忘了还可以这样写呢！！！then方法返回的是一个新的promise实例，不是原来那个Promise实例
  })
  .then(res => {
    console.log(res + ',进入后面then中');
  })
  

// then中第一个函数throw error，会首先进入后面的then中第二个方法，如果没有继续进入后面的catch
 const p1 = new Promise((resolve, reject) => {
    resolve('成功')
  })
  p1.then((res) => {
    // 第一个then中失败，使用throw抛出异常，如果后面的then中有处理失败的方法，会首先进入后面的then中第二个方法，如果没有继续进入后面的catch
    throw new Error('第一个then中失败')
    return Promise.reject('reject') // 同理throw error   // TODO: 别忘了还可以这样写呢！！！
  })
  .then(res => {
    console.log(res + ',进入后面then中');
  }, err => {
    console.log(err + ', 首先进入then中第二个失败方法');
  })
  .catch((err) => {
    console.log(err + ',then中没有处理失败的方法,进入后面的catch');
  })
  
  // 得到结果: 第一个then中失败,首先进入then中第二个失败方法
  // 如果then中没有第二个方法得到结果：第一个then中失败,then中没有处理失败的方法,进入后面的catch

注意：then、catch中可以直接return promise

// Promise.resolve()可以进入后面的then，Promise.reject()可以进入后面的catch，可以避免使用error
const p1 = new Promise((resolve, reject) => {
    resolve('成功')
    // reject('失败')
  })
  p1.then((res) => {
    // return Promise.resolve(res) // 成功，后面的then
    return Promise.reject(res) // 成功，后面的catch
  })
  .catch(err => {
  //  return Promise.resolve(err) // 失败，后面的then
   return Promise.reject(err) // 失败，后面的catch
  })
  .then(res => {
    console.log(res,'，后面的then');
  })
  .catch(err => {
    console.log(err, '，后面的catch');
  })

// then中第一个函数什么都没有处理，没有return，也没有throw error，相当于return undefined，会进入后面的then中的成功方法，后面的then接收的参数时undefined，
const p1 = new Promise((resolve, reject) => {
    resolve('成功')
  })
  p1.then((res) => {
  // 进入then中的第一个函数,但是什么都不处理
  })
  .then(res => {
    console.log(res); // undefined
  })

// then中第二个函数return成功，进入后面的then中成功的方法
const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  }, (err) => {
  // return 成功，进入后面then的第一个方法   // TODO: 就算是上一个then中的第二个函数（即失败的处理程序）return 成功，也会进入下一个成功的处理程序
    return '第一个then中的err'
  })
  .then(res => {
    console.log(res,',第二个then成功');
  }, err => {
    console.log(err,'第二个then的err');
  })
  .catch((err) => {
    console.log(err);
  })
  
  // 得到结果：'第一个then中的err,第二个then成功'

// then中第二个函数抛出异常,进入后面的then中的第二个失败方法或者后面的catch
const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  }, (err) => {
    // then中第二个方法抛出异常
    throw new Error('第一个then中的err')
  })
  .then(res => {
    console.log(res,',第二个then成功');
  }, err => {
    console.log(err,',第二个then的err');
  })
  .catch((err) => {
    console.log(err,',或者进入后面的catch方法');
  })
  
  // 得到结果：第一个then中的err,第二个then的err

// then中第二个函数什么都不处理,相当于return undefined 会进入后面的then中的成功方法
const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  }, (err) => {
    // 进入then中的第二个函数,但是什么都不处理
  })
  .then(res => {
  console.log(res + ',第二个then中的成功方法')
  }, err => {
    console.log(err); 
  })
  .catch((err) => {
    console.log(err); 
  })
  
  // 得到结果：undefined,第二个then中的成功方法
  

// 调用resolve或reject并不会终结 Promise 的参数函数的执行
new Promise((resolve, reject) => {
  resolve(1);
  console.log(2);
}).then(r => {
  console.log(r);
});
// 2
// 1
// 上面代码中，调用resolve(1)以后，后面的console.log(2)还是会执行，并且会首先打印出来。这是因为立即 resolved 的 Promise 是在本轮事件循环的末尾执行，总是晚于本轮循环的同步任务。

// 一般来说，调用resolve或reject以后，Promise 的使命就完成了，后继操作应该放到then方法里面，而不应该直接写在resolve或reject的后面。所以，最好在它们前面加上return语句，这样就不会有意外。
new Promise((resolve, reject) => {
  return resolve(1);
  // 后面的语句不会执行
  console.log(2);
})

总结：不管是then中成功还是失败的方法，只要是return成功就会进入后面的then中第一个方法，只要是throw error就会进入后面then的第二个方法或者后面的catch，如果什么都不处理，就相当于return undefined，会进入后面then中的成功方法，只是参数是undefined

2. catch

catch和then相同，会返回一个新的promise实例，回调函数如果正常return，promise状态就变为成功，值就是return的值；回调函数如果throw Error(),promise状态就变为失败，值就是throw的值

// catch中return成功，进入后面的then的成功函数
 const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  })
  .catch(err => {
    return '第一个catch return成功'
  })
  .then(res => {
    console.log(res,',进入第二个then成功');
  }, err => {
    console.log(err,'第二个then的err');
  })
  .catch((err) => {
    console.log(err, '或者进入后面的catch方法');
  })
  // 得到结果: 第一个catch return成功,进入第二个then成功

// catch中thorw error会进入后面的then中失败方法，如果没有的话，会进入后面的catch
const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  })
  .catch(err => {
    throw new Error('第一个catch失败')
  })
  .then(res => {
    console.log(res,',进入第二个then成功');
  }, err => {
    console.log(err,',进入第二个then的err');
  })
  .catch((err) => {
    console.log(err, '或者进入后面的catch方法');
  })
  
  // 得到结果： 第一个catch失败,进入第二个then的err

// catch中什么都不处理，相当于return undefined，会进入后面的then中，只是参数是undefined
const p1 = new Promise((resolve, reject) => {
    reject('失败')
  })
  p1.then((res) => {
  })
  .catch(err => {
    // catch中什么都不处理
  })
  .then(res => {
    console.log(res,',第二个then成功');
  }, err => {
    console.log(err,'第二个then的err');
  })
  .catch((err) => {
    console.log(err, '或者进入后面的catch方法');
  })
  // 得到结果: undefined,第二个then成功

总结：catch中return成功就会进入后面then的成功函数，throw error就会进入后面then的失败方法或者后面的catch，如果什么都不处理就相当于return undefined，会进入后面then的成功方法，只是接收参数是undefined

then和catch都会返回一个promise的实例(then的第二个失败函数同then后面的catch),then的成功方法和失败方法、catch三者都是只要是return成功，就会进入后面的then的第一个成功方法；只要throw error就会进入后面then的失败方法，如果没有的话就进入后面的catch；如果什么都不处理就相当于return undefined，进入后面then的成功方法，只是接收到的参数是undefined

3. finally

TODO: 这里有个问题！！！！！finally中return为什么还是会执行后面的catch

// finally返回的是promise实例，后面可以继续写then、catch，会先执行finally，然后再执行后面的then、catch，但是finally中return的值不会进入后面的then和catch
const p1 = new Promise((resolve, reject) => {
    // resolve('成功')
    reject('失败')
  })
  p1.then((res) => {
    return res
  })
  .catch(err => {
    throw error(err)
  })
  .finally(() => {
    console.log('finally');
    return 111; // 不会在后面执行？？？
    throw new Error('1111') // 会执行后面的catch？？？
  })
  .then(res => {
    console.log(res, 'finally后面的then'); // 成功, finally后面的then
  })
  .catch(err => {
    console.log(err, 'finally后面的catch'); // 抛异常，finally后面的catch
  })

promise方法

Promise.resolve()

有时需要将现有对象（不是Promise实例的类型）转为 Promise 对象，Promise.resolve()方法就起到这个作用。Promise.resolve()方法会返回一个新的 Promise 实例，该实例的状态为rfulfilled。

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

Promise.resolve()方法的参数分成四种情况：

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

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

const p = Promise.resolve(promise)
console.log(p);

console.log(promise === p); // true

2. 参数是一个thenable对象： thenable对象指的是具有then方法的对象，Promise.resolve()方法会将这个对象转为 Promise 对象，然后就立即执行thenable对象的then()方法。thenable对象的then()方法执行后，再根据状态判断是fulfilled还是rejected。

// TODO: 这里有个问题，then不是关键字和保留字，是Promise.resolve()方法中处理的then吗
const thenable = {
  then: (resolve, reject) => {
    // resolve('promise成功')
    reject('promise失败')
  }
}
const p = Promise.resolve(thenable);
p.then(res => {
  console.log(res); // promise成功
})
.catch (err => {
  console.log(err); // promise失败
})

3. 参数不是具有then()方法的对象，或根本就不是对象：如果参数是一个原始值，或者是一个不具有then()方法的对象，则Promise.resolve()方法返回一个新的 Promise 对象，状态为resolved。

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

// 上面代码生成一个新的 Promise 对象的实例p。由于字符串Hello不属于异步操作（判断方法是字符串对象不具有 then 方法），返回 Promise 实例的状态从一生成就是resolved，所以回调函数会立即执行。Promise.resolve()方法的参数，会同时传给回调函数。

4. 不带有任何参数：Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。所以，如果希望得到一个Promise对象，比较方便的方法就是直接调用Promise.resolve()方法。

const p = Promise.resolve()
p.then(res => {
  console.log(res); // undefined
})

TODO: 这个没理解
// 需要注意的是，立即resolve()的 Promise 对象，是在本轮“事件循环”（event loop）的结束时执行，而不是在下一轮“事件循环”的开始时。

setTimeout(function () {
  console.log('three');
}, 0);

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

console.log('one');

// one
// two
// three


// 上面代码中，setTimeout(fn, 0)在下一轮“事件循环”开始时执行，Promise.resolve()在本轮“事件循环”结束时执行，console.log('one')则是立即执行，因此最先输出。

Promise.reject()

Promise.reject(reason)方法也会返回一个新的 Promise 实例，该实例的状态为rejected。

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

p.then(null, (err) => {
  console.log(err) // undefined
});

Promise.all()

Promise.all()方法用于将多个 Promise 实例，包装成一个新的 Promise 实例。

1. Promise.all()方法接受一个数组作为参数，数组的每一项都是Promise实例，数组中如果有不是promise实例的，会先调用Promise.resolve()方法将现有对象转为Promise对象。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口（Array，Map，Set ），且返回的每个成员都是 Promise 实例。
2. then的第一个参数：所有promise都成功的调用，返回结果是一个数组，数组的每一项为函数promise 的返回结果。then的第二个参数：返回结果有一个失败则执行失败的回调，拿到的是第一个失败的值。
3. catch和then的第二个参数相同（建议使用catch）

// p的状态由p1、p2、p3、p4决定，分成两种情况
// 1. 只有p1、p2、p3、p4的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3、p4的返回值组成一个数组，传递给p的回调函数。
// 2. 只要p1、p2、p3、p4之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

const p1 = new Promise((resolve, reject) => {
  reject('p1');
})
p1.then(res => {
  console.log(res, 'res');
})
.catch(err => {
  console.log(err, 'err');
})
const p2 = new Promise((resolve, reject) => {
  // resolve('p2');
  reject('p2');
})
p2.then(res => {
  console.log(res, 'res');
})
.catch(err => {
  console.log(err, 'err');
})
const p3 = false
const p4 = 123

const p = Promise.all([p1, p2, p3, p4])
p.then((res) => {
  console.log(res, 'all_res'); // ['p1', 'p2', false, 123]
}).catch(err => {
  console.log(err,'all_err'); // 'p2'
})

// 用于log两种情况
function fn() {
  return new Promise((resolve, reject) => {
    let randomNum = parseInt(Math.random() * 6 + 1);
    console.log(randomNum);
    if (randomNum > 3) {
      resolve('买');
    }
    else {
      reject('不买');
    }
  })
}

const promise = Promise.all([fn(), fn()])
promise.then((res) => {
  console.log(res, 'success')
},
  (err) => {
    console.log(err, 'error');
  })
  .catch (err => {
    console.log(err, 'error');
  })

注意：如果作为参数的Promise实例，自己定义了catch方法，那么它一旦被rejected，并不会触发Promise.all()的catch方法。

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

const p2 = new Promise((resolve, reject) => {
  // reject('报错了');
  throw new Error('报错了');
})
// TODO: 这里写p2调用then为什么不行
.then(result => result)
.catch(e => e); // 如果p2没有自己的catch方法，就会调用Promise.all()的catch方法。

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

// 上面代码中，p1会resolved，p2首先会rejected，但是p2有自己的catch方法，该方法返回的是一个新的 Promise 实例，p2指向的实际上是这个实例。该实例执行完catch方法后，也会变成resolved(如果没有return，resolve的值是undefined)，导致Promise.all()方法参数里面的两个实例都会resolved，因此会调用then方法指定的回调函数，而不会调用catch方法指定的回调函数。

总结：Promise.all()：在所有异步操作执行完成后才执行回调。成功的时候返回的是一个数组；失败的时候返回最先被reject失败状态的值，而不管其他promise是否完成。
应用场景：一个页面上需要等两个或者多个ajax的数据回来以后才正常显示，在此之前只显示loading。

Promise.race()

Promise.race()方法的参数与Promise.all()方法一样，Promise.race()方法同样是将多个 Promise 实例，包装成一个新的Promise实例。如果不是Promise实例，就会先调用下面讲到的Promise.resolve()方法，将参数转为 Promise 实例，再进一步处理。

Promise.race()与Promise.resolve()相同，接收一个数组作为参数，只要数组之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise实例的返回值，就传递给p的回调函数。

// 这里有两个要注意的地方
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('p1成功')
  }, 1000)
})
  .then(res => {
    // 这里如果只console，不return，Promise.race()方法的then()中得到的参数是undefined
    console.log(res, 1111);
    return res
  })

const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p2失败')
  }, 3000)
})
  .catch(err => {
  // 这里如果只console，不reject(),Promise.race()只会进入then()中，不会进入catch()
    console.log(err, 2222);
  })

const p = Promise.race([p1, p2])
p.then((res) => {
  console.log(res, '成功');
})
p.catch(() => {
  console.log('失败');
})

总结：Promise.race()是赛跑，哪个结果返回的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。
应用场景：超过2秒就给用户一个提醒网络状况不佳等，那我们就可以做一个2秒的定时器reject即可。

Promise.allSettled()

1. Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个Promise对象，并返回一个新的 Promise对象。只有等到参数数组的所有Promise对象都发生状态变更（不管是fulfilled还是rejected），返回的Promise对象才会发生状态变更。(应用场景：等到一组异步操作都结束了，不管每一个操作是成功还是失败，再进行下一步操作。)
2. Promise.allSettled()的状态只会是fulfilled，所以只有then()没有catch(),回调函数接收到的参数是数组,该数组的每个成员都是一个对象，对应传入Promise.allSettled()的数组里面的两个 Promise 对象。results的每个成员是一个对象，对象的格式是固定的，对应异步操作的结果。

// 成员对象的status属性的值只可能是字符串fulfilled或字符串rejected，用来区分异步操作是成功还是失败。如果是成功（fulfilled），对象会有value属性，如果是失败（rejected），会有reason属性，对应两种状态时前面异步操作的返回值。

// 异步操作成功时
{status: 'fulfilled', value: value}
// 异步操作失败时
{status: 'rejected', reason: reason}

const p1 = Promise.resolve('成功')
const p2 = Promise.reject('失败')

const p = Promise.allSettled([p1, p2])
p.then((results) => {
  console.log(results); // [{status: 'fulfilled', value: '成功'}, {status: 'rejected', value: '失败'}]
})

总结：Promise.allSettled()状态总是返回成功，并且返回每一项的状态和值。返回一个在所有给定的promise都已经fulfilled或者rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。
应用场景：当有多个彼此不依赖的异步任务成功完成时，或者想知道每个Promise的结果时。

Promise.any()

Promise.allSettled()方法接受一个数组作为参数，数组的每个成员都是一个Promise对象，并返回一个新的 Promise对象。只要参数实例有一个变成fulfilled状态，包装实例就会变成fulfilled状态；如果所有参数实例都变成rejected状态，包装实例就会变成rejected状态。
Promise.any()不会因为某个 Promise 变成rejected状态而结束，必须等到所有参数 Promise 变成rejected状态才会结束。但是只要有一个Promise变成fulfilled，就会结束变成fulfilled状态。

// TODO: 这里需要注意
const p1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve('p1成功')
    reject('p1失败') // 在这里reject后，如果有catch处理错误，并且没有reject或者抛出异常，当前的Promise实例就是fulfilled状态
  }, 1000)
})
.then(res => {
  console.log(res);
})
.catch(err => {
  console.log(err);
})
const p2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('p2失败')
  }, 2000)
})
.catch(err => {
  console.log(err);
})

const p = Promise.any([p1, p2])
.then(res => {
  console.log(res, '成功'); // 只要有一个Promise实例状态变成fulfilled就会执行then
})
.catch(err => {
  console.log(err, '失败'); // 要等所有的Promise实例状态都变成rejected才会执行catch
})

总结：Promise.any()只要其中的一个Promise成功，就会返回那个已经成功的Promise，如果可迭代对象中没有一个Promise成功，执行catch。Promise.any()抛出的错误是一个 AggregateError 实例，这个AggregateError实例对象的errors属性是一个数组，包含了所有成员的错误。
应用场景：显示第一张有效的图片（即最先fulfilled的那个promise）。

Promise.try()

让同步函数同步执行，异步函数异步执行。

总结

Promise方法总结： 都是接受一个数组作为参数，数组的每个成员都是一个Promise对象，并返回一个新的 Promise对象。数组中如果有不是promise实例的，会先调用Promise.resolve()方法将现有对象转为Promise对象。另外，Promise.all()方法的参数可以不是数组，但必须具有 Iterator 接口（Array，Map，Set ），且返回的每个成员都是 Promise 实例。
Promise.all()：在所有异步操作执行完成后才执行回调。成功的时候返回的是一个数组；失败的时候返回最先被reject失败状态的值，而不管其他promise是否完成。
Promise.race()：赛跑，哪个结果返回的快，就返回哪个结果，不管结果本身是成功状态还是失败状态。
Promise.allSettled()：状态总是返回成功，并且返回每一项的状态和值。返回一个在所有给定的promise都已经fulfilled或者rejected后的promise，并带有一个对象数组，每个对象表示对应的promise结果。
Promise.any()：只要其中的一个Promise成功，就会返回那个已经成功的Promise，如果可迭代对象中没有一个Promise成功，执行catch。

注意

1. 简便的Promise：链式编程最好保持扁平化，不要嵌套 Promise。

// TODO: 还没理解
// 创建新 Promise 但忘记返回它时，对应链条被打破，导致 p4 会与 p2 和 p3 同时进行。
const p1 = new Promise(function(resolve,reject){
  resolve(1);
}).then(function(result) {
  p2(result).then(newResult => p3(newResult));
}).then(() => p4());

2. 大多数浏览器中不能终止的 Promise 链里的 rejection，建议后面都跟上 .catch(error => console.log(error));

async await

async就是 Generator 函数的语法糖。

Generator函数

形式上，Generator函数是一个普通函数，但是有两个特征。一是，function关键字与函数名之间有一个星号；二是，函数体内部使用yield表达式，定义不同的内部状态。Generator 函数的调用方法与普通函数一样，也是在函数名后面加上一对圆括号。不同的是，调用Generator函数后，该函数并不执行，返回的也不是函数运行结果，而是一个指向内部状态的指针对象。下一步，必须调用遍历器对象的next方法，使得指针移向下一个状态。也就是说，每次调用next方法，内部指针就从函数头部或上一次停下来的地方开始执行，直到遇到下一个yield表达式（或return语句）为止。换言之，Generator 函数是分段执行的，yield表达式是暂停执行的标记，而next方法可以恢复执行。

function* fn() {
  yield 'hello';
  yield 'world';
  return 'ending';
}
fn(); // 普通的函数调用就会执行，但是Generator函数后，函数并不执行。

const f1 = fn()
console.log(f1); // Object [Generator] {}
console.log(f1.next()); // { value: 'hello', done: false }
console.log(f1.next()); // { value: 'world', done: false }
console.log(f1.next()); // { value: 'ending', done: true }
console.log(f1.next()); // { value: undefined, done: true }


// 第一次调用，Generator 函数开始执行，直到遇到第一个yield表达式为止。next方法返回一个对象，它的value属性就是当前yield表达式的值hello，done属性的值false，表示遍历还没有结束。

// 第二次调用，Generator 函数从上次yield表达式停下的地方，一直执行到下一个yield表达式。next方法返回的对象的value属性就是当前yield表达式的值world，done属性的值false，表示遍历还没有结束。

// 第三次调用，Generator 函数从上次yield表达式停下的地方，一直执行到return语句（如果没有return语句，就执行到函数结束）。next方法返回的对象的value属性，就是紧跟在return语句后面的表达式的值（如果没有return语句，则value属性的值为undefined），done属性的值true，表示遍历已经结束。

// 第四次调用，此时 Generator 函数已经运行完毕，next方法返回对象的value属性为undefined，done属性为true。以后再调用next方法，返回的都是这个值。

调用 Generator 函数，返回一个遍历器对象，代表 Generator 函数的内部指针。以后，每次调用遍历器对象的next方法，就会返回一个有着value和done两个属性的对象。value属性表示当前的内部状态的值，是yield表达式后面那个表达式的值；done属性是一个布尔值，表示是否遍历结束。

yield表达式

由于 Generator 函数返回的遍历器对象，只有调用next方法才会遍历下一个内部状态，所以其实提供了一种可以暂停执行的函数。yield表达式就是暂停标志。需要注意的是，yield表达式后面的表达式，只有当调用next方法、内部指针指向该语句时才会执行。

遍历器对象的next方法的运行逻辑如下:

1. 遇到yield表达式，就暂停执行后面的操作，并将紧跟在yield后面的那个表达式的值，作为返回的对象的value属性值。
2. 下一次调用next方法时，再继续往下执行，直到遇到下一个yield表达式。
3. 如果没有再遇到新的yield表达式，就一直运行到函数结束，直到return语句为止，并将return语句后面的表达式的值，作为返回的对象的value属性值。
4. 如果该函数没有return语句，则返回的对象的value属性值为undefined。

async

async函数就是将 Generator 函数的星号（*）替换成async，将yield替换成await。

async函数返回一个 Promise 对象，可以使用then方法添加回调函数。当函数执行的时候，一旦遇到await就会先返回，等到异步操作完成，再接着执行函数体内后面的语句。

async函数返回的 Promise 对象，必须等到内部所有await命令后面的 Promise 对象执行完，才会发生状态改变，除非遇到return语句或者抛出错误，如果await后面的异步操作出错，那么等同于async函数返回的 Promise 对象被reject。也就是说，只有async函数内部的异步操作执行完，才会执行then方法指定的回调函数。

const fn = new Promise((resolve, reject) => {
  resolve('2')
})
  .then(res => {
  console.log(res);
})
const asyncFn = async () => {
  console.log('1');
  await fn
  console.log('3');
  return '4'
}
asyncFn().then(res => {
  console.log(res);
})

// 1 2 3 4

const asyncFn = async () => {
  console.log('1');
  await Promise.reject('2')
  console.log('3'); // 不会执行，因为第一个await语句状态变成了reject。
}
asyncFn().then(res => {
  console.log(res);
})
  .catch(err => {
  console.log(err);
})
// 1 2


// 为了不中断后面的异步操作，可以把await放在try...catch结构里面
const asyncFn = async () => {
  console.log('1');
  try {
    await Promise.reject('2')
  }
  catch (e) {
    console.log(e);
  }
  console.log('3');
}
asyncFn().then(res => {
  console.log(res);
})
  .catch(err => {
  console.log(err);
})

// 1 2 3 undefined

// 或者await后面的 Promise 对象再跟一个catch方法，处理前面可能出现的错误。
const asyncFn = async () => {
  console.log('1');
  await Promise.reject('2').catch(err => {
    console.log(err);
  })
  console.log('3');
}
asyncFn().then(res => {
  console.log(res);
})
  .catch(err => {
  console.log(err);
})
// 1 2 3 undefined