Using variable from a Async function

Question

I have an item that I got from an Async function as follows:

items = await statusCheck(items.split('\n'))

The items is an array which I need to add to localStorage. The issue is, although it has elements inside of it, they are not accessible.

Therefore, I have to do this:

items = await statusCheck(items.split('\n'))
setTimeout(() => {
   localStorage.setItem(localKey, items.join('\n'))
}, 1000)

Is there a more elegant way of doing this without having to resort to a setTimeout function?

Is there more information I can provide to help resolve this issue? The FULL code is as follows:

async function clearHistory() {

  var localKey = "uploadcare_" + UPLOADCARE_PUBLIC_KEY
  var items = localStorage.getItem(localKey);

  items = await statusCheck(items.split('\n'))

  setTimeout(() => {
    localStorage.setItem(localKey, items.join("\n"));
  }, 1000)
}

async function statusCheck (items) {
    let newItems = []

   items.forEach(async (item) => {
      let url = "https://somelink" + item.split(' ')[0] + "/54x54/"
      let status = await fetchResponse(url)
      if (status === 200) {
        newItems.push(item)
      }
    })

    return newItems
  }

async function fetchResponse(url) {
    try {
      let response = await fetch(url)
      let status = response.status
      return status
    } catch (e) {
      console.log(e)
    }
  }

clearHistory()

Unfortunately forEach will break your promise chain, either use `for of` or if you want parallel fetch use `map` and `Promise.all` — Keith, Jul 26 '20 at 15:56

score 1 · Answer 1 · answered Jul 26 '20 at 15:46

You shouldn't be doing a forEach with async. You should use map and get each promise out. Then do Promise.all. Something like this:

async function statusCheck (items) {
    let promises = items.map(item => {
      let url = "https://somelink" + item.split(' ')[0] + "/54x54/";
      return fetchResponse(url);
    });

    await Promise.all(promises);

    // figure out which ones to return.
  }

score 1 · Answer 2 · answered Jul 26 '20 at 15:50

Async functions need to return a Promise. Your code runs synchronously. I am not sure why the browser won't tell you. So your statusCheck() function needs to return a Promise object to be awaitable. This also applies to the the forEach loop in the statusCheck. And I think that you cant do the foreach async because the native function wont wait for those callbacks. See this reference for async function: https://developer.mozilla.org/de/docs/Web/JavaScript/Reference/Statements/async_function

Kavian Rabbani · Answer 3 · 2020-07-26T16:02:52.687

There is no reason to use setTimeout. the main problem is that you are using await inside the function you are passing to forEach, and there is no reason for javascript to wait until all of the requests resolve and then returning the array. it keeps going and returns possibly an empty array first. and when you are using the new created array it, some of the requests might resolve and they results will be pushed to that array. you can use this instead:

async function statusCheck (items) {
  return Promise.all(items.map(async (item) => {
    let url = "https://somelink" + item.split(' ')[0] + "/54x54/"
    let status = await fetchResponse(URL)
    if(status !== 200) {
      return;
    }
    return item;
  }).filter(Boolean);
}

I used Boolean just to remove items that checking them by API might result in a status other than 200. in this case the function return;s or in the other words, returns undefined. as a matter of fact, I've filtered those results by filter(Boolean)

Using variable from a Async function

3 Answers3