Promise原理讲解 && 实现一个Promise对象 (遵循Promise/A+规范)
面试精选之Promise

搞懂这两篇文章就差不离了

Promise 的使用

promise是一个构造函数，new Promise()返回一个promise对象，构造方法接受一个excutor函数作为参数，
excutor函数包含resolve和reject两个参数

  1. const promise = new Promise((resolve, reject) => {
  2.        // 异步处理
  3.        // 处理结束后、调用resolve 或 reject
  4. });

Promise相当于一个状态机

有三种状态：
pending：promise对象初始化的状态
fulfilled：当调用resolve(成功)，会由pending => fulfilled
rejected：当调用reject(失败)，会由pending => rejected

promise对象方法

then

then方法注册 当resolve(成功)/reject(失败)的回调函数

  1. // onFulfilled 是用来接收promise成功的值
  2. // onRejected 是用来接收promise失败的原因
  3. promise.then(onFulfilled, onRejected);

注意：then方法是异步执行的

resolve

resolve(成功) onFulfilled会被调用

  1. const promise = new Promise((resolve, reject) => {
  2.    resolve('fulfilled'); // 状态由 pending => fulfilled
  3. });
  4. promise.then(result => { // onFulfilled
  5.     console.log(result); // 'fulfilled' 
  6. }, reason => { // onRejected 不会被调用
  8. })

reject(失败) onRejected会被调用

  1. const promise = new Promise((resolve, reject) => {
  2.    reject('rejected'); // 状态由 pending => rejected
  3. });
  4. promise.then(result => { // onFulfilled 不会被调用
  6. }, reason => { // onRejected 
  7.     console.log(reason); // 'rejected'
  8. })

catch

在链式写法中可以捕获前面then中发送的异常,

  1. promise.catch(onRejected)
  2. 相当于
  3. promise.then(null, onRrejected);
  5. // 注意
  6. // onRejected 不能捕获当前onFulfilled中的异常
  7. promise.then(onFulfilled, onRrejected); 
  9. // 可以写成：
  10. promise.then(onFulfilled)
  11.        .catch(onRrejected);

promise chain

promise.then方法每次调用 都返回一个新的promise对象 所以可以链式写法

  1. function taskA() {
  2.     console.log("Task A");
  3. }
  4. function taskB() {
  5.     console.log("Task B");
  6. }
  7. function onRejected(error) {
  8.     console.log("Catch Error: A or B", error);
  9. }
  11. var promise = Promise.resolve();
  12. promise
  13.     .then(taskA)
  14.     .then(taskB)
  15.     .catch(onRejected) // 捕获前面then方法中的异常
  1. /**
  2. then 的方法异常 下面的方法不在执行 直接走catch
  3. **/ 
  5. function taskA() {
  6.    return new Promise((resolve,reject)=>{
  7.      setTimeout(()=>{
  8.        reject("Task A setTimeOut");
  9.      },2000)
  10.    })
  11.  }
  12. function taskB(result) {
  13.   console.log("Task B",result);
  14. }
  16. function onRejected(error) {
  17.   console.log("Catch Error: A or B", error);
  18. }
  21. var promise = Promise.resolve(111);
  23. promise.then(async (result)=>{
  24.   console.log("Task A start");
  25.   await taskA()
  26.   console.log("Task A end");
  27. })
  28.   .then(taskB)
  29.   .catch(onRejected) // 捕获前面then方法中的异常

图片.png

  1.                  function taskA() {
  2.             return new Promise((resolve,reject)=>{
  3.                 setTimeout(()=>{
  5.                     resolve("Task A setTimeOut");
  6.                 },2000)
  7.             })
  8.         }
  9.         function taskB() {
  10.             console.log("Task B");
  11.         }
  13.         function onRejected(error) {
  14.             console.log("Catch Error: A or B", error);
  15.         }
  18.         var promise = Promise.resolve(111);
  20.         promise.then(async (result)=>{
  21.             console.log("Task A start");
  22.             console.log(await taskA())
  23.             console.log("Task A end");
  24.         })
  25.         .then(taskB)
  26.         .catch(onRejected) // 捕获前面then方法中的异常

图片.png

promise静态方法

Promise.resolve 返回一个fulfilled状态的promise对象

  1. Promise.resolve('hello').then(function(value){
  2.     console.log(value);
  3. });
  5. Promise.resolve('hello');
  6. // 相当于
  7. const promise = new Promise(resolve => {
  8.    resolve('hello');
  9. });

Promise.reject 返回一个rejected状态的promise对象

  1. Promise.reject(24);
  2. new Promise((resolve, reject) => {
  3.    reject(24);
  4. });

Promise.all 接收一个promise对象数组为参数

只有全部为resolve才会调用 通常会用来处理 多个并行异步操作
值得注意的是，返回的数组结果顺序不会改变，即使P2的返回要比P1的返回快，顺序依然是P1，P2

  1. const p1 = new Promise((resolve, reject) => {
  2.     resolve(1);
  3. });
  5. const p2 = new Promise((resolve, reject) => {
  6.     resolve(2);
  7. });
  9. const p3 = new Promise((resolve, reject) => {
  10.     resolve(3);
  11. });
  13. Promise.all([p1, p2, p3]).then(data => { 
  14.     console.log(data); // [1, 2, 3] 结果顺序和promise实例数组顺序是一致的
  15. }, err => {
  16.     console.log(err);
  17. });

Promise.race 接收一个promise对象数组为参数

Promise.race 只要有一个promise对象进入 FulFilled 或者 Rejected 状态的话，就会继续进行后面的处理。
race是赛跑的意思，也就是说Promise.race([p1, p2, p3])里面的结果哪个获取的快，就返回哪个结果，不管结果本身是成功还是失败

一般用于和定时器绑定，比如将一个请求和一个三秒的定时器包装成Promise实例，加入到race队列中，请求三秒中还没有回应时，给用户一些提示或一些相应的操作
图片.png

  1. const p1 = new Promise((resolve, reject) => {
  2.     setTimeout(()=>{resolve("success")},1000)
  3. });
  4. const p2 = new Promise((resolve, reject) => {
  5.     setTimeout(()=>{reject("fail")},500)
  6. });
  8. Promise.race([p1,p2]).then((result)=>{
  9.     console.log(result)
  10. }).catch((err)=>{
  11.     console.log(err)
  12. })