OpenWeatherMap API 返回 'undefined'

Question

我之前的问题不够清晰，所以我会尽量说清楚。我正在尝试创建一个天气应用程序，但每次我尝试 fetch 信息（JSON 格式）时，它 returns 未定义。我正在使用纯香草 JavaScript 并尝试加载 Open Weather Map 的 API。我尝试使用另一个 API（Free Weather API），但它也返回了 undefined。请注意，网站加载正常，我认为这只是我的代码有问题。

fetch('http://api.openweathermap.org/data/2.5/weather?q=Traralgon&appid=a211b9a621afd7714296d94616623dea&units=metric').then(function (response) {
    console.log('success!', response.main);
}).catch(function (err) {
    console.warn('Something went wrong.', err);
});

Answer 1

Promise 的工作方式，您需要转换响应并将此转换传递到下一个 then 管道。

fetch(
    'http://api.openweathermap.org/data/2.5/weather?q=Traralgon&appid=a211b9a621afd7714296d94616623dea&units=metric'
  )
    .then(function (response) {
      return response.json();
    })
    .then(function (responseJSON) {
      console.log('success!', responseJSON.main);
    })
    .catch(function (err) {
      console.warn('Something went wrong.', err);
    });

解释：https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise

Answer 2

在对数据进行任何操作之前，我们应该在响应对象上使用 json() 方法。实际上 json() 方法接受一个 Response 流并将其读取完成。它 returns 一个承诺。因此，为了使用 response.json() 返回的承诺，我们应该使用 .then() 方法。在解析时，它将正文解析为 JSON.

fetch('http://api.openweathermap.org/data/2.5/weather?q=Traralgon&appid=a211b9a621afd7714296d94616623dea&units=metric')
        .then(function (response) {
           // parsing the body of response object
            return response.json();
        })
        .then(function (response) {
            console.log('sucess', response.main);
        })
        .catch(function (err) {
            console.warn('Something went wrong.', err);
        });

OpenWeatherMap API 返回 'undefined'

OpenWeatherMap API returning 'undefined'

javascript

json

openweathermap