Promise understanding

Shouldn’t this code give me the data? instead its returning promise why?

let links = [
    "https://jsonplaceholder.typicode.com/users",
    "https://jsonplaceholder.typicode.com/albums",
    "https://jsonplaceholder.typicode.com/comments"
]

async function getAllData(){
    const resp = await Promise.all(links.map(link => fetch(link)))
    const [users, albums, comments] = await resp.map(el => el.json())
    console.log("Users", users);
    console.log("Albums", albums);
    console.log("Comments", comments);   
}

getAllData()

Output

Users Promise {<pending>}
Albums Promise {<pending>}
Comments Promise {<pending>}

await operator will not resolve array of promises (that’s why you do Promise.all() in the first case), second case is still an array and rules are still the same :wink:

Also in general this approach is somewhat unstable, hope you realise this. If one of the links will appear to be broken or extra slow, that will block other data. Fetching and resolving each link separately would be wiser.

1 Like