Promise 基本使用

通过构造函数声明,传入一个回调函数,并且被立即执行, 这个回调函数被称为 executor, executor 接受两个回调函数

const promise = new Promise((resolve, reject) => {
    console.log("立即执行");
});

当promise执行成功后 回调 resolve, 失败 回调 reject

如果成功了(调用resovle),会回调then方法传入的回调函数。

promise.then(() => {
    console.log("成功的回调");
})

如果失败(调用reject), 会回调 catch 传入的回调函数。

promise.catch(() => {
    console.log("错误的回调");
});

根据 上面的基本使用:我们可以知道,promise 其实是一种约定(机制),当执行成功后会回调 resolve, 并执行 then传入的回调方法,当执行失败的时候 回调 reject, 并执行 catch 传入的方法。(then 和 catch 都会返回一个Promise)

Promise 的三种状态

Promise状态一旦被修改就不会改变了。

待定(pending):初始状态,既没有兑现,也没有拒绝。

  • 当执行executor中的代码时,处于该状态。

已兑现(fulfilled):意味着操作成功完成。

  • 执行了resolve时,处于该状态。

已拒绝(rejected):意味着操作失败。

  • 执行reject时,处于该状态。
const promise = new Promise((resolve, reject) => {
  // pending 状态

  resolve(111); // 变成 fulfilled;

  reject(111); // 变成 rejected
});

::: note

当 then(会返回新的Promise) 传入的回调函数中抛出错误将会变成(新创建的Promise状态)rejected

:::

Promise resolve 参数

  • 普通的值或者对象 pending --> fulfilled

  • 传入一个Promise

    • 那么当前的Promise 的状态,会由传入的Promise来决定。

    • // 传入Promise
      new Promise((resolve, reject) => {
        resolve(new Promise((resolve, reject) => {
          resolve("移交状态到当前状态");
        }))
      }).then(res => {
        console.log(res); // 移交状态到当前状态
      })
      
  • 传入一个对象,并且这个对象有实现then方法(并且这个对象是实现了thenable)

    • 那么也会执行该then方法,并由该then方法决定后续状态(这个then相当于一个 executor会被立即执行)

    • // 传入一个实现了 then 方法的对象,并由then方法决定后续状态, then 方法会被自动执行, 相当于 executor
      new Promise((resolve, reject) => {
        resolve({
          then: function(resolve, reject) {
            resolve("包含then方法的对象")
          }
        })
      }).then(res => {
        console.log(res); // 包含then方法的对象
      })
      

Promise then 方法

  • 同一个Promise 能够调用多次 then 方法

    • const promise = new Promise((resolve, reject) => {
          resolve(11);
      });
      
      promise.then(res => console.log(res));
      promise.then(res => console.log(res));
      promise.then(res => console.log(res));
      
  • then 方法的返回值 是一个 Promise

    • promise.then(res => {
          return "aaaa";  // 这里会被包裹成一个promis , new Promise((resolve) => resolve("aaaa"));
      }).then((res) => {
          console.log(res); // aaaa
          return "bbbb";
      }).thne((res) => {
          console.log(res); // bbbb
      n  });
      
  • 如果 then 返回的 是一个 new Promise, 那么 then 包裹返回值的Promise的状态将会被 new Promise, 决定。

    • const promise = new Promise((resolve, reject) => {
        resolve(1111);
      });
      
      promise.then(res => {
        return new Promise((resolve, reject) => {
          setTimeout(() => {
            resolve(1111);
          }, 3000);
        });
      }).then(res => {
        console.log(res); // 1111
      })
      
  • 如果返回是一个对象,并实现了 thenable,则包裹返回值的Promise 的状态也会被 对象中的then方法决定

    • promise.then(res => {
        return {
          then: function(resolve, reject) {
            resolve(222222);
          } 
        }
      }).then(res => {
        console.log(res);   // 2222222
      })
      

Promise reject 参数

  • 抛出异常也会,调用 错误处理 的回调方法。

    • const promise = new Promise((resolve, reject) => {
        throw new Error("Error");
      });
      
      promise
        .then((res) => {
          console.log(res);
        })
        .catch((err) => {
          // 这个方法被回调
          console.log(err);
        });
      
      

