原

js 多个异步方法同步请求,等所有请求都完成后在执行。vue 请求多个接口一起返回。等待多个接口同时返回

2032人阅读 2024/8/16 14:53 总访问：754926 评论：0 收藏：0 手机

分类: 前端

[TOC]

### 用Promise.all就行了， 比如：
```
return Promise.all([
    ac.getEvalData(),
    ac.getLabData(),
    ac.getProdData()
])
```
**等待多个接口请求返回后在执行的逻辑可以这样写：**
```
return Promise.all([
    ac.getKeyFocusLabRoomTeacher(),
    ac.getKeyFocusEvalTeacher(),
]).then((res: any) =>{
    console.log("接口请求的数据都回来了",res)
})
```
方法里边就是请求的接口
```
const ac = {
    getKeyFocusLabRoomTeacher: function () {
        return Http.get('/labroom/api/TeacherMiniProgram/GetKeyFocusTeacher', { StdetailID: state.stid, IncludeAll: false }).then((res: any) => {
            console.log("实验老师重点关注数据：", res)
            state.teachingDynamics = res.data
        })
    },
    getKeyFocusEvalTeacher: function () {
        return Http.get('/evaluation/api/Report/GetWarningClassCourseListByTeacher', { STID: state.stid }).then((res: any) => {
            console.log("评估老师重点关注数据：", res)
            // state.teachingDynamics = res.data
        })
    }
}
```
这样写的话Promise.all里边的then是拿不到这两个请求的返回值的，还要单独处理一下，不过这两个接口都有独立的数据赋值，这样其实也可以在Promise.all的then里边去一起处理数据，其实就是需要那一个时间点，就是多个接口请求完成之后的一个时间点。

### 这样使用也行，各自里边的方法直接拿到返回值，然后在return回去，然后在Promise.all的then里边就可以拿到这两个异步请求的返回值了

调用：
```
	Promise.all([
		GetEvalStatisticsByCourseIds(evalIds),
		GetLabRoomStatisticsByCourseIds(labRoomIds),
	]).then((res: any) =>{
	    // 这里边就可以拿到这两个异步请求的返回值了，就可以在这里边进行处理了
		console.log("接口请求的数据都回来了",res)
	})
```

各自里边的方法直接拿到返回值
```
	const GetEvalStatisticsByCourseIds = async (_courseIds:Array<string>)=>{
		let url = '/evaluation/api/ProjectTeach/GetStuCourseCompleteReps'
		const result: any = await request.post(url,_courseIds)
		// 拿到返回值，在return 
		return result
	}

	const GetLabRoomStatisticsByCourseIds = async (_courseIds:Array<string>)=>{
		let url = '/labroom/api/Statistics/GetStudentStatisticsByCourseIds'
		const result: any = await request.post(url,{courseIds:_courseIds})
		// 拿到返回值，在return 
		return result
	}
```

欢迎加群讨论技术，1群：677373950(满了，可以加，但通过不了)，2群：656732739。有需要软件开发，或者学习软件技术的朋友可以和我联系~(Q:815170684)

👈{{preArticle.title}}

👉{{nextArticle.title}}

评价

只若初见

真诚，善良，美好，温柔，皆是你

博主信息

排名

文章

粉丝

文章类别

架构 9篇

后端 4篇

.net 9篇

前端 60篇

nginx 1篇

.net core 6篇

EF 5篇

随笔 9篇

数据库 10篇

k8s 0篇

consul 1篇

git 1篇

uniapp 3篇

mysql 1篇

linux 1篇

js 多个异步方法同步请求,等所有请求都完成后在执行。vue 请求多个接口一起返回。等待多个接口同时返回

{{titleitem}} {{titleitem}}

{{titleitem}} {{titleitem}}