Promise详解以及async和await的使用

扶苏1002

于 2024-02-05 18:10:08 发布

阅读量729

点赞数 23

分类专栏： ES6新特性文章标签： es6 javascript js Promise async await

本文链接：https://blog.csdn.net/qq_44741577/article/details/136045574

版权

ES6新特性专栏收录该内容

7 篇文章 0 订阅

订阅专栏

很多同学，对promise比较陌生，只是知道怎么用，无非就是.then().catch()，至于为什么这样用很多同学比较迷茫，网上很多介绍的都太理论化、抽象化，希望能通过这篇文章帮你深入了解一下promise的前因后果。

一、异步请求的痛点

下面的举例就以uniapp里面的网络请求uni.request()为例了，如果你做的是微信小程序wx.request()也是一样的，还有jQuery的ajax()，这些都是异步请求，通过success回调函数获取数据的，那有童鞋会问为什么不用vue的axios，因为axios网络请求已经封装promise了。

下面这个例子，三个异步请求存在依赖关系：异步2的请求参数，依赖于异步1的响应结果，异步3的请求参数，依赖于异步2的响应结果

onLoad() {
  this.getData()
},
methods: {
  getData() {
    // 获取分类列表
    uni.request({
      url: "https://ku.qingnian8.com/dataApi/news/navlist.php",
      success: (res) => {
        // 获取到一个分类的id，查询该分类下面的所有文章
        const id = res.data[0].id
        uni.request({
          url: "https://ku.qingnian8.com/dataApi/news/newslist.php",
          data: {
            cid: id
          },
          success: (res2) => {
            // 获取到一篇文章的id，根据文章id找到该文章下的评论
            const id = res2.data[0].id
            uni.request({
              url: "https://ku.qingnian8.com/dataApi/news/comment.php",
              data: {
                aid: id
              },
              success: (res3) => {
                // 该文章下面的所有评论
                console.log(res3);
              }
            })
          }
        })
      }
    })
  }
}

二、使用callback回调函数解决异步请求的痛点

onLoad() {
  this.getNavList((res) => {
    // 获取到一个分类的id，查询该分类下面的所有文章
    const id = res.data[0].id
    this.getNewsList(id, (res2) => {
      // 获取到一篇文章的id，根据文章id找到该文章下的评论
      const id = res2.data[0].id
      this.getCommentList(id, (res3) => {
        console.log(res3);
      })
    })
  })
},
methods: {
  // 第一个异步步请求---获取分类列表
  getNavList(callback) {
    uni.request({
      url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
      success: (res) => {
        callback(res)
      }
    })
  },
  // 第二个异步步请求---根据分类id查询该分类下面的所有文章
  getNewsList(id, callback) {
    uni.request({
      url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
      data: {
        cid: id
      },
      success: (res) => {
        callback(res)
      }
    })
  },
  // 第三个异步步请求---根据文章id查询该文章下面的所有评论
  getCommentList(id, callback) {
    uni.request({
      url: "https://ku.qingnian8.com/dataApi/news/comment.php",
      data: {
        aid: id
      },
      success: (res3) => {
        // 找到该文章下面的所有评论
        callback(res3);
      }
    })
  },
}

三、使用Promise解决异步请求的痛点

onLoad() {
  // 3. 使用Promise封装
  this.getNavList().then((res) => {
    // 获取到一个分类的id，查询该分类下面的所有文章
    const id = res.data[0].id
    return this.getNewsList(id)
  }).then((res2) => {
    // 获取到一篇文章的id，根据文章id找到该文章下的评论
    const id = res2.data[0].id
    return this.getNewsList(id)
  }).then((res3) => {
    console.log(res3);
  }).catch((error) => {
    // 以上三个异步请求的错误都会在最后一个catch函数里面去捕获
    console.log(error);
  })
},
methods: {
  // 第一个Promise异步步请求封装---获取分类列表
  getNavList() {
    return new Promise((resolve, reject) => {
      uni.request({
        url: 'https://ku.qingnian8.com/dataApi/news/navlist.php',
        success: (res) => {
          resolve(res)
        },
        fail: (error) => {
          reject(error)
        },
      })
    })
  },
  // 第二个Promise异步步请求---根据分类id查询该分类下面的所有文章
  getNewsList(id) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: 'https://ku.qingnian8.com/dataApi/news/newslist.php',
        success: (res) => {
          resolve(res)
        },
        fail: (error) => {
          reject(error)
        },
      })
    })
  },
  // 第三个Promise异步步请求---根据文章id查询该文章下面的所有评论
  getCommentList(id) {
    return new Promise((resolve, reject) => {
      uni.request({
        url: 'https://ku.qingnian8.com/dataApi/news/comment.php',
        success: (res) => {
          resolve(res)
        },
        fail: (error) => {
          reject(error)
        },
      })
    })
  },
}

