彻底理解Promise

你会发光耶
115 阅读12分钟

Promise基本

引入Pomise

Promise 是 JavaScript 引入的一种处理异步操作的机制，它代表一个异步操作的最终完成（或失败）及其结果值，它旨在解决异步编程中常见的问题，引入 Promise 的主要原因包括：

  • 为了解决回调地狱
    在传统的回调函数（callback）方式中，多个异步操作的回调函数嵌套在一起，形成了所谓的回调地狱或回调金字塔，使得代码变得难以阅读和维护 
    doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doAnotherThing(newResult, function (finalResult) {
      console.log(finalResult);
    });
  });
});
  • 为了有更好的错误提示：使用回调函数时，错误处理往往不够直观，尤其是当异步操作链很长时 
    doSomething(function (result) {
  doSomethingElse(result, function (newResult) {
    doAnotherThing(newResult, function (finalResult) {
      console.log(finalResult);
    }, function (error) {
      console.error(error);
    });
  }, function (error) {
    console.error(error);
  });
}, function (error) {
  console.error(error);
});
  • 为了方便使用和规范

    • 第一：我们需要自己来设计回调函数、回调函数的名称、回调函数的使用等；

    • 第二：对于不同的人、不同的框架设计出来的方案是不同的，那么我们必须耐心去看别人的源码或者文档，以便可以理解这个函数到底怎么用

代码结构

  • Promise是一个类，可以翻译成 承诺、许诺 、契约

  • 当我们需要给予调用者一个承诺，待会儿我会给你回调数据时，就可以创建一个Promise的对象

  • 在通过 new创建Promise对象 时，我们需要传入一个回调函数

    • 这个回调函数会被立即执行，有两个参数为回调函数resolve、reject

    • 当我们调用resolve回调函数时，会执行实例的then方法传入的回调函数

    • 当我们调用reject回调函数时，会执行实例的catch方法传入的回调函数

    • 可链式调用then和catch

  • 代码示例如下：

    const promise = new Promise((resolve, reject) => {
  console.log("这个函数会立即执行");
  resolve("成功"); // 会执行then
  // reject("失败"); // 会执行catch
});

// promise.then((res) => {
//   console.log(res); // 成功
// });
// promise.catch((err) => {
//   console.log(err); // 失败
// });

promise
  .then((res) => {
    console.log(res); // 成功
  })
  .catch((err) => {
    console.log(err); // 失败
  });

三个状态

  • 待定（pending）: 初始状态，既没有被兑现也没有被拒绝，当执行executor中的代码时，处于该状态
  • 已兑现（fulfilled）: 意味着操作成功，执行了resolve时处于该状态
  • 已拒绝（rejected）: 意味着操作失败，执行了reject时处于该状态

注意：一旦状态被确定下来，Promise的状态会被锁死，该Promise的状态是不可更改的

const promise = new Promise((resolve, reject) => {
  console.log("这个函数会立即执行");
  resolve("成功");
  reject("失败"); // promise的状态已经确定resolve，不会执行reject
});

promise
  .then((res) => {
    console.log(res); // 成功
  })
  .catch((err) => {
    console.log(err); // catch不会执行
  });

Executor

Executor是在创建Promise时需要传入的一个回调函数，这个回调函数会被立即执行，并且传入两个参数resolve和reject，会在Executor中确定Promise状态：

  • 通过resolve，可以兑现（fulfilled）Promise的状态，我们也可以称之为已决议（resolved）
  • 通过reject，可以拒绝（reject）Promise的状态

