项目场景：
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 链式调用时需要正确处理错误和异步顺序。
