JavaScript Asynchronous Programming with JavaScript Understanding Promises Handle Multiple Promises with Promise.all

Elisa Burghard
Elisa Burghard
9,276 Points

page for one astronaut not found, so nothing shows up at all

Console shows: GET https://en.wikipedia.org/api/rest_v1/page/summary/Hazzaa%20Ali%20Almansoori 404

I am guessing that since we use Promise.all() it waits for all the requests to come back resolved and only then the results are displayed. Since one request is rejected, it also does not display the ones that are resolved?

How can you solve this, if the problem lies within the GET request using the API?

5 Answers

Hey :] this is my snapshot: http://w.trhou.se/a80r7drbf6

Elisa Burghard
Elisa Burghard
9,276 Points

Hey, thank you! I copy pasted it and ran it, again, same error, then i changed the src from promises.js to callback.js in index.html and that worked. I don't know why i changed it to promises.js, thought Gil said to in the video, but maybe i misheard. Thanks again for your help!

use the questions that people already asked. https://teamtreehouse.com/community/im-not-getting-all-the-astronauts

Elisa Burghard
Elisa Burghard
9,276 Points

I tried that already, it did not work. It doesn't find the wikipediapage for https://en.wikipedia.org/api/rest_v1/page/summary/Hazzaa_Ali_Almansoori

when i click on the link provided in the 404 message in the console, i get this reply

{ "type": "https://mediawiki.org/wiki/HyperSwitch/errors/not_found", "title": "Not found.", "method": "get", "detail": "Page or revision not found.", "uri": "/en.wikipedia.org/v1/page/summary/Hazzaa_Ali_Almansoori" }

const astrosUrl = 'http://api.open-notify.org/astros.json';
const wikiUrl = 'https://en.wikipedia.org/api/rest_v1/page/summary/';
const peopleList = document.getElementById('people');
const btn = document.querySelector('button');

function getJSON(url) {
  return new Promise ((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if(xhr.status === 200) {
        let data = JSON.parse(xhr.responseText);
        resolve(data);
      }else {
        reject( Error (xhr.statusText) );
      }
    };
    xhr.onerror = () => reject (Error ('A network error occurred. Sorry about that'));
    xhr.send();
  });
}

function getProfiles(json) {
  const profiles = json.people.map( person => {
    return getJSON(wikiUrl + person.name);      
  }); 
  return Promise.all(profiles);
}

function generateHTML(data) {
  data.map(person => {
    const section = document.createElement('section');
    peopleList.appendChild(section);
    if (person.type === "standard") {
      section.innerHTML = `
      <img src=${person.thumbnail.source}>
      <h2>${person.title}</h2>
      <p>${person.description}</p>
      <p>${person.extract}</p>`;
    } else {
      section.innerHTML = `
      <h2>${person.title}</h2>
      <p>No description available</p>`;
    }
  });
}

btn.addEventListener('click', (event) => {
  getJSON(astrosUrl)
  .then(getProfiles)
  .then (generateHTML)
  .catch(err => {
    peopleList.innerHTML = '<h3>Something went wrong</h3>';
    console.log(err)
  })
  .finally(() => event.target.remove() )
});

No problem! your enjoing the courses so far? in which course are u? Im currently doing the php track

Elisa Burghard
Elisa Burghard
9,276 Points

I am on the JS track and enjoying it very much! Do you like PHP? I learned basics of Python here and am currently improving my Ruby skills (I personally really like those two backend languages)!

Yes, so far it's a good track. I know python as well but i dont know php seem to be more less complex to work with compare to node.js and python

Elisa Burghard
Elisa Burghard
9,276 Points

There is so much to learn, isn't that great?! :) Node.js is on my list as well...

Brendan Moran
Brendan Moran
13,743 Points

The least hacky way to fix this is by using Promise.allSettled() instead of Promise.all(). In the first line of your generateHtml function, you will want to console.log the data to see what it looks like, because it's a little different. You'll set up a test to see if person.status === 'fulfilled'. If so, on the first line of your "if" block, just reassign person to equal person.value. The rest of your code can stay the same, go ahead and build your html. If person.status === rejected', you can just skip building any html, or you could do some creative error handling that is more useful to the client.