Rithim 异步 Javascript 练习使用 fetch 和 promises

Question

I've been stuck working on this exercise FOR AGES, I'm finally throwing in the towel and asking for some help.

Make an AJAX call to the Star Wars API [ https://swapi.co/] and get the opening crawl for each film in the series. Once you have finished that, loop through the array of planets for each movie and make more AJAX calls to collect the name of each planet, organized by film. Then, console log an array of objects in which each object contains the opening crawl for a specific movie, along with the names of every planet featured in that movie.

I've read a few articles and watched a few videos on Asynchronous js, and I 'think?', I sorta get it. This really doesn't want to work though.

    var promiseList = [];

    var fetchArray = function(arr) {
      promiseArr = arr
        .map(url => fetch(url)
            .then(res => res.json())
            .then(planet => planet.name)
            );     
      Promise.all(promiseArr)
        .then(data => console.log(data));
    }
    // fetchArray doesn't work at all. Curious if it's possible to run this code as it's technicall synchronous (idk).

    for (let number = 1; number < 8; number ++) {
      var t = fetch(`https://swapi.co/api/films/${number}/`)
       .then(res => res.json())
        promiseList.push(t)
    }

    console.log("NAHANH", promiseList)
    // Prints out [[object Promise] { ... }, [object Promise] { ... }, [object Promise] { ... }, [object Promise] { ... }, 
    [object Promise] { ... }, [object Promise] { ... }, [object Promise] { ... }]

    Promise.all(promiseList)
      .then(films => films.map(film => ({
        "title": film.title,
        "planets": film.planets,
        "opening_crawl": film.opening_crawl,
      })))
    // Works up untill this point, this next then doesn't work, my aim is to alter the film.plants property in every 
    array object and actually fetch the planet rather than just the url!
    // An example print out would be...
    // {
    //  opening_crawl: "Luke Skywalker has vanis...",
    //  planets: ["https://swapi.co/api/planets/61/"],
    //   title: "The Force Awakens"
    //  }]
      .then(films => films.map(film => {
          film.planets = film.planets
            .map(url => fetch(url)
              .then(res => res.json())
              .then(planet => planet.name)
              .catch(error => console.log(error.message))
            );     
      }
      .then(data => console.log(data))
    // Which would then finally resolve to (this is what I want but cannot get at the moment!) 
    //  {
    //    opening_crawl: "Luke Skywalker has vanis...",
    //    planets: ["Yavin IV"],
    //    title: "The Force Awakens"
    //  }]

It almost works I can return an object. The fetch arrays doesn't work at all. and my second alteration attempting to retrieve the planet name doesn't work.

Answer 1

First, rename function fetchArray as fetchPlanetNames , as that's what it does, and add a couple of missing returns. Then you have a worker function that makes the main code block much simpler ( as was your intention :-) ).

In the main code block, fetchPlanetNames(...) returns Promise, not Array, therefore, inside the films.map() functor, you need fetchPlanetNames(film.planets).then(planets => {/* compose the required film object here */}) . It's a kind of "inside-out" version of what you tried.

 var fetchPlanetNames = function(arr) { return Promise.all(arr.map(url => { // return the Promise returned by Promise.all(...).then(...) // ^^^^^^ return fetch(url) .then(res => res.json()) .then(planet => planet.name); })) .then(data => { console.log(data); return data; // Remember to return `data`, otherwise undefined will be dlivered. // ^^^^^^^^^^^^ }); }; var promiseList = []; for (let number = 1; number < 8; number ++) { promiseList.push(fetch(`https://swapi.co/api/films/${number}/`).then(res => res.json())); } Promise.all(promiseList) .then(films => { return Promise.all(films.map(film => { // Here, a nested Promise chain allows `film` to remain in scope at the point where 'planets' become available. return fetchPlanetNames(film.planets) .then(planets => { return { 'title': film.title, 'planets': planets, 'opening_crawl': film.opening_crawl }; }); })); }) .then(data => console.log(data));