项目场景:
axios异步调用两个方法并把两个方法同时遍历到页面中
第一个方法:调用出bookid,装到bArray数组中
第二个方法:根据第一个方法调用出来的所有bookid依次调用对应的title(书名),并把所有书名依次装入bArray数组中。
问题描述
问题:使用完两个axios无法实现显示bArray数组中的书名。
query:function(){
let bArray=[]
axios.get(`queryBorrowSno?sno=${this.sno}`).then(res=>{
bArray=res.data
for(let i=0;i<bArray.length;i++)
{
this.bookid=bArray[i].bookid
axios.get(`queryBookId?bookid=${this.bookid}`).then(com=>{
bArray[i].title=com.data.title
console.log(JSON.stringify(bArray)+"第"+i+"次")
this.asno=bArray.studentid
console.log(this.bookName)
this.bArray=bArray
})
}
})
},
原因分析:
在代码中,因为第二个 axios 请求是异步的,所以它的回调函数会在 for 循环结束后执行。这意味着当你给 bArray 赋值时,只有最后一次循环的数据被赋值到了 bArray[i].title 上,而之前的数据都没有被处理。
要解决这个问题,可以使用 Promise 链式调用等待第二个请求完成后再进行下一步操作。
解决方案:
query: function () {
// 调用方法实现bookid的获取
axios.get(`queryBorrowSno?sno=${this.sno}`).then(res => {
// 定义常量等于事件数组
const bArray = res.data;
// 定义request空数组
let requests = [];
for (let i = 0; i < bArray.length; i++) {
// 记录每个异步请求对象
// 把bArray数组的bookid调用的值都push进去装进request数组里
requests.push(
axios.get(`queryBookId?bookid=${bArray[i].bookid}`).then(com => {
bArray[i].title = com.data.title;
})
);
}
// 等待所有异步请求完成
Promise.all(requests).then(() => {
this.bArray = bArray;
console.log(JSON.stringify(this.bArray));
});
});
},
在上述代码中,我们首先发起第一个请求,并将返回的数据存储在本地变量 bArray 中。然后使用 for 循环遍历 bArray,并将每个异步请求对象添加到数组 requests 中。在循环结束后,使用 Promise.all() 方法等待所有异步请求对象完成,再将处理后的 bArray 数据赋值给组件 data 中的变量 this.bArray,以显示在页面中。
需要注意的是,使用 Promise 链式调用时需要正确处理错误和异步顺序。