四、Promise的基本使用

Promise是一个构造函数，原型对象上有then、catch等方法。
在通过new创建Promise对象时，我们需要传入一个回调函数，我们称之为executor，这个回调函数会被立即执行，并且给传入另外两个回调函数resolve、reject；

// 1.写法一：
new Promise((resolve, reject) => {
  console.log("这里的代码立即执行");
  resolve(); // 当执行resolve方式时，会立即执行then中的回调函数
  // reject(); // 当执行reject方法时， 会执行catch中的回调函数
  // resolve 与 reject只能执行一个
  // 返回的时Promise对象
})
  .then(() => {
    console.log("成功的回调");
  })
  .catch(() => {
    console.log("失败的回调");
  });

// 2.写法二：
const promise2 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行！");
  // resolve();
  reject();
});

promise2
  .then(() => {
    console.log("成功的回调"); //resolve()
  })
  .catch(() => {
    console.log("失败的回调"); //reject()
  });

五、Pormise的三种状态

Promise使用过程可以划分成三个状态：

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

注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
但是不会阻断后续代码执行，一般需要配合return使用

// 注意: Promise状态一旦确定下来, 那么就是不可更改的(锁定)
new Promise((resolve, reject) => {
  // pending状态: 待定/悬而未决的
  console.log("--------");
  reject(); // 处于rejected状态(已拒绝状态)
  resolve(); // 处于fulfilled状态(已敲定/兑现状态)
  console.log("++++++++++++");
}).then(
  (res) => {
    console.log("res:", res);
  },
  (err) => {
    console.log("err:", err);
  }
);

五、resolve的参数

5.1. 传入普通的值或对象

如果resolve传入一个普通的值或者对象，那么这个值会作为then回调的参数；

5.2. 传入一个Promise

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

5.3. 传入实现了then的对象

如果resolve中传入的是一个对象，并且这个对象有实现then方法，那么会执行该then方法，并且根据 then方法的结果来决定Promise的状态;

// 1.传入普通参数
const promise1 = new Promise((resolve, reject) => {
  console.log("这里的代码立即执行");
  resolve("传入字符串");
});
promise1.then((res) => {
  console.log(res);
});

// 2.传入Promise
const promise2 = new Promise((resolve, reject) => {
  console.log("aaaaaaaaaaaa");
  // 状态不是由这里决定的，而是由resolve中的Promise对象决定
  resolve(
    new Promise((resolve, reject) => {
      reject(); // 这里决定状态
    })
  );
});
promise2.then(
  (res) => {
    console.log(res); // 执行的不是这里的代码
  },
  (err) => {
    console.log("err", err); // 执行的是这里的代码
  }
);

// 3.传入实现了then的对象
const promise3 = new Promise((resolve, reject) => {
  console.log("asdf");
  const obj = {
    // 实现then方法，这个方法中也是resolve和reject参数
    then: (resolve, reject) => {
      reject("这里决定状态");
    },
  };
  resolve(obj); // 状态不是由这里决定，而是由传入的obj对象的then方法中的resolve和reject决定
});
promise3.then(
  (res) => {
    console.log("res", res);
  },
  (err) => {
    console.log("err", err); // err 这里决定状态  (执行这里的代码)
  }
);

六、Promise的实例方法

6.1. then方法

6.1.1. then的参数

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

then方法接受两个参数：

resolve的回调函数：当状态变成fulfilled时会回调的函数；
reject的回调函数：当状态变成reject时会回调的函数；

promise.then(
  (res) => {
    console.log("res", res);
  },
  (err) => {
    console.log("err", err);
  }
);
// 等价于
promise
  .then((res) => {
    console.log("res", res);
  })
  .catch((err) => {
    console.log("err", err);
  });

6.1.2. then被多次调用

