小白问题] axios 循环请求,响应时间不同,导致数据的排序紊乱

[OkabeRintaro]

最近在用 VUE 仿写一款小说阅读器,在根据 ID 发送 axios 请求获取小说内容数据的时候,渲染到页面的时候,顺序出现了问题. 用 forEach 遍历这个数组,然后去请求数据,但是每章小说的内容不一样,获取到的时间也不一样,导致章节紊乱......

arr: [ { id: "111x" },/* 对应的数据是小说的第一章, 至少 2 秒才响应返回数据*/ { id: "222xs" },/* 对应的数据是小说的第二章 至少 5 秒才响应返回数据*/ { id: "333sa" },/* 对应的数据是小说的第三章 至少 3 秒才响应返回数据*/ ... ] ,根据数组 arr 的每个对象的属性 ID 作为参数,循环 axios 请求来获取数据,存入数组, 要求: 最终该数组的数据排序应该是小说的第一章,第二章,第三章......即数据需要按照对象的索引排序

呜呜,来个大佬帮一下......

[noe132]

学习一下 Promise 把小老弟
看看 Promise.all

[YuxiangLuo]

let id_arr = [
{
id: "001"
},
{
id: "002"
},
{
id: "003"
},
{
id: "004"
}
]

let content_arr = new Array(id_arr.length);


id_arr.forEach(async (id, index) => {
console.log(id, index);
let res = await axios.get("https://getcontent.com/"+id.id);
let content = res.data;
content_arr[index] = content;
})

setTimeout(() => {
console.log(content_arr);
}, 10000);

[OkabeRintaro]

@YuxiangLuo @noe132 谢谢! 用了 axios.all()和 axios.spread()已经拍好了 先循环弄出所有的 promise 对象放入新数组,再 all 这个新数组 ,spread 出来所有的正确顺序

[OkabeRintaro]

<script>
import axios from "axios";
created() {
//第一次进小说,只要前 4 章
this.firstSecIdList = (this.bookList || "").slice(0, 4);
// 遍历前四个,四个全部分到一个新的 url 数组集合里
this.firstSecIdList.forEach((item, index) => {
// 请求章节内容的 URL 链接
item, index;
this.firstSecIdListURl.push(
axios.get(
`A----P----I?小说内容 ID=${item.secId}`
)
);
});
// 输出这 4 个 promise 对象
console.log(this.firstSecIdListURl);

axios.all(this.firstSecIdListURl).then(
axios.spread((...res) => {
// 由于不知道数组的长度，所以我们通过...扩展运算符将数组变成一个参数序列
[...res].forEach((item, index) => {
index;
console.log(item, index);//输出结果为按照索引发出的请求并且是正确的顺序的返回数据
//小说内容放进页面
this.bookContent = item.data.data.content;
this.$refs.content.innerHTML += this.bookContent;
});
})
);
});
</script>

[elboble]

axios 是异步的