Promise概念
Promise是异步编程的一种解决方案，将异步操作以同步的流程表达出来，避免了层层嵌套的回调函数。
状态
- 三种状态：pending（等待）、fulfilled（已完成）、rejected（已拒绝）；
- 只能有两种状态改变：pending=>fulfilled、pending=>rejected；
- 根据异步操作结果，决定状态的改变，一旦状态改变，不受外界任何影响，'承诺(Promise)'不会再变。
特点
- Promise一旦新建就会立即执行
let promise = new Promise(function(resolve, reject) {
console.log('Promise');
resolve();
});
promise.then(function() {
console.log('resolved.');
});
console.log('Hi!');
// Promise
// Hi!
// resolved
- Promise.resolve()、Promise.reject()
Promise.resolve('foo')
//等价于
new Promise(resolve => resolve('foo'))
const p = Promise.reject('出错了');
// 等同于
const p = new Promise((resolve, reject) => reject('出错了'))
- 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)
);
- Promise.prototype.catch()
用于指定出错时的回调函数，返回一个新的Promise实例。
Promise.prototype.catch()
//等同于
Promise.prototype.then(null/undefines, rejection)
- 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方法。
- Promise.race()
const p = Promise.race([p1, p2, p3]);
以上代码，只要p1、p2、p3之中有一个实例率先改变状态，p的状态就跟着改变。那个率先改变的 Promise 实例的返回值，就传递给p的回调函数。
Promise缺点
- 无法取消Promise，一旦新建它就会立即执行，无法中途取消。
- 如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
- 当处于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
//成功
手写Promise.all
const Promise.myAll = (list) => {
const reason = []
let count = 0
return new Promise((resolve, reject) => {
list.map((promise, index) => {
promise.then((success) => {
reason[index] = success
count++
if(count===list.length){
resolve(reason)
}
}, (fail) => {
reject(fail)
})
})
})
}
