Promise

Promise的含义

Promise是异步编程的一种解决方案。语法上它是一个对象，从它身上可以获取异步操作的信息。

简单的说，Promise是个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。

Promise对象代表一个异步操作，它有三种状态：pending（进行中），resoved（已成功），rejected（已失败）

Promise的好处在于可以将异步操作以同步操作的流程（方式）表达出来（通俗的说：即使你调用的是异步代码，它也会变成类似同步，等异步代码执行完之后再执行同步）；它也有一些缺点：它一旦新建就会立即执行，中途不可取消，当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

基本用法

ES6 规定，Promise对象是一个构造函数，用来生成Promise实例。Promist构造函数接受一个回调函数作为参数，该函数又有两个参数resolve和reject。resolve是在异步操作成功时调用，并将返回结果通过参数形式传递出去；reject是在异步操作失败时调用，返回结果也是通过参数形式传递出去。

new Promise(function(resolve,reject){
  // 进行中
  setTimeout(() => {
    resolve('成功')
    // reject('失败')
  },1000)
  
}).then(res => {
  // 成功业务逻辑处理
  console.log(res)
}).catch(erroy => {
  // 失败业务逻辑处理
  console.log(erroy)
})

Promise.prototype.then()

Promise对象有then方法，它被定义在原型对象中；then方法接受两个回调函数作为参数，第一个回调是Promise对象的状态为resolve时调用，第二个回调是Promise对象的状态为reject时调用，其中第二个回调函数是可选的，不一定要提供。这两个函数都接受Promise对象传出的值作为参数。

new Promise(function(resolve,reject){
     // 进行中
  setTimeout(() => {
    resolve('成功')
    // reject('失败')
  },1000)
  
}).then(res => {
    // 成功业务逻辑处理
  console.log(res)
},error => {
    // 成功业务逻辑处理    
})

需要注意的是then的方法返回的是一个新Promise实例，因此可以采用链式写法，即then方法后面再调用另一个then方法。

new Promise(function(resolve,reject){

  setTimeout(() => {
    resolve('成功')
    // reject('失败')
  },1000)
  
}).then(res => {
   
}).then(res => {
    
}).then(res => {
    
})

// 拆解分析
let p = new Promise(function(resolve,reject){

  setTimeout(() => {
    resolve('成功')
    // reject('失败')
  },1000)
  
})
console.log(p) // Promise的实例对象

console.log(p.then()) // 一个新的Promise实例对象

console.log(p.then().then()) // 又是一个新的Promise实例对象

Primise.prototype.catch()

Promise.prototype.catch()方法是.then(null,rejection)或.then(undefined,rejection)的别名，用于指定发生错误时调用回调函数。

new Promise(function(resolve,reject){
     // 进行中
  setTimeout(() => {
    reject('失败')
  },1000)
  
}).then(res => {
    // 成功业务逻辑处理
  console.log(res)
},error => {
    // 成功业务逻辑处理    
})

该对象的状态为reject时会调用catch方法指定的回调函数

Promise 对象的错误具有'冒泡'性质，会一直向后传递，直到被捕获为止。也就是说，错误总是会被下一个catch语句捕获。

new Promise(function(resolve,reject){

    setTimeout(() => {
        reject('失败')
    },1000)
  
}).then(function(post) {
  
}).then(function(comments) {
  
}).catch(function(error) {
  // 处理前面三个Promise产生的错误
});

一般来说，不要在then方法里面定义 reject 状态的回调函数（即then的第二个参数），总是使用catch方法

// bad
promise
  .then(function(data) {
    // success
  }, function(err) {
    // error
  });

// good
promise
  .then(function(data) { //cb
    // success
  })
  .catch(function(err) {
    // error
  });

一般总是建议，Promise 对象后面要跟catch方法，这样可以处理 Promise 内部发生的错误。catch方法返回的还是一个 Promise 对象，因此后面还可以接着调用then方法。

const someAsyncThing = function() {
  return new Promise(function(resolve, reject) {
    // 下面一行会报错，因为x没有声明
    resolve(x + 2);
  });
};

someAsyncThing()
.catch(function(error) {
  console.log('oh no', error);
})
.then(function() {
  console.log('carry on');
});

Promise.prototype.finally()

finally方法用于指定不管Promise状态如何都会执行该操作，它是ES2018（ES9）引入的标准

new Promise(function (resolve, reject) {
  setTimeout(() => {
    resolve('已成功状态')
  }, 1000)
}).then((res) => {
  console.log(res)
}).catch((erroy) => {
  console.log(erroy)
}).finally(() => {
  console.log('总会执行')
})

