Vue.js 中使用 axios 遍历两个数组的问题及解决方案

项目场景：

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