Promise catch 方法

用于捕获最先报错的Promise。

catch 方法也会返回一个 Promise 和then方法一样, 只要不抛出异常或代理的Promise不执行reject那么就是 fulfilled 状态

image-20220902153402041-1662280409363

Promise finally 方法

表示Promise 对象, 无论变成 fulfilled 还是 rejected 状态,最终都会被执行的代码(ES9)。

finally 也返回Promise 和 catch then 一样

const promise = new Promise((resolve, reject) => {
  throw new Error("Error");
});

promise
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  })
  .finally(() => {
    console.log("finally");  // finally
  });

Promise 类方法 resolve()

Promise.resolve(data) ; // 会返回有个, 状态为fulfilled的Promise

等价于

new Promise((resolve, reject) => {
    resolve(data);
});

这里的data传递的值,也和在 executor 函数中 resolve 传入的值一样的,具体可以看上面章节。

Promise 类方法 reject()

Promise.reject(data); // 返回一个 rejected 状态的promise

等价于

new Promise((resolve, reject) => {
  reject(data);  
})

这里的reject类方法,不会因为传入参数实现了 thenable 或 是Promise 而让参数决定其状态。

Promise 类方法 all()

用于等待一组promise 都变成 fulfilled 状态后回调then方法中的函数。

Promise.all([promise1, promise2, promise3, "aaaa"]).then(res => {
  console.log(res); // [ 111, 222, 333, 'aaaa' ]
});

注意: 在等待的过程中 某个 Promise 变成 rejected 状态(立即结束),那么此次返回的Promise状态为 rejected, 会回调 catch 的回调函数。并且把第一个 reject 的promise,传入的参数,传递到回调函数内

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(111);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(333);
  }, 1000);
});

Promise.all([promise1, promise2, promise3, "aaaa"])
  .then((res) => {
    console.log(res); // [ 111, 222, 333, 'aaaa' ]
  })
  .catch((err) => {
    console.log(err); // 111
  });

Promise 类方法 allSettled()

ES 11 新增方法,用于解决 all 方法,一个promise 变成 rejected 就导致新生成的 Promise 变成 rejected.

allSettled 该方法会在所有Promise都有结果(settled), 也就是说 promise 都不为 pendding 状态,才会最终状态,这个 方法 返回的Promise 的状态一定是,fulfilled.

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(111);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(333);
  }, 1000);
});

Promise.allSettled([promise1, promise2, promise3, "aaaa"])
  .then((res) => {
    console.log(res);
    /*
    	[
          { status: 'rejected', reason: 111 },
          { status: 'rejected', reason: 222 },
          { status: 'fulfilled', value: 333 },
          { status: 'fulfilled', value: 'aaaa' }
        ]
    */
  })
  .catch((err) => {
    console.log(err);
  });

Promise 类方法 race()

一组promise 进行比赛,谁先 从上图 pendding 变成 其他状态,其方法返回的Promise状态由第一个改变的promise状态决定。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(111);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(333);
  }, 1000);
});

Promise.race([promise1, promise2, promise3]).then((res) => {
  console.log(res);
}).catch(err => {
  console.log(err); // 111
})

Promise 类方法 any()

该方法会等待,promise组中 有一个fulfilled 才会,返回一个 fulfilled状态的Promise并回调传入的then中的回调函数,如果 promise组中不存在fulfilled状态,那么会等到所有promise执行完,返回一个状态为rejected的Promise,并回调错误处理函数。

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(111);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(333);
  }, 1000);
});
// any方法
Promise.any([promise1, promise2, promise3]).then(res => {
  console.log(res); // 333
});

全部为rejected的情况

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(111);
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(222);
  }, 1000);
});

const promise3 = new Promise((resolve, reject) => {
  setTimeout(() => {
    reject(333);
  }, 1000);
});
// any方法
Promise.any([promise1, promise2, promise3])
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err.errors); // [ 111, 222, 333 ]
  });