// then方法多次调用 : 当then被多次调用时，每一个then中的回调函数都会被执行
// 所以以下代码会执行 3 次
const promise = new Promise((resolve, reject) => {
  resolve("aaaaaa");
});
promise.then((res) => {
  console.log("res1:", res);
});
promise.then((res) => {
  console.log("res2:", res);
});
promise.then((res) => {
  console.log("res3:", res);
});

6.1.3. then的返回值

返回一个普通值；
返回一个Promise
返回一个实现了then方法的对象(即thenable对象)；

// then的返回值  then的返回值都是一个参数
// 1.返回一个普通值
// 当返回一个普通值时,这个普通值会被最为新new的Promise的resolve的参数,所以then返回的是一个Promise
const promisea = new Promise((resolve, reject) => {
  resolve("aaa");
});
promisea
  .then((res) => {
    // 这里的第一个then方法是promisea的then方法
    return "bbb"; // 相当于: new Promise((resolve,reject) => {resolve('aaa)}) 即这个普通值会被作为新的Promise的resolve值
  })
  .then((res) => {
    // 这里的第二个then是第二个Promise(即 new Promise((resolve,reject) => {resolve('aaa)}) )的then方法,而不是promisea的then方法
    console.log(res); // bbb
    // 当然这里还可以有返回值
  });

// 2.返回值是一个Promise对象时
const promiseb = new Promise((resolve, reject) => {
  resolve("aaa");
});
promiseb
  .then((res) => {
    // 这里的then方法是promiseb的then方法
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        resolve("bbb");
      }, 3000);
    });
  })
  .then((res) => {
    // 这里的then也是new的新的Promise的then方法,而不是promiseb的
    console.log(res); // 三秒后输出  bbb
  });

// 3.当返回值是一个实现了then方法的对象时
const promisec = new Promise((resolve, reject) => {
  resolve("aaa");
});
promiseb
  .then((res) => {
    // 这里的then方法是promiseb的then方法
    const obj = {
      then: function (resolve, reject) {
        resolve("bbb");
      },
    };
    return obj; // 新的promise的状态有obj对象里的resolve或reject决定
  })
  .then((res) => {
    console.log(res); // bbb
  });

6.2. catch方法

catch方法也是Promise对象上的一个方法：它也是放在Promise的原型上的 Promise.prototype.catch。

6.2.1. catch的基本使用

const promiseb = new Promise((resolve, reject) => {
  // reject("promiseb")
  resolve("resolve");
});
promiseb
  .then((resolve) => {
    console.log("resolve");
    return new Promise((resolve, reject) => {
      reject("新的promise");
    });
  })
  .catch((err) => {
    // 这里的catch 首先 对应的是promiseb的reject，而不是then后新的promise，但当promiseb调用的是reject时，如果then中新的promise调用了reject，会执行这里的catch
    console.log(err);
  });

6.2.2. catch被多次调用

当某个promise对象有多个catch，调用reject或抛出异常时，每一个catch都会被执行。

const promisea = new Promise((resolve, reject) => {
  // 当调用reject或抛出异常时，都会执行then中的错误捕获的方法
  throw new Error("错误");
  // reject();
});
promisea.then(undefined, (error) => {
  console.log("err", error);
});
// catch相当于then的错误的捕获的语法糖
// 当有promisea有多个catch时，每一个都会被执行调用
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
});
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
});
promisea.catch(() => {
  console.log("相当于时then错误捕获的语法糖");
});

6.2.3. catch的返回值

和then返回值一样，返回的都是promise。

const promisec = new Promise((resolve, reject) => {
  // resolve("promisec")
  reject("promisec");
});

promisec
  .then((resolve) => {
    console.log("promisec：", resolve);
  })
  .catch((err) => {
    console.log("err:", err);
    return "catch"; // 这里和then的返回值一样，会生成新的Promise，如果新的Promise中调用resolve则会执行下一个then方法，如果调用reject则会执行catch方法
  })
  .then((resolve) => {
    console.log("new Promise:", resolve); // new Promise: catch
  })
  .catch((err) => {
    console.log("err:", err);
  });

6.3. finally方法

finally是在ES9中新增的一个特性：表示无论Promise对象无论变成fulfilled还是reject状态，最终都会被执行的代码。

const promised = new Promise((resolve, reject) => {
  resolve("resovle");
});
promised
  .then((resovle) => {
    console.log(resovle);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log("最终都会执行");
  });

七、Promise的类方法

7.1. resolve方法

