使用 fetch API 返回所有值，而不仅仅是最后一个值

Question

我正在尝试访问两个 API 端点

let locationURL = 'https://ghibliapi.vercel.app/locations'; 让 filmURL = 'https://ghibliapi.vercel.app/films';

我获取位置 ID 并将其传递到变量中

fetch(locationURL)
.then(function(response){
  return response.json();
}).then(function(locationData){
  locationData.forEach(function(locationDetails){
    locationID = locationDetails.films[0].split('/')[4]
    return locationID;
    //console.log('Data from Location API:', locationID);
  })

//then i use the fetch method to pick up film values based on the location ID
  fetch(`https://ghibliapi.vercel.app/films/${locationID}`)
  .then(function(response){
    return response.json();
  }).then(function(filmDetails){
    console.log(filmDetails.id);
  });
});

但是在最后一次 fetch() 调用中，我只获得了最后一个 ID，而不是所有 ID

我尝试在第二个 API 调用中使用 forEach() 和 map() 方法，但没有得到任何响应。我是否缺少一些变量声明或方法

Answer 1

fetch 调用是异步的，第二个 fetch 调用在

forEach()

循环内的第一个 fetch 调用完成之前执行。这就是为什么您只获得最后一个 ID 而不是所有 ID。

要解决此问题，您可以使用

Promise.all()

等待所有获取请求完成，然后再继续：

let locationURL = 'https://ghibliapi.vercel.app/locations';
let filmURL = 'https://ghibliapi.vercel.app/films';

fetch(locationURL)
  .then(function(response){
    return response.json();
  })
  .then(function(locationData){
    //map each location to a promise that fetches the film details
    const filmPromises = locationData.map(function(locationDetails){
      const locationID = locationDetails.films[0].split('/')[4];
      return fetch(`https://ghibliapi.vercel.app/films/${locationID}`)
        .then(function(response){
          return response.json();
        });
    });

    //wait for all film detail requests to complete
    return Promise.all(filmPromises);
  })
  .then(function(allFilmDetails){
    //now allFilmDetails contains an array of film details for each location
    console.log(allFilmDetails);
  })
  .catch(function(error){
    console.error('Error:', error);
  });