Fetch multiple links inside foreach loop

Question

I have array of links like so:

let array = ['https://1','https://2','https://3']

Than i want to loop all elements and run fetch on them. Still fetch is async so i get request more times i deal this problem removing element from array like so:

array.forEach((link,index) => {
    fetch(link, {mode: 'no-cors'}).then(function () {
        //more stuff not inportant
    }).catch(e => {
        console.error('error', e);
    });
    array.splice(index,1)
})

I wonder is there better solution to solve this ?

It's not a good practice to mutate an array you iterate. Why do you need this in here? — omri_saadon
– omri_saadon, Commented Nov 19, 2018 at 15:27

yoursweater · Accepted Answer · 2018-11-19 15:32:15Z

15

You want to use Promise.all for this, like so:

// store urls to fetch in an array
const urls = [
  'https://dog.ceo/api/breeds/list',
  'https://dog.ceo/api/breeds/image/random'
];

// use map() to perform a fetch and handle the response for each url
Promise.all(urls.map(url =>
  fetch(url)
    .then(checkStatus)                 
    .then(parseJSON)
    .catch(logError)
))
.then(data => {
  // do something with the data
})

answered Nov 19, 2018 at 15:32

yoursweater

2,0773 gold badges27 silver badges43 bronze badges

Sign up to request clarification or add additional context in comments.

Comments

Noel Kriegler · Accepted Answer · 2018-11-19 15:34:08Z

1

I would use Promise.all() in this instance. Start with getting the body from each response. Then do something with the responses after the respective promises are fulfilled:

let urls = ['https://1','https://2','https://3']

Promise.all(urls.map(url =>
   // do something with this response like parsing to JSON
   fetch(url,{mode: 'no-cors'}).then(response => response)
)).then(data => {
   // do something with the responses data
})

edited Nov 19, 2018 at 15:34

answered Nov 19, 2018 at 15:32

Noel Kriegler

5393 silver badges11 bronze badges

2 Comments

Scott Sauyet Over a year ago

What is that first then for?

Noel Kriegler Over a year ago

@ScottSauyet I guess we could remove that but you might want to parse the data , I'll add a comment to explain thanks

sonu sharma · Accepted Answer · 2022-02-19 09:47:25Z

-1

The responses will be coming in order they finish.

const urls = [1,2,3,4];

// using async await with for loop

const der = async (x) => {
    const f = await fetch(`https://jsonplaceholder.typicode.com/todos/${x}`)
    const j = await f.json()
    return j;
};

urls.forEach(async(url) => {console.log(await der(url))});

// using promise all with then method

Promise.all(urls.map(x =>
   fetch(`https://jsonplaceholder.typicode.com/todos/${x}`).then(response => response.json())
)).then(data => {
   console.log(data)
})

edited Feb 19, 2022 at 9:47

answered Dec 17, 2021 at 17:23

sonu sharma

391 silver badge3 bronze badges

2 Comments

albjerto Over a year ago

The forEach solution is wrong. As stated in the documentation, forEach does not wait for promises. Since ES18, if you want an asynchronous for interation, you should use for await...of.

sonu sharma Over a year ago

when brain becomes brain++

Collectives™ on Stack Overflow

Fetch multiple links inside foreach loop

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Linked

Hot Network Questions

Collectives™ on Stack Overflow

3 Answers 3

Comments

2 Comments

2 Comments

Your Answer

Sign up or log in

Post as a guest

Linked

Related