添加链接
link管理
链接快照平台
  • 输入网页链接,自动生成快照
  • 标签化管理网页链接

构造函数接收一个函数作为参数,而这个函数的参数 resolve reject 都是函数。 调用 resolve 可以使这个 promise 的状态从 初始状态(pending) 变为 成功状态(fulfilled) 。 调用 reject 可以使这个 promise 的状态从 初始状态(pending) 变为 失败状态(rejected)

    console.log(
     new Promise((resolve, reject) => { resolve() })
   /*打印结果
   [[Prototype]]: promise
   [[promiseState]]: "fulfilled" 注意看这里的状态
   [[promiseResult]]: undefined
   console.log(
     new Promise((resolve, reject) => { reject() })
   /*打印结果
   [[Prototype]]: promise
   [[promiseState]]: "rejected"  注意看这里的状态
   [[promiseResult]]: undefined

::: tip resolve()reject() 可以接收任何形式的参数,具体作用往下看

一个promise对象有一个.then方法,在promise对象的状态改变后触发。 then方法接收两个函数参数,分别对应 成功状态(fulfilled) 失败状态(rejected)

   new Promise((resolve, reject) => {
     resolve();
   }).then(
     (value) => {}, // 成功状态执行这个函数 value 就是 resolve 传来的参数
     (reason) => {} // 失败状态执行这个函数 reason 就是 reject 传来的参数
    new Promise((resolve, reject) => {
     resolve("成功");
   }).then(
     (value) => {
       console.log(value); // 成功
     (reason) => {
       console.log(reason); // 这里不会执行 因为调用的是resolve promise是成功状态
   new Promise((resolve, reject) => {
     reject("失败");
   }).then(
     (value) => {
       console.log(value); // 这里不会执行 因为调用的是reject promise是失败状态
     (reason) => {
       console.log(reason); // 失败

下面我们写一个正儿八经的promise

    new Promise((resolve, reject) => {
      //这里假装发起一个网络请求
      const res = request('123')
      if (res.ok) {
        resolve(res.data);// 成功返回数据
      } else {
        reject(res.error);// 失败返回错误
    }).then(
      (value) => {
        console.log(value); // 成功拿到数据
      (reason) => {
        console.log(reason); // 失败抛出错误

.then方法的返回值还是一个promise,返回值的状态等于调用者的状态,上代码。

   const res1 = new Promise((resolve, reject) => {
     resolve("成功"); // 变成成功状态
   }).then((value) => {
     console.log(value);
   const res2 = new Promise((resolve, reject) => {
     reject("失败"); // 变成失败状态
   }).then((value) => {
     console.log(value);
   const res3 = new Promise((resolve, reject) => {
     // 什么都不做
   }).then((value) => {
     console.log(value);
   console.log(res1); // [[promiseState]]: "fulfilled"
   console.log(res2); // [[promiseState]]: "rejected"
   console.log(res3); // [[promiseState]]: "pending"

那么根据每个promise都有.then方法的定理,我们就可以实现链式调用。

    const res1 = new Promise((resolve, reject) => {
     resolve("成功"); 
   .then((value) => {}) //第一步处理
   .then((value) => {}) //第一步处理
   .then((value) => {}) //第三步处理

finally

finally 人如其名 不管promise的状态是变为成功还是失败它总会执行。

    new Promise((resolve, reject) => {
     resolve("成功");
   }).finally(() => {
     console.log("finally"); // finally
   new Promise((resolve, reject) => {
     reject("失败");
   }).finally(() => {
     console.log("finally"); // finally

async await

async 标识符写在函数的最开头,标识这个函数为异步函数。
await 写在一个promise前面,作用有两个,暂停当前代码执行,并返回resolve返回的值,话不多说上代码。 :::tip async await必须成对使用。

    async function ok() {
      const p = new Promise((resolve, reject) => {
        resolve("成功了");
      const res = await p;
      console.log(res); // 成功了

这里要注意,await会暂停当前函数内的代码执行,如果promise的状态没有变为成功,则会一直等待下面的代码不会执行。

    async function ok() {
      const p = new Promise((resolve, reject) => {});
      const res = await p;
      console.log("okok"); // 不会执行
    async function ok() {
      const p = new Promise((resolve, reject) => {reject()});
      const res = await p;
      console.log("okok"); // 不会执行

通过promiseasync await组合,我们可以顺序发起网络请求。

    async function ok() {
      // 假装 request()是接口
      const res1 = await request();
      const res2 = await request(res1);
      const res3 = await request(res2);

:::tip Promise构造函数是同步函数立即执行,then 和 finally 方法是 异步微任务。