Promise异步请求以及同步请求使用
场景:当前端需要向后端做多个请求时,比如a、b、c三个请求,从请求顺序来分析会出现如下三种场景
1、三个请求顺序没关系,a/b/c可以同时请求,只需要在最后获取他们三个返回结果;
2、需要先完成a请求,将a请求的返回结果作为b请求的入参,然后c请求的入参需要b请求结束后返回的结果
3、a/b可以同时执行,最后执行c
- 场景一:[a,b,c]三个请求同时进行,然后统一处理获取的请求数据
promise.all代码示例
Promise.all([
// 调用方法一:fetchListTable-peakTime
new Promise((resolve, reject) => {
fetchListTable(this.listQuery.peakTime).then(res => {
console.log(res)
resolve(res)
})
}),
// 调用方法二:fetchListTable-pressTime
new Promise((resolve, reject) => {
fetchListTable(this.listQuery.pressTime).then(res => {
resolve(res)
})
}),
// 调用方法三:fetchListTable-presslessTime
new Promise((resolve, reject) => {
fetchListTable(this.listQuery.presslessTime).then(res => {
resolve(res)
})
})
]).then(res => {
// 统一处理请求数据:res[0].data,res[1].data,res[2].data
var appIdPeakMap = new Map()
var appIdPressMap = new Map()
var appidSet = new Set()
for (var appidPeakV of res[0].data) {
appIdPeakMap.set(appidPeakV.appId, appidPeakV.methodDataList)
appidSet.add(appidPeakV.appId)
}
})
如果有多个方法的话,可以增加new promise。请求结果按照顺序放到res数组中
- 场景二:a->b->c顺序执行,有可能b的入参需要a返回结果
顺序执行请求示例一
Promise.resolve().then(res => {
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log('11111111111', )
resolve('第一个异步进程')
},3000)
})
// 只有当第一个then返回了promise对象才会接着调用下一个的then方法
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log('2222222222', )
resolve('第二个异步进程')
},2000)
})
}).then(() => {
return new Promise((resolve, reject) => {
setTimeout(()=>{
console.log('33333333', )
resolve('第三个异步进程')
},1000)
})
})
顺序执行请求示例二
Promise.resolve().then(res => {
return new Promise((resolve, reject) => {
threadConfigInfo({ scenarioId: this.scenario.id, runType: 1 })
.then(res => {
scriptConfigVo = res.data
resolve(res.data)
})
.catch(err => {
console.log(err)
})
})
// 只有当第一个then返回了promise对象才会接着调用下一个的then方法
}).then(() => {
return new Promise((resolve, reject) => {
run({ scriptId: this.script.id }).then((res) => {
this.$router.push({ name: 'Report', params: { reportId: res.data.id } })
if (scriptConfigVo.autoPress) {
resolve(res)
} else {
reject()
}
}).catch(err => {
console.log(err)
})
})
}).then((res) => {
return new Promise((resolve, reject) => {
setTimeout(() => {
autoAddScriptPress(res.data.scriptId, res.data.id)
.then(res => {
})
.catch(err => {
console.log(err)
})
}, 1000)
})
})
- 场景三:[a,b] ->c,a/b同时执行,然后执行c,我这里的处理方案和二相似,就直接a->b->c
参考文档:
vue多个异步请求,多个同步请求
https://blog.csdn.net/chinahcp2008/article/details/119816024
https://blog.csdn.net/yyk5928/article/details/103624315