龙空技术网

前端vue中多个异步请求按顺执行方法

爱分享的程序员521 735

前言:

目前咱们对“异步请求的方式”大致比较注重,我们都想要学习一些“异步请求的方式”的相关知识。那么小编同时在网络上汇集了一些关于“异步请求的方式””的相关文章,希望我们能喜欢,看官们一起来了解一下吧!

旧英语词典页带单词邮编的关闭Close up of old English dictionary

我们开发中经常会遇到这种情况,就是前一个请求得到返回结果之后下一个请求才能执行的需求,由于我们现在的请求方式多是异步求情,所以我们写一个方法进行多个异步请求按序执行。

首先我们模拟两个请求,后面按照顺序调用:

test1() {	return () => new Promise((resolve, reject) => {		//模拟异步任务		getApi1().then(res=>{			resolve(res.data);		}) 	})},test2() {	return () => new Promise((resolve, reject) => {		//模拟异步任务		getApi2().then(res=>{			resolve(res.data);		}) 	})}// 其中,我们需要test1方法执行完之后在执行test2方法,// getApi1、getApi2是我们项目中需要的请求接口,根据自己的具体情况进行替换

接下来我们上按需执行队列方法:

// 执行队列getResult(arr,cb) {	async function queue(arr) {		let res = []		for (let fn of arr) {			var data= await fn();			res.push(data);		}		return await res	}	queue(arr).then(data => {		cb(data)	})}// 我们通过回调的方式(cb)返回我们接口结果

调用示例:

// 调用方法  this.getResult([this.test1(),this.test2()],(data)=> {	console.log(data)  // 返回data是一个数组,其中包括我们两个接口的返回值data[0],data[1]})

标签: #异步请求的方式