I need to:

- make a series of fetch calls
- when they all have resolved do some other normal (non-fetch) calls
- make a another series of fetch calls
- when they all have resolved continue

I've only used async/await in a very basic way and I've been unable to
work out how make everything wait for the fetch calls to resolve before
making other calls.

I set up a "complex" for loop but trying to debug it is doing me head in.

What's a decent way to do this?

Andrew Poulos

On Thursday, 20 May 2021 at 11:02:36 UTC+2, Andrew Poulos wrote:
> I need to:
>
> - make a series of fetch calls
> - when they all have resolved do some other normal (non-fetch) calls
> - make a another series of fetch calls
> - when they all have resolved continue
>
> I've only used async/await in a very basic way and I've been unable to
> work out how make everything wait for the fetch calls to resolve before
> making other calls.
>
> I set up a "complex" for loop but trying to debug it is doing me head in.
>
> What's a decent way to do this?

Set a counter to zero, start your calls, whenever a call ends increment the counter, when the counter reaches the max value reset the counter and restart over...

Julio

On Thursday, 20 May 2021 at 11:24:51 UTC+2, Julio Di Egidio wrote:
> On Thursday, 20 May 2021 at 11:02:36 UTC+2, Andrew Poulos wrote:
> > I need to:
> >
> > - make a series of fetch calls
> > - when they all have resolved do some other normal (non-fetch) calls
> > - make a another series of fetch calls
> > - when they all have resolved continue
> >
> > I've only used async/await in a very basic way and I've been unable to
> > work out how make everything wait for the fetch calls to resolve before
> > making other calls.
> >
> > I set up a "complex" for loop but trying to debug it is doing me head in.
> >
> > What's a decent way to do this?
>
> Set a counter to zero, start your calls, whenever a call ends increment the counter, when the counter reaches the max value reset the counter and restart over...

P.S. I guess (without seeing your code) you should not be using async/await, the await part serialises execution. Just use the raw Promise: in the 'then' part increment the counter, etc.

Julio

On 2021-05-20, Andrew Poulos <ap_prog@hotmail.com> wrote:
> I need to:
>
> - make a series of fetch calls
> - when they all have resolved do some other normal (non-fetch) calls
> - make a another series of fetch calls
> - when they all have resolved continue
>
> I've only used async/await in a very basic way and I've been unable to
> work out how make everything wait for the fetch calls to resolve before
> making other calls.

Do you really mean a *series* of fetch calls? i.e. that each one can
only begin once the previous one has completed? Or do you mean you
have a set of fetch calls that you want to run in parallel?

If it's the former then:

const urls = [ "https://example.com/", "https://example.org/" ... ]
const results = []
for (const url of urls) results.push(await fetch(url))

If it's the latter then it depends on what you want to happen if any
of the fetches fail. If you want to give up as soon as any of them
fail, do:

const results = await Promise.all(urls.map(url => fetch(url)))

If you want to always wait for them all to complete, then you could do:

const results = await Promise.all(
urls.map(url => fetch(url).catch(err => err)))

and then results will each be a fetch result or an error.

On Thursday, 20 May 2021 at 14:08:46 UTC+2, Jon Ribbens wrote:

