如何提出多个请求？

Question

I have an array of data and need to fetch data for each item and combine them.

// This is inside a Nextjs async API route

const data = ['item1','item2','item3']

let result = []

data.forEach(async (item)=>{
const res = await fetch(`https://websitename.com/${item}`)
result = [...result,...res]
}

console.log(result)  //gives an empty array

Here, it returns an empty array even though for each item data is being fetched. How to make such requests?

}

Answer 1

Your code should be throwing errors I think? You're trying to declare result twice, but as the second time is within the forEach loop, it's actually a different variable, and is created and destroyed for each loop.

Assuming your fetch works, this should work:

const data = ['item1','item2','item3']

let result = []

data.forEach(async (item)=>{
const res = await fetch(`https://websitename.com/${item}`)
result = [...result,...res]
}

console.log(result)

Answer 2

May this could help you:)

async function doRequest(data) {
   // process here
}

const requests = ['item1', 'item2', 'item3'];
const results = requests.map(async (val) => {
    const response = await doRequest();
    return response;
});

await Promise.all(requests);

Answer 3

Change:

const res = await fetch(`https://websitename.com/${item}`)
const result = [...result,...res]

To:

const response = await fetch(`https://websitename.com/${item}`);
const data = response.json(); // if your response is Json
result.push(data);

• result should be const instead of let

Answer 4

Method.forEach() makes sync iteration. It means that an iteration does not wait resolving of your async callback, but just starts it. As a result forEach starts all requests and jumps to line with console.log(result). But at the moment none of the requests are done and array is still empty. If you wrap like that s etTimeout(()=>console.log(result),3000) you will see that the array is filled with data.

If you want to make sequential calls:

(async function() {
  const data = ['item1','item2','item3']
  let result = []
  for await (const item of data) {
    const res = await fetch(`https://websitename.com/${item}`)
    console.log(item);
    result.push(item)
  }
  console.log(result)
})();

If you want to make parallel calls:

(async function() {
const data = ['item1','item2','item3']
let result = await Promise.all(data.map(async (item)=>{
return await await fetch(`https://websitename.com/${item}`)
}))

console.log(result)
})();