彻底了解Promise的所有方法

前言：此文讲解了关于Promise的使用以及各类方法，参考与MDN官方文档，demo以及各种方法我已经使用并尝试了各类场景的使用，相信对Promise方法以及使用更加了解，也是为了及时跟上前端的步伐，技术在更新，时代在发展！

all

Promise.all() 静态方法接受一个数组对象作为输入，并且每一项都是一个Promise，并返回一个 Promise。如果包含非 promise 值，这些值将被忽略，但仍包含在返回的 promise 数组值中（如果该 promise 得到了兑现）。当所有输入的 Promise 都被兑现时，返回的 Promise 也将被兑现（即使传入的是一个空的可迭代对象），并返回一个包含所有兑现值的数组。如果输入的任何 Promise 被拒绝，则返回的 Promise 将被拒绝，并带有第一个被拒绝的原因。

js 复制代码

    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(2)
    const p3 = Promise.resolve(3)
    const p4 = Promise.resolve(4)
    Promise.all([p1, p2, p3, p4]).then((res) => {
      console.log(res, 'res'); // 1 2 3 5
    })

  //如下：它会返回一个带有报错为3的原因
    const p1 = Promise.resolve(1)
    const p2 = Promise.resolve(2)
    const p3 = Promise.reject(3) //报错
    const p4 = Promise.resolve(4)
    Promise.all([p1, p2, p3, p4]).then((res) => {
      console.log(res, 'res'); 
    })

allsettled

Promise.allSettled() 静态方接受一个数组对象作为输入，并返回一个单独的 Promise。当所有输入的 Promise 都已敲定时（包括传入空的可迭代对象时），返回的 Promise 将被返回，并带有描述每个 Promise 结果的对象数组。

如下图所示就是代码的返回结果，value为成功的结果，reason为失败的结果。status为执行状态

js 复制代码

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) =>
  setTimeout(reject, 100, 'foo'),
);
const promise3 = 3 // 虽然它不会被处理 ，但是他也会被返回同时带上结果和状态
const promises = [promise1, promise2,promise3];

Promise.allSettled(promises).then((results) =>
  // result会返回一个带有状态和结果的对象
  
  results.forEach((result) => console.log(result.status)),
);

any：

Promise.any() 静态方法接受一个数组对象作为输入，并返回一个 Promise。当输入的任何一个 Promise 兑现时，这个返回的 Promise 将会兑现，并返回第一个 兑现的值（只会返回一个值）。当所有输入 Promise 都被拒绝（包括传递了空的可迭代对象）时，它会以一个包含拒绝原因数组的 AggregateError 拒绝。该方法返回第一个的值。该方法忽略所有被拒绝的 Promise，直到第一个被兑现的 Promise。

js 复制代码

    const promise2 = new Promise((resolve,reject) => setTimeout(resolve, 500, 'quick'));
    const promise3 = new Promise((resolve,reject) => setTimeout(resolve, 500, 'slow'));

    const promises = [ promise3, promise2];

    Promise.any(promises).then((value) => {
      console.log(value); // quick
    })

race：

Promise.race() 静态方法接受一个数组对象作为输入，并返回一个 Promise。这个返回的 promise 会随着第一个 promise 的状态异步敲定 。如果第一个敲定的 promise 被兑现，那么返回的 promise 也会被兑现；如果第一个敲定的 promise 被拒绝，那么返回的 promise 也会被拒绝。如果传入的 iterable 为空，返回的 promise 就会一直保持待定状态。如果传入的 值 非空但其中没有任何一个 promise 是待定状态，返回的 promise 仍会异步敲定（而不是同步敲定）。

js 复制代码

// 传入一个已经解决的 Promise 数组，以尽快触发 Promise.race。
const resolvedPromisesArray = [Promise.resolve(33), Promise.resolve(44)];

const p1 = Promise.race(resolvedPromisesArray);
// 立即打印 p 的值
console.log(p1);

// 使用 setTimeout，我们可以在堆栈为空后执行代码
setTimeout(() => {
  console.log("堆栈现在为空");
  console.log(p1);
  new Promise(() => {
    console.log(1213);
  })
}, 1000);
console.log(13123);

withResolvers：

首先来说一下这个api解决了什么问题：

解决和拒绝函数现在与 Promise 本身处于同一作用域，而不是在执行器中被创建和一次性使用，这句话可能读起来稍有些难理解，但是接下来看这个demo我们就知道了

js 复制代码

#再和下面的代码对比看看其相似之处，是不是完全等同
#这个方法相当于主动帮我们把成功和失败的回调提取了出来，在我们合适的地方进行执行
let { promise, resolve, reject } = Promise.withResolvers()

Promise.withResolvers() 完全等同于以下代码：

js 复制代码

let resolve, reject;
const promise = new Promise((res, rej) => {
  resolve = res;
  reject = rej;
});

then、catch、finally：三者均为Promise的实例方法

then：当Promise的状态为fulfilled即执行返回结果

catch：当Promise的状态为rejected即执行catch并抛出异常

finally：无论Promise的状态为成功还是失败 finally都会执行

js 复制代码

// then
const p1 = new Promise((resolve, reject) => {
  resolve("成功！");
  // 或
  // reject(new Error("错误!"));
});

p1.then(
  (value) => {
    console.log(value); // 成功！
  },
);

// catch
const promise1 = new Promise((resolve, reject) => {
  throw new Error('Uh-oh!');
});
promise1.catch((error) => {
  console.error(error);
});

// finally 
let isLoading = true;
fetch(myRequest)
  .then((response) => {
    const contentType = response.headers.get("content-type");
    if (contentType && contentType.includes("application/json")) {
      return response.json();
    }
    throw new TypeError("Oops, we haven't got JSON!");
  })
  .then((json) => {
    /* 进一步处理 JSON */
  })
  .catch((error) => {
    console.error(error); // 这行代码也可能抛出错误，例如：when console = {}
  })
  .finally(() => {
    isLoading = false;
  });

结语：此文介绍了目前所有Promise的方法以及使用方法，希望学以致用，跟上步伐，每一个新知识出来都有他一定的道理以及概念，继续加油，更多关于Promise的详细介绍可以直接条去MDN官方文档查看