javascript - promise 获取数据

Question

我想从这个网站获取某些数据https://swapi.co/ 。我使用 Promises 来获取有关行星的数据，然后在某个行星对象内进行拍摄。之后，我需要获取电影数组中物种数组中的数据。到目前为止一切正常。

我的获取信息的代码:

const task = planetId => {
  const url = `https://swapi.co/api/planets/${planetId}/`;
  const getPlanet = () => { // getting the planet by its Id
    return new Promise(function(resolve, reject) {
      https
        .get(`${url}`, function(res) {
          res.on("data", function(d) {
            const planetData = JSON.parse(d.toString());
            resolve(planetData);
          });
        })
        .on("error", function(e) {
          reject(e);
          console.error(e);
        });
    });
  };
  getPlanet().then(gotPlanet => {
    const planet = gotPlanet;
    const filmsArray = planet.films;
    const filmsArrayUrl = filmsArray.map(it => {
      return new Promise(function(resolve, reject) { // getting films array
        https
          .get(it, function(res) {
            res.on("data", function(d) {
              const films = JSON.parse(d.toString());
              resolve(films);
            });
          })
          .on("error", function(e) {
            reject(e);
            console.error(e);
          });
      });
    });
    Promise.all(filmsArrayUrl).then(gotFilms => {
      const filmsNew = gotFilms;
      planet.films = filmsNew;
      const speciesArray = planet.films.map(it => it.species);
      const speciesArrayUrl = speciesArray.map(it => it.map(el => { // trying to get the species data
        return new Promise(function(resolve, reject) {
          https.get(el, function(res) {
            res.on('data', function(d) {
              const speciesFetched = JSON.parse(d.toString())
              resolve(speciesFetched)
            })
          }).on('error', function(e) {
            reject(e)
            console.error(e)
          })
        })
      }))
      Promise.all(speciesArrayUrl).then(species => {console.log(species)})
    });
  });
};

最后一行在控制台中显示为 [Array[5], Array[20], Array[9]]数组中的每个元素为 Promise {<pending>} 。我应该在代码中更改什么来获取所有物种对象并返回最终结果 - 一个带有电影和电影中物种数据的行星？

Answer 1

您的代码很难遵循，我建议将可重用部分分解为自己的 promise ，例如下面的 getDataObject 部分。然后，您可以在需要发出 HTTP 请求时随时重复使用该 promise 。

const getDataObject = url => fetch(url).then(res => res.json());

const task = planetId => {
    const planetUrl = `https://swapi.co/api/planets/${planetId}/`;
    let planet

    return getDataObject(planetUrl)
        .then(planetResponse => {
            //get the planet response
            planet = planetResponse

            //map through each film in the planet and get its film
            let filmsArrayUrls = planet.films.map(filmUrl => getDataObject(filmUrl));

            return Promise.all(filmsArrayUrls)
        })
        .then(allFilms => {
            //update the planet with the response for each film
            planet.films = allFilms;

            //map through all the species in the films
            let speciesArray = planet.films.map(film => film.species);

            //map through the species elements using Promise.All
            let speciesArrayUrl = speciesArray.map(species => Promise.all(species.map(el => getDataObject(el))))

            //Promise.All is itself a Promise, so you still need to resolve the Array of Promise.All objects inside of the speciesArrayUrl
            return Promise.all(speciesArrayUrl)
      })
      .then(species => {
        //return the species and do something with them
        for (let i = 0; i < species.length; i ++) { 
            planet.films[i].species = species[i] 
        }
        console.log(planet)
        return planet
      })
  };
  
task(2)