then、catch、finally都是promise的实例方法，resolve是Promise的类方法。

resolve的参数：

普通值；
promise
thenable

Promise.resolve("tjx");
// 等价于
const promisee = new Promise((resolve, reject) => {
  resolve("tjx");
});

// promise可以传入三种参数：1.普通的参数 2.promise 3.实现了then方法的对象
// 1.普通参数
const promisep = Promise.resolve("adf");
promisep
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });
// 2.promise
const promisepro = Promise.resolve(
  new Promise((resolve, reject) => {
    resolve("sfa");
  })
);
promisepro
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });
// 3.thenable
const promiseable = Promise.resolve({
  then: function (resolve, reject) {
    resolve();
  },
});
promiseable
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err);
  });

7.2. reject方法

reject方法类似于resolve方法，只是会将Promise对象的状态设置为reject状态;
Promise.reject传入的参数无论是什么形态，都会直接作为reject状态的参数传递到catch的。

Promise.reject("reject");
// 相当于
const promisez = new Promise((resolve, reject) => {
  reject("reject");
});

// reject的参数无论是什么都只是修改promise的reject状态并把这个参数传递过去
const promisex = Promise.reject(
  new Promise((resolve, reject) => {
    resolve("resovle");
  })
);
promisex
  .then((resolve) => {
    console.log(resolve);
  })
  .catch((err) => {
    console.log(err); // promise对象
  });

7.3. all方法

all方法也是promise的类方法，他的作用是将多个Promise包裹在一起形成一个新的Promise；
新的Promise状态由包裹的所有Promise共同决定：

当所有的Promise状态变成fulfilled状态时，新的Promise状态为fulfilled，并且会将所有Promise的返回值组成一个数组；
当有一个Promise状态为reject时，新的Promise状态为reject，并且会将第一个reject的返回值作为参数；

const promise1 = new Promise((resolve, reject) => {
  resolve("1");
});
const promise2 = new Promise((resolve, reject) => {
  resolve("2");
});
const promise3 = new Promise((resolve, reject) => {
  // resolve("3")
  reject("err");
});
Promise.all([promise1, promise2, promise3, "这里也可以是其他类型参数"])
  .then((resolve) => {
    console.log(
      "当all参数中所有的promise的resolve时，执行这里的函数，resolve：",
      resolve
    ); // 当all参数中所有的promise的resolve时，执行这里的函数，resolve： [ '1', '2', '3', '这里也可以是其他类型参数' ]
  })
  .catch((err) => {
    console.log(
      "当all的参数中所有的promise中有一个reject时，就执行这里的代码就，error：",
      err
    ); // 当all的参数中所有的promise中有一个reject时，就执行这里的代码就，error： err
  });

7.4. allSettled方法

all方法有一个缺陷：当有其中一个Promise变成reject状态时，新Promise就会立即变成对应的rejected状态。那么对于resolved的，以及依然处于pending状态的Promise，我们是获取不到对应的结果的；

在ES11中，添加了新的API Promise.allSettled：该方法会在所有的Promise都有结果（settled），无论是fulfilled，还是rejected时，才会有最终的状态；并且这个Promise的结果一定是fulfilled的；

const promise4 = new Promise((resolve, reject) => {
  resolve("1");
});
const promise5 = new Promise((resolve, reject) => {
  resolve("2");
});
const promise6 = new Promise((resolve, reject) => {
  // resolve("3")
  reject("err");
});
Promise.allSettled([promise4, promise5, promise6])
  .then((resolve) => {
    console.log(resolve); // 输出为：
    // [
    //   { status: 'fulfilled', value: '1' },
    //   { status: 'fulfilled', value: '2' },
    //   { status: 'rejected', reason: 'err' }
    // ]
  })
  .catch((err) => {
    console.log(err); // 只会进入成功的回调，不会进入这里失败的回调
  });

7.5. race方法

如果有一个Promise有了结果，我们就希望决定最终新Promise的状态，那么可以使用race方法：
race是竞技、竞赛的意思，表示多个Promise相互竞争，谁先有结果，那么就使用谁的结果；

const promise7 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("7");
  }, 3000);
});
const promise8 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("8");
  }, 1000);
});
const promise9 = new Promise((resolve, reject) => {
  setTimeout(() => {
    // resolve("9")
    reject("err");
  }, 500);
});
Promise.race([promise7, promise8, promise9])
  .then((resolve) => {
    console.log(resolve); // 返回接收到的第一个resolve，如果是reject则执行catch中的代码
  })
  .catch((err) => {
    console.log(err);
  });

