Why JavaScript Promise.all is not resolving the promises

Question

I have the following code which fetches news from different news urls;

function displayNews() {

    Promise.all([fetch(BUSINESS_NEWS_URL), fetch(APPLE_NEWS_URL)])
    .then(responses => {
        return responses.map(response => response.json())
    }).then((data) => console.log(data)) // this still prints [Promise]
}

For some reason I am getting [Promise] getting displayed instead of the actual data. What am I missing?

Would using `await` make this code any clearer? It'd at least help narrow down where this renegade Promise is coming from. — tadman, Apr 27 '20 at 19:44
I can refactor to await later but first I need to understand why this is not working. — john doe, Apr 27 '20 at 19:45
You need to figure out where that's coming from. Sometimes cleaning up the code is a good way to make the bug more obvious. — tadman, Apr 27 '20 at 19:46

epascarello · Answer 1 · 2020-04-27T19:59:18.530

json() returns a promise so it would be another Promise.all

Promise.all([fetch(u1), fetch(u2)])
    .then(responses => {
        return Promise.all(responses.map(response => response.json()))
    }).then((data) => console.log(data))

Most people would not use two promise alls. They would return JSON with the fetch call

const grabJSON = url => fetch(url).then(x => x.json())
const calls = ['url1', 'url2'].map(grabJSON)
Promise.all(calls)
  .then((data) => console.log(data))

score 1 · Accepted Answer · answered Apr 27 '20 at 19:47

json is an async method. Try something like this:

function displayNews() {

    Promise.all([fetch(BUSINESS_NEWS_URL), fetch(APPLE_NEWS_URL)])
   .then(responses => {
        return Promise.all(responses.map(response => response.json()))
    }) 
   .then(responses => {
        return responses.map(data => console.log(data))
    })
}

Why JavaScript Promise.all is not resolving the promises

2 Answers2