Promise.allSettled()基础+在上传中的应用

promise就不介绍了，来看这篇文章的js基础肯定都是有的

直接上干货：

Promise.allSettled() 方法以 promise 组成的可迭代对象作为输入，并且返回一个 Promise 实例。当输入的所有 promise 都已敲定时（包括传递空的可迭代类型），返回的 promise 将兑现，并带有描述每个 promsie 结果的对象数组。

哈哈，看不懂了吧，那我来解释一下：

给这个allSettled传递的参数是一个可迭代对象，一般都会传一个数组，然后这个数组里面的每一项就是一个个的promise。然后这个allSettled返回的也是一个数组，里面的每一项，就是代表着我传给他的每一项的promise所对应着的结果，是成功或者是失败。待会我会给你一个例子

至于这个可迭代对象，我简单讲讲

可迭代对象（Iterable）是一个实现了Symbol.iterator属性的对象，这个属性返回一个迭代器（Iterator）对象。迭代器对象知道如何遍历该对象中的元素，并且具有next()方法来返回序列中的下一个值。

在 JavaScript 中，可迭代对象包括 Array、String、Map、Set 等。这些对象都实现了Symbol.iterator属性，因此可以使用for...of循环或者使用迭代器来遍历其中的元素。

可以使用迭代器的next()方法来逐个访问可迭代对象的元素，每次调用 next() 方法会返回一个包含 value 和 done 两个属性的对象，其中 value 表示迭代器当前返回的值，done 表示是否已经到达序列的末尾。

继续继续，我直接给你一个例子：

const promise1 = Promise.resolve(3);
const promise2 = new Promise((resolve, reject) => setTimeout(reject, 100, 'foo'));
const promises = [promise1, promise2];

Promise.allSettled(promises).
  then((results) => results.forEach((result) => console.log(result.status)));

// Expected output:
// "fulfilled"
// "rejected"

能看懂吗，如果没看懂我再解释一下。promise1是一个成功的promise；promise2是一个失败的promise。所以他们的结果对应的也就是fulfilled和rejected。

该方法的应用场景主要有以下两个：

并行处理多个Promise

Promise.allSettled() 方法可以用于并行处理多个Promise，等待所有的Promise都执行完成后再做进一步处理。这在处理多个独立的异步任务时非常有用。

例如，在前端开发中，可能需要同时请求多个API获取数据，使用 Promise.allSettled() 可以并行请求这些API，然后等待所有API都返回结果后再做下一步处理。

统一处理多个Promise的结果

Promise.allSettled() 方法返回一个Promise对象，该Promise对象的结果是一个包含所有Promise结果对象的数组。这个数组中的每个对象都表示对应的Promise的结果，可以通过遍历这个数组来统一处理多个Promise的结果。

我相信你肯定已经看懂了promise.allSettled的用法，那接下来我给你一个实战。

关于promise.allSettled在大文件分片上传中，同时上传多个分片的应用：

如果不了解大文件分片上传，可以去看看我的另外一篇博客，里面有详细介绍

const chunks = [/* 分片的 Promise 对象数组 */];
const chunkCount = 3; // 同时上传的分片数量

let uploaded = []; // 已上传成功的分片索引数组
let errors = []; // 上传失败的分片索引数组

function uploadChunks() {
  if (uploaded.length + errors.length === chunks.length) {
    console.log('本轮上传完成！可以根据errors数组的长度来判断是否开始走续传的逻辑');
    return;
  }

  const startFrom = uploaded.length + errors.length;
  const uploadPromises = chunks.slice(startFrom, startFrom + chunkCount);
  Promise.allSettled(uploadPromises).then((results) => {
    results.forEach((result, index) => {
      if (result.status === 'fulfilled') {
        uploaded.push(startFrom + index);
      } else {
        errors.push(startFrom + index);
        console.error(`第 ${startFrom + index + 1} 个分片上传失败：`, result.reason);
      }
    });
    uploadChunks();
  });
}

uploadChunks();

在这个示例代码中，我们使用了 uploaded 数组和 errors 数组来记录已经上传成功和上传失败的分片的索引。同时，我们使用了 slice 方法来切割 chunks 数组，以确保只上传还未上传的分片。最后，我们使用递归来实现不断上传分片的过程，直到所有分片都上传完成。

好了，我相信你已经明白了，晚安，宝！