es6中promise 链式调用理解总结

原创已于 2023-01-05 17:14:52 修改 · 1.2k 阅读

0 ·

CC 4.0 BY-SA版权

文章标签：

#javascript

于 2022-03-27 20:28:51 首次发布

本文深入探讨es6中的Promise链式调用，包括构造函数、then方法以及async/await的使用。着重分析了Promise在构造时的状态设定，then方法如何返回新的Promise并根据返回值确定状态，以及then内部事件的执行顺序。同时介绍了async函数返回Promise和await关键字如何简化异步处理。

理解es6中promise链式调用

promise状态，value不谈了，主要研究链式调用（then）

constructor

立即执行，参数resolve，reject决定promise对象状态和value

//原生promise示例
let p = new Promise((resolve，reject) => {
    resolve(1)
})

then

总体特性：

返回一个promise对象,所以可以链式调用
如果 return new Promise() 返回一个promise对象，则要等该promise对象最终成功或失败才改变返回的promise状态
如果return '非promise对象‘ 则直接返回成功态的一个promise

调用then时发生了什么：

立即返回一个promise（pending）,then中return 的值决定新返回的promise的状态：
非promise:成功
promise：状态与该promise一致
抛出异常：失败

事件执行顺序：如果状态为pending的promise调用then,则在promise的注册列表中加入事件等待执行，否则(成功或失败状态)直接执行事件（这里的事件做了什么：将then的方法参数塞入微任务队列）

//原生promise示例
let p = new Promise((resolve,reject) => {
  resolve(1)
}).then(function (res){
console.log(res)
return 2
}).then((res) => {
console.log(res)
return new Promise((resolve) => {
  resolve(3)
})
}).then((res) => {
console.log(res)
})

async await

特点：
async函数会返回一个promise对象，await相当于then

//试一试
const myPromise = Promise.resolve(Promise.resolve("A"));
function func1() {
  myPromise.then((res) => res).then((res) => console.log(res));
  setTimeout(() => console.log("B"), 0);
  console.log("C");
}

async function func2() {
  const res = await myPromise;
  console.log(await res);
  setTimeout(() => console.log("D"), 0);
  console.log("E");
}
func1();
func2();

//试一试
new Promise((resolve, reject) => {
  resolve("p1");

  new Promise((resolve, reject) => {
    resolve("p2");
  }).then((data) => {
    console.log(data);
  });

  new Promise((resolve, reject) => {
    resolve("p3");
  }).then((data) => {
    console.log(data);
  });
}).then((data) => {
  console.log(data);
});