JS 'await is only valid in async function' in Promise.all() function

Question

I'm trying to make a bunch of request an await to all of them to be completed with a Promise.all() function, but instead of doing manually all the fetchs like this:

var data = await Promise.all([
        fetch('https://jsonplaceholder.typicode.com/posts').then((response) => response.json()),
        fetch('https://jsonplaceholder.typicode.com/albums').then((response) => response.json()),
        fetch('https://jsonplaceholder.typicode.com/users').then((response) => response.json())
      ]);

i want to make it dynamic, to make N fetch requests like this:

       let promiseList = [];
        try {
            for (let url of requestUrls) {
                promiseList.push(fetch(url).then((response) => response.json()));
            }

            var data = await Promise.all(promiseList);

But i get this error Uncaught SyntaxError: await is only valid in async function in the await Promise.all() line, if i delete the await, i get a Promise {<pending>} and (index):79 error:TypeError: data is not iterable

This is my full code: https://jsfiddle.net/ham7g82e/1/

What i'm missing to get the data from those fetchs?

Your parent function to `await` doesn't have the `async` operator such as `async function myFunc(){ ... }`, we need to see how you defined the wrapping function. — Get Off My Lawn, Jun 03 '19 at 16:54
https://stackoverflow.com/questions/31710768/how-can-i-fetch-an-array-of-urls-with-promise-all — epascarello, Jun 03 '19 at 16:57

Ali Ann · Answer 1 · 2019-06-03T17:03:04.003

2

To use await, it needs to be part of an async function.

async function functionName() {
 //You can use await in here, because you used the async keyword
}

edited Jun 03 '19 at 17:03

answered Jun 03 '19 at 16:58

Ali Ann

169
5

1

Functions and methods both are functions in JavaScript. – m1k1o Jun 03 '19 at 16:59
functions are methods of the window object, so there isn't a distinction – WilliamNHarvey Jun 03 '19 at 17:01
Thank you! I did not learn JS formally. I edited my answer :) – Ali Ann Jun 03 '19 at 17:03

score 2 · Accepted Answer · answered Jun 03 '19 at 16:59

Don't use await, instead use Promise.then

Promise.all(promiseList).then(data => {
  document.getElementById("result").innerHTML = data;
  console.log(data);

  for (var i of data) {
    console.log(`RESPONSE ITEM \n`);
      for (var obj of i) {
        console.log(obj);

      }
  }
});

score 0 · Answer 3 · answered Jun 03 '19 at 16:59

0

If the function where are executing this code is not async, you could just use the .then() to get the values from the promises. There is not need to use await.

Check this documentation: Promise.all()

answered Jun 03 '19 at 16:59

Paul Bota

141
9

JS 'await is only valid in async function' in Promise.all() function

3 Answers3