resolve传不同值

  • 如果resolve传入一个普通的值或者没有实现then方法的对象，那么这个值会作为then回调的参数

    const promise = new Promise((resolve, reject) => {
  console.log("这个函数会立即执行");
  resolve("成功");
  // resolve(123);
  // resolve({ name: "obj" });
});
promise.then((res) => {
  console.log(res); // 打印：成功 || 123 || { name: "obj" }
});

  • 当的 resolve 方法中传入的值是一个对象并且该对象实现了 then 方法时，Promise 会将这个对象视为一个 thenable 对象（一个具有 then 方法的对象），会根据这个对象中 then 方法的执行结果来决定最终的 Promise 状态。这种行为被称为 "Promise A+ 规范" 中的 "Promise Resolution Procedure"

    • 当 Promise.resolve 遇到一个 thenable 对象时，它会自动调用这个对象的 then 方法，并且将内部生成的 resolve 和 reject 函数传递进去

    • 在 thenable 对象的 then 方法中，resolve 和 reject 这两个参数是回调函数，它们由 Promise 内部机制提供用来处理异步操作的成功或失败，相当于 Promise 本身的 resolve 和 reject 方法，能够决定当前 Promise 的最终状态

    • 当在 thenable 对象的 then 方法中使用 resolve(传不同值) 时，和外面的三种情况一致

    • 如果 thenable 对象的 then 方法抛出异常，Promise 会将捕获异常作为最终结果，状态为 rejected

    const promise1 = new Promise((resolve, reject) => {
  console.log("这个promise1Log会立即执行"); // 这个promise1Log会立即执行
  resolve({
    name: "thenable1",
    then(resolve, reject) {
      resolve("thenable1成功");
    },
  });
});
promise1.then((res) => {
  console.log(res); // thenable1成功
});

const promise2 = new Promise((resolve, reject) => {
  console.log("这个promise2Log会立即执行"); // 这个promise2Log会立即执行
  resolve({
    name: "thenable2",
    then(resolve, reject) {
      reject("thenable2失败");
    },
  });
});
promise2
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err); // thenable2失败
  });

const promise3 = new Promise((resolve, reject) => {
  console.log("这个promise3Log会立即执行"); // 这个promise3Log会立即执行
  resolve({
    name: "thenable3",
    then() {
      console.log("thenable3Log"); // 会执行打印：thenable3Log
    },
  });
});
promise3 // then和catch都不会执行
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

const promise4 = new Promise((resolve, reject) => {
  console.log("这个promise4Log会立即执行"); // 这个promise4Log会立即执行
  resolve({
    name: "thenable4",
    then() {
      throw "thenable4抛出错误"; // promise4状态为rejected
    },
  });
});
promise4
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err); // thenable4抛出错误
  });

  • 如果resolve中传入的是另外一个Promise，则会返回这个新的Promise，那么这个新Promise会决定原Promise的状态

    const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  resolve(
    new Promise((resolve, reject) => {
      resolve("resolvePromise");
    })
  );
});
promise.then((res) => {
  console.log(res); // resolvePromise
});
// 相当于 new Promise((resolve) => resolve("resolvePromise")).then(res => console.log(res))

Promise实例方法

then方法

then方法是Promise对象上的一个方法（实例方法），它其实是放在Promise的原型上的 Promise.prototype.then

两个参数

then方法接受两个参数：

  • fulfilled的回调函数：当状态变成fulfilled时会回调的函数
  • rejected的回调函数：当状态变成rejected时会回调的函数
const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject('失败');
});
// promise
//   .then((res) => {
//     console.log(res);
//   })
//   .catch((err) => {
//     console.log(err); // 失败
//   });
// 等价于
promise.then(
  (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err); // 失败
  }
);

多次调用

一个Promise的then方法是可以被多次调用的，都会在 Promise状态 fulfilled时被依次调用且彼此独立

let promise = new Promise((resolve, reject) => {
  setTimeout(() => resolve("结果"), 1000);
});

promise.then(result => {
  console.log("第一个 then:", result);
});
promise.then(result => {
  console.log("第二个 then:", result);
});
promise.then(result => {
  console.log("第三个 then:", result);
});
// 输出：第一个 then: 结果； 第二个 then: 结果； 第三个 then: 结果

返回值

