时间戳

首页 > 解决方案 > 在发送另一个 http 请求之前等待完成一个 http 请求？

javascript - 在发送另一个 http 请求之前等待完成一个 http 请求？

问题描述

这一切都有效，除了每次我以不同的顺序得到结果。例如。2.name, 4.name, 1.name, 3.name, 5.name.

如何在开始另一个 http req 之前完成每个 http req，以便我可以像数组一样按顺序获得结果？

const array = [ '1', '2', '3', '4', '5' ]

array.forEach(el=>{
  axios.get(`/item/${el}`)
     .then(res=>{
         console.log(res.data.name)
   }
})

标签： javascriptaxios

解决方案

为了以相同的顺序获得结果，您可以简单地使用Promise.all, 或axios.all，但这将并行执行所有请求：

const array = [ '1', '2', '3', '4', '5' ];

axios.all(array.map(el => () => axios.get(`/item/${el}`))).then(data => console.log(data));

但是，如果您需要按顺序执行它们，那么按顺序执行，因为可能在第二个请求中您需要访问第一个请求的响应，您必须将每个下一个请求链接到then前一个请求中：

const array = [ '1', '2', '3', '4', '5' ];

const requests = array.map(el => () => axios.get(`/item/${el}`));
requests[0]().then(data1 => {
  requests[1]().then(data2 => { ... });
});

或者，如果您想避免地狱般的回调返回承诺，然后将then块解开：

const array = [ '1', '2', '3', '4', '5' ];

const requests = array.map(el => () => axios.get(`/item/${el}`));
requests[0]()
  .then(data1 => requests[1]())
  .then(data2 => { ... });

或者您可以使用async/await：

const array = ['1', '2', '3', '4', '5'];
const requests = array.map(el => () => axios.get(`/item/${el}`));

async function performRequests() {
  const res1 = await requests[0]();
  const res2 = await requests[1]();
}

performRequests();

推荐阅读