前缀:正常开发中经常会遇到异步问题,第一种异步直接使用async和await就可以了。第二种有循环数据调用后端接口的情况。第三种循环调用接口还需要对返回值进行处理的。
第一种直接用async和await
第二种:
let promiseArr = arrDate.map(async (item, index) => {
// this.$request.formInterfacesTaskQRcode_kl 接口
let arr = await this.$request.formInterfacesTaskQRcode_kl({
taskId: item.id
})
item.contralCode = arr
return item
})
第三种: 处理接口返回值,需加上Promise.all(),否则循环的数据顺序会乱。
(1)saync 和await方法:
let promiseArr = row.map(async (item, index) => {
let arr = await this.$request.formInterfacesTaskQRcode_kl({
taskId: item.id
})
item.contralCode = window.URL.createObjectURL(new window.Blob([arr.data], { type: 'image/png' })) // 后端返回二进制前端转换成图片路径
return item
})
Promise.all(promiseArr).then(value => {
this.tableData = value
})
(2)promise 方法
let promiseArr = row.map((item, index) => {
return this.getEach(item, index)
})
Promise.all(promiseArr).then(value => {
this.tableData = value
this.dialogVisible = true
})
getEach(item, index) {
return new Promise((resolve, reject) => {
this.$request
.formInterfacesTaskQRcode_kl({
taskId: item.id
})
.then(r => {
item.contralCode = window.URL.createObjectURL(new window.Blob([r.data], { type: 'image/png' }))
resolve(item)
})
.catch(() => {
reject()
})
})
其它遇到情况:
第一部先循环数组,直接循环调用一个嵌套的两个接口,最后调用完接口成功,但是数据(后端)修改错误,需要用定时器:
arrList.forEach((item,index)=>{
setTimeout(()=>{
// 调用方法
},1000*index)
})
如果不加1000*index,不生效。