先看看我没用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让其异步操作。
希望能帮到你!