OpenWeatherMap API 返回“未定义”

Question

My previous questions lacked clarity, so I'll try to be clear as much as possible. I'm trying to create a weather app but every time I try to fetch information (JSON Format) it returns undefined. I am using pure vanilla JavaScript and trying to load Open Weather Map's API. I tried using another API (Free Weather API) but that returned undefined as well. Please note that the websites are loading properly I think its just a problem with my code.

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

The way promise works, you need to transform the response and pass this transform through to the next then pipe.

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);
    });

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

Answer 2

We should use json() method on the response object before doing any kind of operation on the data. Actually json() method takes a Response stream and reads it to completion. It returns a promise. So for consuming the promise returned by response.json() we should use .then() method. On resolving it parses the body text as 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);
        });