【Promise】一篇文章详解Promise.all的用法

先看看我没用Promise之前离谱的使用情况：

我之前设计了一个批量生成证书的功能，将数据数组进行遍历，对每一个数据进行一个生成图片、盖章、上传服务器的操作。。。然后就按同步执行了，一个数据做完了以上步骤才开始做处理下一个数据，然后每个数据要经历的时间有7~8s，数据一多直接等裂开X~~X

我发现我虽然经常用axios进行异步请求，但是对异步的了解着实是浅。

先了解一下Promise

Promise是JavaScript中用于处理异步操作的一种对象。它代表了一个可能还未完成的操作，并提供了一种可以在操作成功或失败时执行代码的方法。Promise是ES6（ECMAScript 2015）引入的，并且已经成为现代JavaScript编程中的重要组成部分。

Promise的原理

Promise对象代表一个异步操作的最终完成（或失败）及其结果值。其对象的状态只能从待定变为成功或失败，一旦变为这两种状态之一，就不可再改变。

Promise的使用

1. 创建Promise对象。

当Promise的异步操作成功时，调用resolve函数；失败时，调用reject函数，以返回相关信息。

// 创建一个Promise对象，并在其中指定成功和失败的相关信息传递出去
let promise = new Promise((resolve, reject) => {
  
    let success = true;
    if (success) {
      resolve("操作成功信息");
    } else {
      reject("操作失败信息");
    }
});

2. 处理结果。

有了promise成功或失败的返回内容，当然要去获取到它。Promise对象提供了两个重要的方法来处理最终结果：then和catch。

then方法：用于处理成功的结果。它接受两个回调函数作为参数，第一个用于处理操作成功的情况，第二个用于处理操作失败的情况。

promise.then(
  (result) => {
    console.log(result); // "操作成功信息"
  },
  (error) => {
    console.error(error); // "操作失败信息"
  }
);

catch方法：用于处理失败的结果。它是then的语法糖，只处理操作失败的情况。

因此也有另一种写法：

promise
  .then((result) => {
    console.log(result); // "操作成功信息"
  })
  .catch((error) => {
    console.error(error); // "操作失败信息"
  });

3. Promise.all的作用

Promise.all接受一个Promise数组，各个并行执行，并且不会等待其他 Promise 的完成

let promiseList=[];

promiseList.push(promise1)
promiseList.push(promise2)
promiseList.push(promise3)

await Promise.all(promiseList)

最终使用await等待所有Promise执行完毕。

回到开头我的批量生成证书问题，它已经迎刃而解了，就是用Promise.all让其异步操作。

希望能帮到你！