javascript async fetch function

Question

I am trying to create a recursive function that sends a PUT request for every integer of a given array, and call another function at the end of it.

function fetchArchive(arr,state,mailbox){
  if(arr.length == 0){
    load_mailbox(mailbox)
  }
  for(i of arr){
    fetch(`/emails/${arr.shift()}`, {
      method: 'PUT',
      body: JSON.stringify({
          archived: state
      })
    })
    .then(fetchArchive(arr,state,mailbox))
  }
}

But it seems that it calls the load_mailbox() function before fetching the last item of the array.
I know that this should be better implemented using async / await. Can someone give an example of that to help me understand?

UPDATE: It turns out that the code below is working

async function fetchArchive(a,s,callback){
  for(i of a){
    await fetch(`/emails/${i}`, {
      method: 'PUT',
      body: JSON.stringify({
          archived: s
      })
    })
    // if i is the last item, load mailbox
    .then(() => { if(i==a[a.length-1] && callback) callback()});
  }
}

captain-yossarian from Ukraine · Accepted Answer · 2020-08-06 06:36:31Z

1

This is the correct code for async for..of loop

async function fetchArchive(arr,state,mailbox){
    console.log(1)
  if(arr.length === 0){
    load_mailbox(mailbox)
  }
    
  for await (const elem of arr){
    await fetch2(elem);
        arr.shift();

        console.log({ elem })

    fetchArchive(arr,state,mailbox)
  }
}

However, this code does not work and causes infinity recursion :) I think it is bad idea to mutate the array inside iteration. Also, please keep in mind, that then receives callback. So, the propper argument for then is:

.then(response=>fetchArchive(respone))

In your case, you can't pass fetchArchive as an argument to then method because fetchArchive does not return function

[UPDATE]

This is the working code with array index comparison:

const fetchArchive = async (a, s, callback) => {
  for (const [index, value] of a.entries()) {
    await fetch(index)
      // if i is the last item, load mailbox
      .then(() => {
        if (index == a.length - 1 && callback) {
          callback();
        }
      });
  }
};

Documentation about entries U can find here

edited Aug 6, 2020 at 6:36

answered Aug 5, 2020 at 20:04

captain-yossarian from Ukraine

33.5k5 gold badges41 silver badges78 bronze badges

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

3 Comments

Ivan Taccadoli Over a year ago

Thanks for your answer. I tried with the async function I've just added at the end of the question. What do you think about it?

captain-yossarian from Ukraine Over a year ago

Much better now, however there is still one problem, here: i==a[a.length-1]. U are trying to compare value to value. The best way to know if it is the end of array is to compare array indexes. Indexes are always integers, when values could be anything. Please see update in my answer

Ivan Taccadoli Over a year ago

Looks way better now, Thanks!!

Collectives™ on Stack Overflow

javascript async fetch function

1 Answer 1

3 Comments

Your Answer

Hot Network Questions

Collectives™ on Stack Overflow

1 Answer 1

3 Comments

Your Answer

Sign up or log in

Post as a guest

Related