7.6. any方法

any方法是ES12中新增的方法，和race方法是类似的：
any方法会等到一个fulfilled状态，才会决定新Promise的状态；
如果所有的Promise都是reject的，那么也会等到所有的Promise都变成rejected状态，然后再执行catch中的代码，那么会报一个AggregateError的错误；

const promise10 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("7");
  }, 3000);
});
const promise11 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("8");
  }, 1000);
});
const promise12 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject("err");
  }, 500);
});
Promise.any([promise10, promise11, promise12])
  .then((resolve) => {
    console.log(resolve); //
  })
  .catch((err) => {
    console.log(err);
  });
// 首先出现的是err，但是是reject，所以继续等待第一个resolve，出现了第一个resolve就执行then中代码，如果全是reject，则会等到所有的reject只会再执行reject，然后报一个错

八、async

8.1. 异步函数 async

async关键字用于声明一个异步函数。
异步函数的返回值是promise。

// 写法一
async function foo() {}
// 写法二
const foo2 = async function () {};
// 写法三
const foo3 = async () => {};
// 写法四
class Person {
  async foo() {}
}

8.2. 异步函数执行流程

异步函数的内部代码执行过程和普通的函数是一致的，默认情况下也是会被同步执行。
异步函数有返回值时，和普通函数会有区别：
情况一： 异步函数也可以有返回值，但是异步函数的返回值会被包裹到Promise.resolve中；
情况二： 如果我们的异步函数的返回值是Promise，Promise.resolve的状态会由Promise决定；
情况三： 如果我们的异步函数的返回值是一个对象并且实现了thenable，那么会由对象的then方法来决定；
如果我们在async中抛出了异常，那么程序它并不会像普通函数一样报错，而是会作为Promise的reject来传递；

// 异步函数与普通函数的区别--返回值
async function foo() {
  console.log("foo function start-");
  console.log("中间件");
  console.log("foo function end-");

  // 1.返回一个值，这个值作为新的promise的resolve的参数

  // 返回thenable
  // return {
  //   then: function(resolve, rejest) {
  //     resolve('sfafsd')
  //   }
  // }

  // 返回Promise
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve("hhhhhhhhh");
    }, 2000);
  });
}

// 异步函数的返回值一定是一个Promise
const promise = foo();
promise.then((res) => {
  console.log("promise then function exec:", res);
});

// 异步函数与普通函数的区别--异常处理
async function foo() {
  console.log("foo function start");
  console.log("中间代码");
  // 异步函数中的异常，会被作为异步函数返回的Promise的reject值
  throw new Error("error message");
  console.log("foo function end");
}
foo().catch((err) => {
  console.log("err", err);
});
console.log("后续代码");

九、await

async函数另外一个特殊之处就是可以在它内部使用await关键字，而普通函数中是不可以的。

await关键字有什么特点呢？

通常使用await是后面会跟上一个表达式，这个表达式会返回一个Promise；
那么await会等到Promise的状态变成fulfilled状态，之后继续执行异步函数；
如果await会等到Promise的状态为rejected状态，则后面代码不会执行

// 1.awiat跟上表达式
function requestData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      // resolve(12)
      reject(11);
    }, 2000);
  });
}

// async function foo() {
//   const res1 = await requestData() // 可以把这条代码到下一个await之前的代码看出then中处理成功的代码
//   // 当await返回为失败状态时，运行报错，后面代码不执行，因为没有写失败时的处理代码
//   console.log("后面代码1", res1);
//   console.log("后面代码2");
//   console.log("后面代码3");

//   const res2 = await requestData()
//   console.log("res2后面的代码", res2);
// }
// foo()

// 2.reject值
async function foo() {
  const res1 = await requestData();
  console.log("res1", res1);
}
foo().catch((err) => {
  console.log("err:", err); // err: 11
});

扶苏1002

关注

23
点赞
踩
9

收藏

觉得还不错? 一键收藏
0
评论
Promise详解以及async和await的使用

很多同学，对promise比较陌生，只是知道怎么用，无非就是，至于为什么这样用很多同学比较迷茫，网上很多介绍的都太理论化、抽象化，希望能通过这篇文章帮你深入了解一下promise的前因后果。
复制链接

扫一扫