如何将两个fetch请求合并到同一个数组中？

Question

我试图将两个 fetch 请求合并为一个调用，以便可以在同一个数组中获取所有数据。

我尝试了 Promise.all 方法，但不确定这是否是正确的做法。

getWeather = async (e) => {
e.preventDefault();
const city = e.target.elements.city.value;
//const api_call = await
const promises = await Promise.all([
   fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=${API_KEY}`),
  fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&APPID=${API_KEY}`)
])

const data = promises.then((results) =>
Promise.all(results.map(r => r.text())))
.then(console.log)

代码运作正常，我收到了数据，但是我无法理解JSON响应。

  (2) ["{"coord":{"lon":-5.93,"lat":54.6},"weather":[{"id"…7086601},"id":2655984,"name":"Belfast","cod":200}", "{"cod":"200","message":0.0077,"cnt":40,"list":[{"d…on":-5.9301},"country":"GB","population":274770}}"]

我应该如何设置状态？我的状态是通过一次调用设置的，就像这样：

  if (city) {
  this.setState({
    temperature: data[0].main.temp,
    city: data[0].name,

有没有更好的方法？

- Stranyka

Answer 1

我可以做：

  getWeather = async (e) => {
   e.preventDefault();

   const fetchText = url => fetch(url).then(r => r.json()); // 1

   const /*2*/[weather, forecast] = /*3*/ await Promise.all([
     fetchText(`.../weather`),
     fetchText(`.../forecast`)
   ]);

   this.setState({ temperature: weather.temp, /*...*/ });
 }

---

1: 通过使用一个小的辅助函数，您不必调用两次 Promise.all。这样做可以并行执行这两个请求（您应该使用 .json() 来解析它作为 JSON）。

2: 通过使用数组解构，您可以轻松地获取回来的 promises 结果。

3: 通过等待，您可以从 async 函数中获得实际的好处：您不需要嵌套的 .then 链。

- Jonas Wilms

---

代码可以运行，但我不知道如何检索数据。我认为应该是这样的：this.setState({ temperature: weather.main.temp, 但我无法取出它。{"coord":{"lon":-5.93,"lat":54.6},"weather":[{"id":500,"main":"Rain","description":"light rain","icon":"10d"}],"base":"stations","main":{"temp":8.77,"pressure":1028,"humidity":61,"temp_min":8.33,... - Stranyka

这是因为您正在使用res.text()解析承诺... 如果您想将其视为JSON对象，请使用res.json()。 - arpit sharma

Answer 2

您可以采用以下更为简洁的方法进行编写，这样可以使您的数据进行分类。"最初的回答"。

const success = res => res.ok ? res.json() : Promise.resolve({});

const weather = fetch(`http://api.openweathermap.org/data/2.5/weather?q=${city}&units=metric&APPID=${API_KEY}`)
.then(success);

const forecast = fetch(`http://api.openweathermap.org/data/2.5/forecast?q=${city}&units=metric&APPID=${API_KEY}`)
.then(success);

return Promise.all([weather, forecast])
.then(([weatherData, forecastData]) => {
const weatherRes = weatherData;
const ForecastRes = forecastData; // you can combine it or use it separately
})
.catch(err => console.error(err));
}

- arpit sharma