> If you want to always wait for them all to complete, then you could do:
>
> const results = await Promise.all(

+1. Sorry, I had forgotten about that.

Julio

On 20/05/2021 10:08 pm, Jon Ribbens wrote:
> On 2021-05-20, Andrew Poulos <ap_prog@hotmail.com> wrote:
>> I need to:
>>
>> - make a series of fetch calls
>> - when they all have resolved do some other normal (non-fetch) calls
>> - make a another series of fetch calls
>> - when they all have resolved continue
>>
>> I've only used async/await in a very basic way and I've been unable to
>> work out how make everything wait for the fetch calls to resolve before
>> making other calls.
>
> Do you really mean a *series* of fetch calls? i.e. that each one can
> only begin once the previous one has completed? Or do you mean you
> have a set of fetch calls that you want to run in parallel?
>
> If it's the former then:
>
> const urls = [ "https://example.com/", "https://example.org/" ... ]
> const results = []
> for (const url of urls) results.push(await fetch(url))
>
> If it's the latter then it depends on what you want to happen if any
> of the fetches fail. If you want to give up as soon as any of them
> fail, do:
>
> const results = await Promise.all(urls.map(url => fetch(url)))
>
> If you want to always wait for them all to complete, then you could do:
>
> const results = await Promise.all(
> urls.map(url => fetch(url).catch(err => err)))
>
> and then results will each be a fetch result or an error.

Sorry but I just don't get it :-(

I tried this

const urls = ['upload/test.php','...];

const results = async () => {
await Promise.all(
urls.map(url => fetch(url)
.then(response => response.json())
.then(data => {
console.log('Success: ', data);
})
.catch(err => err)));
};

results();

console.log('done');

And the console displays 'done' before any of the fetch responses.

Andrew Poulos

On 21/05/2021 9:06 am, Andrew Poulos wrote:
> On 20/05/2021 10:08 pm, Jon Ribbens wrote:
>> On 2021-05-20, Andrew Poulos <ap_prog@hotmail.com> wrote:
>>> I need to:
>>>
>>> - make a series of fetch calls
>>> - when they all have resolved do some other normal (non-fetch) calls
>>> - make a another series of fetch calls
>>> - when they all have resolved continue
>>>
>>> I've only used async/await in a very basic way and I've been unable to
>>> work out how make everything wait for the fetch calls to resolve before
>>> making other calls.
>>
>> Do you really mean a *series* of fetch calls? i.e. that each one can
>> only begin once the previous one has completed? Or do you mean you
>> have a set of fetch calls that you want to run in parallel?
>>
>> If it's the former then:
>>
>>    const urls = [ "https://example.com/", "https://example.org/" ... ]
>>    const results = []
>>    for (const url of urls) results.push(await fetch(url))
>>
>> If it's the latter then it depends on what you want to happen if any
>> of the fetches fail. If you want to give up as soon as any of them
>> fail, do:
>>
>>    const results = await Promise.all(urls.map(url => fetch(url)))
>>
>> If you want to always wait for them all to complete, then you could do:
>>
>>    const results = await Promise.all(
>>      urls.map(url => fetch(url).catch(err => err)))
>>
>> and then results will each be a fetch result or an error.
>
> Sorry but I just don't get it :-(
>
> I tried this
>
> const urls = ['upload/test.php','...];
>
> const results = async () => {
>   await Promise.all(
>     urls.map(url => fetch(url)
>                     .then(response => response.json())
>                     .then(data => {
>                       console.log('Success: ', data);
>                     })
>                     .catch(err => err)));
> };
>
> results();
>
> console.log('done');

Doh, it works if I write it correctly

const results = async () => {
await Promise.all(
urls.map(url => fetch(url)
.then(response => response.json())
.then(data => {
console.log('Success: ', data);
})
.catch(err => err)));

console.log('done');
};

results();

Andrew Poulos

fredag 21 maj 2021 kl. 01:52:23 UTC+2 skrev Andrew Poulos:
> On 21/05/2021 9:06 am, Andrew Poulos wrote:
> > On 20/05/2021 10:08 pm, Jon Ribbens wrote:
> >> On 2021-05-20, Andrew Poulos <ap_...@hotmail.com> wrote:
> >>> I need to:
> >>>
> >>> - make a series of fetch calls
> >>> - when they all have resolved do some other normal (non-fetch) calls
> >>> - make a another series of fetch calls
> >>> - when they all have resolved continue
> >>>
> >>> I've only used async/await in a very basic way and I've been unable to
> >>> work out how make everything wait for the fetch calls to resolve before
> >>> making other calls.
> >>
> >> Do you really mean a *series* of fetch calls? i.e. that each one can
> >> only begin once the previous one has completed? Or do you mean you
> >> have a set of fetch calls that you want to run in parallel?
> >>
> >> If it's the former then:
> >>
> >> const urls = [ "https://example.com/", "https://example.org/" ... ]
> >> const results = []
> >> for (const url of urls) results.push(await fetch(url))
> >>
> >> If it's the latter then it depends on what you want to happen if any
> >> of the fetches fail. If you want to give up as soon as any of them
> >> fail, do:
> >>
> >> const results = await Promise.all(urls.map(url => fetch(url)))
> >>
> >> If you want to always wait for them all to complete, then you could do:
> >>
> >> const results = await Promise.all(
> >> urls.map(url => fetch(url).catch(err => err)))
> >>
> >> and then results will each be a fetch result or an error.
> >
> > Sorry but I just don't get it :-(
> >
> > I tried this
> >
> > const urls = ['upload/test.php','...];
> >
> > const results = async () => {
> > await Promise.all(
> > urls.map(url => fetch(url)
> > .then(response => response.json())
> > .then(data => {
> > console.log('Success: ', data);
> > })
> > .catch(err => err)));
> > };
> >
> > results();
> >
> > console.log('done');
> Doh, it works if I write it correctly
> const results = async () => {
> await Promise.all(
> urls.map(url => fetch(url)
> .then(response => response.json())
> .then(data => {
> console.log('Success: ', data);
> })
> .catch(err => err)));
> console.log('done');
> };
>
> results();
>
> Andrew Poulos
Yeah it may work but the syntax is mental to do two things in serial..... Just saying....