Promise、async、await用法——前端异步串行执行,循环串行执行

本文是作者开发后的应用总结,不赘述promise、async基础。介绍了promise基础用法实现异步函数串行执行,循环内异步Promise用法借助Promise.all函数,还讲解了async、await用法,强调await需在async函数内,建议与promise连用,并举例实现循环内异步功能。

摘要生成于 C知道 ,由 DeepSeek-R1 满血版支持, 前往体验 >

前言

本文只是个人因需求在开发后的总结,更偏向于应用方面,对于promise、async的基础就不赘述了。相关文章网络上也很多,有需要的朋友也可以参考一下,建议有一点点相关知识后再阅读更容易理解。

1.先热下身—promise的基础用法—异步函数串行执行
其实就算不使用promise,通过在异步函数里嵌套下一个要执行的异步函数也可以达到同样的效果。但使用promise代码更灵活,代码可读性也好些。

/**1.promise基础用法**/
    function test(index,waitTime) {
	   var p = new Promise(function(resolve,reject){
	     setTimeout(()=> {
          console.log('test方法执行' + index);
		  resolve('promise返回数据' + index);
        }, waitTime);
	   });
	   return p;
	}
	
    
	test(1,2000).then((data) => {
	    console.log(data);
		return test(2,100);
	}).then((data) => {
	    console.log(data);
	});

执行结果
可保证串行执行,方法一必定在方法二前执行。
在这里插入图片描述

2.循环内异步Promise用法

很多时候,循环里面都有异步事件,但我们想要得到所有循环的异步事件返回后,再执行之后的方法:
PS:这里涉及到Promise.all(Array)函数,该函数会在Array执行完,才执行then

function promiseFunc(index) {
	   var p = new Promise((resolve,reject) => {
	       setTimeout(() => {
		       resultArr.push(index);
			   resolve();
		   },2500);
	   });
	   return p;
	}
	
	var resultArr = [];
	var promiseArr = [];
	for(var i = 0 ; i < 10 ; i++) {
	    promiseArr.push(promiseFunc(i));
	}
	Promise.all(promiseArr).then(() => {
	    console.log('最终结果' + resultArr);
	});

执行结果
在这里插入图片描述

3.async、await用法

1.await必须在async声明的函数内,否则是错误的语法。
2.由于使用async、await主要为了控制异步执行顺序,并且async函数的返回是一个promise对象,所以一般建议跟promise连用

就举个栗子——通过async/await,实现上面循环内异步功能

function promiseFunc2(index) {
    var p = new Promise(function(resolve,reject){
	     setTimeout(()=> {
          console.log('test2方法执行' + index);
		  resolve('promise2返回数据' + index);
        }, 2000);
	   });
	   return p;
}

//async返回的是promise对象
async function demoAsyn() {
    let res1 = await promiseFunc2(1);
	let res2 = await promiseFunc2(2);
	let res3 = await promiseFunc2(3);
	return res1 + res2 + res3;
}
demoAsyn().then((res) => {
    console.log(res);
});

执行结果
在这里插入图片描述

### PromiseAsync/Await 的区别及其适用场景 #### 基本概念 Promise 是一种用于处理异步操作的对象,它表示一个最终会完成或者失败的操作的结果[^1]。Async/await 则是基于 Promise 构建的一种语法糖,旨在简化复杂的嵌套回调函数和链式调用的可读性和维护性。 #### 主要差异 1. **语法复杂度** - 使用 `Promise` 需要显式地通过 `.then()` 方法来处理成功的情况以及通过 `.catch()` 来捕获错误。 ```javascript someFunctionReturningPromise() .then(result => { console.log('Success:', result); }) .catch(error => { console.error('Error:', error); }); ``` - 而 `async/await` 提供了一种更接近同步代码风格的方式来编写异步逻辑,使得代码更加直观易懂。 ```javascript try { const result = await someFunctionReturningPromise(); console.log('Success:', result); } catch (error) { console.error('Error:', error); } ``` 2. **错误处理机制** - 在 `Promise` 中,错误通常由 `.catch()` 处理,但如果忘记添加 `.catch()` 或者未正确传递错误,则可能导致未被捕获的异常[^3]。 - 对于 `async/await`,可以利用传统的 `try...catch` 结构来进行统一的错误管理,这种方式对于开发者来说更为熟悉且不易遗漏错误处理部分。 3. **并发执行支持** - 当多个独立的任务需要并行运行时,`Promise.all([])` 可以很好地满足需求,因为它允许一次性等待所有的承诺都得到解决后再继续下一步动作[^4]。 ```javascript const results = await Promise.all([promise1, promise2]); console.log(results); // 输出两个结果组成的数组 ``` - 如果采用单独的 `await` 表达式依次等候各个任务结束的话,那么这些任务实际上是按顺序串行完成而非真正意义上的同时启动。 4. **调试体验** - 由于 `async/await` 更贴近常规流程控制语句的形式,在现代浏览器环境下能够提供更好的堆栈跟踪信息以便定位问题所在位置;相比之下追踪层层嵌套`.then/.catch`链条中的具体哪一步出了差错可能会稍微麻烦一点。 #### 应用场合建议 - 若项目里存在大量相互依赖关系紧密的连续型异步请求序列,“async/await”的简洁写法无疑会让整个过程显得条理清晰很多; - 然而当面临多路数据源需同步加载完毕才能进一步加工展示的情形下(比如图片预载入列表),则更适合运用到`Promise.all`这样的批量解决方案上。 ```javascript // 示例:使用 async/await 进行串行化操作 const fetchDataSequentially = async () => { const firstData = await fetchFirstResource(); const secondData = await processAndFetchSecond(firstData); return computeFinalResult(secondData); }; // 示例:使用 Promise.all 实现并行获取资源 const fetchDataInParallel = () => { return Promise.all([ fetch('/api/resource1'), fetch('/api/resource2') ]).then(([response1, response2]) => ({ resource1: response1.json(), resource2: response2.json() })); }; ```
评论 1
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值