finally方法的回调函数不接受任何参数，它本质是then方法特例.
简单的说，就是同一段代码片，如果成功和失败两种情况都要写，就直接写在fanilly回调中，这样的话只需写一次

promise
.finally(() => {
  // 语句
});

// 等同于
promise
.then(
  result => {
    // 语句
    return result;
  },
  error => {
    // 语句
    throw error;
  }
);

finally方法总是会返回原来的值。复制已下代码可在控制台查看结果

// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})

// resolve 的值是 2
Promise.resolve(2).finally(() => {})

// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})

// reject 的值是 3
Promise.reject(3).finally(() => {})

Promise.all()

Promise.all()方法将多个Promise实例包装成一个新的Promise实例。它接受一个数组作为参数，数组中每个成员必须是Promise实例。

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

p的状态由p1、p2、p3决定，分成两种情况:

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

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

Promise.all([
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('第一个成功')
    }, 500)
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('第二个成功')
    }, 100)
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('第三个成功')
      // reject('第三个失败')
    }, 200)
  })
]).then(res => {
 // 三个Promise实例的状态都是fulfilled时调用，返回结果组成一个数组
  console.log(res) // ['第一个成功','第二个成功','第三个成功']
}).catch(erroy => {
// 只要有一个状态为rejected就会被调用，
  console.log(erroy) // 第三个失败
})

Promise.race()

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

Promise.race()同样是将对多个Promise实例包装成一个新的Promise实例，不同Promise.all()的是Promise.race()中哪个Promise实例状态先改变，就将谁的返回值传递给p的回调函数；例如：p1先改变，就将p1的传递给p的回调

Promise.race([
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('第一个成功')
    }, 500)
  }),
  new Promise((resolve, reject) => {
    // 我是第一个状态改变的Promise实例
    setTimeout(() => {
      resolve('第二个成功')
    }, 100)
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('第三个失败')
    }, 1000)
  })
]).then(res => {
  console.log(res) // 第二个成功
}).catch(erroy => {
  console.log(erroy)
})

Promise.allSettled()

Promise.allSettled()将多个Promise实例包装成一个新的Promise实例，它是等所有的实例都返回结果后它才包装结束，包装结束后它的状态总是fulfilled（已成功）。

Promise.allSettled()它是ES2020引入的，它可以确定所有请求已经结束。

Promise.allSettled([
  new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('成功')
    }, 1000)
  }),
  new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('失败')
    }, 200)
  }),
]).then((res) => { 
  console.log(res)
})

// res是所有Promise实例的返回结果，它是一个数组；
// 每一个Promise实例返回值都是一个对象，每个对象都有status属性，该属性的值只可能是字符串fulfilled或字符串rejected。fulfilled时，对象有value属性，rejected时有reason属性

// [
//   {status: "fulfilled", value: "成功"},
//   {status: "rejected", reason: "失败"}
// ]

Promise.resolve()

Promise.resolve() 可以将现有的对象转成Promise对象

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

Promise.resolve方法的参数分成四种情况。

（1）参数是一个 Promise 实例

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

（2）参数是一个thenable对象

thenable对象指的是具有then方法的对象，比如下面这个对象。

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

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
});

上面代码中，thenable对象的then方法执行后，对象p1的状态就变为resolved，从而立即执行最后那个then方法指定的回调函数，输出 42。

（3）参数不是具有then方法的对象，或根本就不是对象

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

const p = Promise.resolve('Hello');

p.then(function (s){
  console.log(s)
});
// Hello

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

（4）不带有任何参数

Promise.resolve()方法允许调用时不带参数，直接返回一个resolved状态的 Promise 对象。

所以，如果希望得到一个 Promise 对象，比较方便的方法就是直接调用Promise.resolve()方法

const p = Promise.resolve();

p.then(function () {
  // ...
});

上面代码的变量p就是一个 Promise 对象。

需要注意的是，立即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, function (s) {
  console.log(s)
});
// 出错了

上面代码生成一个 Promise 对象的实例p，状态为rejected，回调函数会立即执行。

注意，Promise.reject()方法的参数，会原封不动地作为reject的理由，变成后续方法的参数。这一点与Promise.resolve方法不一致。

const thenable = {
  then(resolve, reject) {
    reject('出错了');
  }
};

Promise.reject(thenable)
.catch(e => {
  console.log(e === thenable)
})
// true

上面代码中，Promise.reject方法的参数是一个thenable对象，执行以后，后面catch方法的参数不是reject抛出的“出错了”这个字符串，而是thenable对象。