需求:文件上传,需要一个个的上传,之前使用map循环去请求接口,发现map里的await会失效,后来改为for循环,但是后端要求控制并发请求的数量不然会出错
解决:
// arr需要上传的文件集合 requestQueue请求的队列
arr.forEach((request, index) => {
this.requestQueue.push(request)
this.sortQueue(menu[1])
})
async sortQueue(menu) {
// 只要队列中有请求,并且正在进行的请求少于规定限度,就处理队列
while (this.requestQueue.length > 0 && this.activeRequests.length < 5) {
const request = this.requestQueue.shift()
this.activeRequests.push(request)
const params = {
...
}
console.log('影像分组入参', params)
await uploadedImageGroup(params).then(res => {
console.log('影像分组', res)
if (res.data.succ === '00') {
this.$set(request, 'status', 'succ')
} else {
this.$set(request, 'status', 'error')
}
}).catch(err => {
this.$set(request, 'status', 'error')
console.log('err', err)
}).finally(async() => {
// 请求完成后从活跃请求数组中移除
this.finishCount++
this.activeRequests = this.activeRequests.filter(req => req !== request)
this.uploadProgress.uploadedNum = this.finishCount
if (this.finishCount !== this.sortArrLen) {
this.sortQueue(menu)
} else {
this.$emit('update')
}
})
}
},