then方法本身是有返回值的，它的返回值是一个Promise，从而可以进行链式调用

  • 但是then方法返回的Promise到底处于什么样的状态呢？

    • 当then方法中的回调函数本身在执行的时候，那么它处于pending状态

    • 当then方法中的回调函数返回一个结果时，那么它处于fulfilled状态，并且会将结果作为resolve的参数

    • 当 then 方法返回一个新的 Promise 对象时，链中的下一个 then 方法会等待这个新 Promise 对象的解决结果

    • 当then方法抛出一个异常时，那么它处于rejected状态

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  resolve("成功");
});
promise
  .then((res) => {
    console.log(res); // 打印：成功
    // return 123; // 这时then方法返回的promise状态是fulfilled
    throw "thenPromise失败"; // 这时then方法返回的promise状态是rejected
  })
  .then((res) => {
    console.log(res); // 123
  })
  .catch((err) => {
    console.log(err); // thenPromise失败
  });

catch方法

catch方法是Promise对象上的一个方法（实例方法），是放在Promise的原型上的 Promise.prototype.catch

多次调用

Promise的catch方法是可以被多次调用的，当Promise的状态变成reject的时候，这些回调函数都会被依次执行

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise.catch((err) => {
  console.log("第一catch回调执行：" + err);
});
promise.catch((err) => {
  console.log("第二catch回调执行：" + err);
});
promise.catch((err) => {
  console.log("第三catch回调执行：" + err);
});
// 输出：第一catch回调执行：失败；第二catch回调执行：失败；第三catch回调执行：失败

返回值

catch方法也是返回一个Promise对象的，所以catch方法后可以继续调用then方法或者catch方法：如果我们希望后续继续执行catch，那么需要抛出一个异常

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise
  .catch((err) => {
    throw "catchPromise失败"; // 需要执行后续的catch要抛出异常
  })
  .catch((err) => {
    console.log(err); // catchPromise失败
  });

会有报错情况：下面例子如果没有直接在 promise实例上调用catch，后面的 .then() 链式调用会将异常向下传播，最终被找到的 .catch() 捕获，即被最近的catch捕获

  • 如果不写最后的catch 或者其他形式的错误处理（比如 then 中的第二个参数），Promise 在被拒绝（rejected）后，浏览器会错误提示（unhandled promise rejection）
const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  reject("失败");
});
promise
  .then((res) => {
    throw "then1Throw";
  })
  .then((res) => {
    throw "then2Throw";
  })
  .catch((err) => {
    console.log(err); // 失败
  });

finally方法

finally是在ES9（ES2018）中新增的一个特性：表示无论Promise对象无论变成fulfilled还是rejected状态，最终都会被执行，finally方法不接收参数

const promise = new Promise((resolve, reject) => {
  console.log("这个promiseLog会立即执行"); // 这个promiseLog会立即执行
  // reject('失败')
  resolve("成功");
});
promise
  .then((res) => {
    console.log(res) // 成功
  })
  .catch((err) => {
    console.log(err); // 失败
  })
  .finally(() => {
    console.log("finally"); // 成功失败都会执行打印
  });

Promise类方法

前面的then、catch、finally方法都属于Promise的实例方法，都是存放在Promise的prototype上的，后面的类方法就是直接通过Promise调用的

resolve方法

一个用于将现有的值转换为一个已成功完成（fulfilled）的 Promise 对象的方法，Promise.resolve的用法相当于new Promise，并且执行resolve操作

  • 传递值的情况和上面resolve传不同值情况一样
Promise.resolve("123").then((res) => {
  console.log(res); // 123
});
// Promise.resolve("123") 相当于 new Promise((resolve) => resolve(123))

reject方法

和Promise.resolve类似，一个用于将现有的值转换为一个已拒绝（rejected）的 Promise 对象的方法，Promise.reject的用法相当于new Promise，并且执行reject操作

  • 传入的参数无论是什么形态，都会直接作为rejected状态的参数传递到catch的
Promise.reject("123").catch((res) => {
  console.log(res); // 123
});
// Promise.reject("123") 相当于 new Promise((reject) => reject(123))

all方法

它的作用是将多个Promise包裹在一起形成一个新的Promise

  • 新的Promise状态由包裹的所有Promise共同决定

    • 必须当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组

    • 当有一个Promise状态为reject时，新的Promise状态为rejected，并且会将第一个reject的返回值作为catch参数

const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve) => resolve("promise2"));
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.all([promise1, promise2, promise3]).then((res) => {
  console.log(res); // ['promise1', 'promise2', 'promise3']
});

const promise4 = new Promise((resolve) => resolve("promise4"));
const promise5 = new Promise((resolve, reject) =>
  reject("promise5Reject")
);
const promise6 = new Promise((resolve) => resolve("promise6"));
Promise.all([promise4, promise5, promise6]).catch((err) => {
  console.log(err); // promise5Reject
});

all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的reject状态，那么对于resolved的和处于pending状态的Promise，获取不到对应的结果

allSettlet方法

解决了all的缺陷，在ES11（ES2020）中，添加了新的API Promise.allSettled

  • 该方法会在所有的Promise都有结果时才会有最终的状态，这个新Promise的状态一定是fulfilled的

  • allSettled的结果是一个数组，数组中存放着每一个Promise的结果对应一个对象的，这个对象中包含status状态，以及对应的value值

const promise1 = new Promise((resolve) => resolve("promise1"));
const promise2 = new Promise((resolve, reject) =>
  reject("promise2Reject")
);
const promise3 = new Promise((resolve) => resolve("promise3"));
Promise.allSettled([promise1, promise2, promise3])
  .then((res) => {
    console.log(res);
  });

image.png

race方法

多个Promise时，当有一个Promise有了最终状态，希望这个状态是最新Promise的状态，那么可以使用race方法

  • race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果
const promise1 = new Promise(() => {});
const promise2 = new Promise((resolve, reject) =>
  reject("promise2Reject")
);
Promise.race([promise1, promise2])
  .then((res) => {
    console.log(res); // 不会执行
  })
  .catch((err) => {
    console.log(err); // promise2Reject
  });

any方法

any方法是ES12中新增的方法，和race方法是类似的

  • any方法会等到一个fulfilled状态，才决定新Promise为fulfilled状态

  • 如果所有的Promise都是rejected的，会等到所有的Promise变成rejected状态时catch回调报错：AggregateError: All promises were rejected

const promise1 = new Promise((resolve, reject) =>
  reject("promise1Reject")
);
const promise2 = new Promise((resolve) => resolve("promise2"));
Promise.any([promise1, promise2])
  .then((res) => {
    console.log(res); // promise2
  })
  .catch((err) => {
    console.log(err); 
  });

解决回调地狱

学习完了Promise，我们看下它是怎么解决回调地狱的

/* 模拟请求 */
// 方式一
function requestData1(url, callback) {
  setTimeout(() => {
    console.log(url);
    callback && callback(url);
  }, 2000);
}
// 方式二
function requestData2(url) {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      console.log(url);
      resolve(url);
    }, 2000);
  });
}

/* 模拟调用场景 
  第一次调用拿到数据
  第二次的请求url依赖于第一次的结果
  第三次的请求url依赖于第二次的结果
  依次类推
*/
// 方式一：普通方法
function getData1() {
  requestData1("https://hello", (res1) => {
    requestData1(`${res1}/china`, (res2) => {
      requestData1(`${res2}/global`, (res3) => {
        requestData1(`${res3}/world`, (res4) => {
          // 依次递推就是回调地狱
        });
      });
    });
  });
}
// 方式二：Promise链式调用
function getData2() {
  requestData2("https://hello")
    .then((res1) => {
      requestData2(`${res1}/china`).then((res2) => {
        requestData2(`${res2}/global`).then((res3) => {
          requestData2(`${res3}/world`).then((res4) => {
            // 依次递推依旧回调地狱
          });
        });
      });
    })
    .catch((err) => {});
}
// 方式三：Promise优化
function getData3() {
  requestData2("https://hello")
    .then((res1) => {
      return requestData2(`${res1}/china`); // return Promise,状态由这个Promise决定，可以再调用then
    })
    .then((res2) => {
      return requestData2(`${res2}/global`);
    })
    .then((res3) => {
      return requestData2(`${res3}/world`);
    })
    .then((res4) => {
      // 依次类推解决了回调地狱
    })
    .catch((err) => {});
}
getData1();
getData2();
getData3();

手写Promise

具体待后面练习后补充

avatar
文章
阅读
粉丝