如何在redux动作中从axios调用获取数据？ React JS搜索项目

Question

I have a search of weather for some cities. I would like to create info modal when a user tries to find a city that is not in the base. In this case I receive 404 error from my API.

I fetch the data every time when user click on search button. I use axios to do it and whole project is based on React and Redux. Everything is clear for me but I have a problem with pass valid response to payload . How should I do it? In an another file and use react component lifecycle?

action.js

export function fetchWeather(city) {
    const url = `${ROOT_URL}&q=${city}`;

    axios.get(url)
    .then(function (response) {
      console.log(response);
    })
    .catch(function (error) { 
      console.log(error);
    });

    return {
        type: FETCH_WEATHER,
        payload: request
    };
}

Answer 1

In your example the return will be called before Axios completes it's API call, because it's asynchronous. One solution to this is to put the return inside the .then like this:

export function fetchWeather(city) {
    const url = `${ROOT_URL}&q=${city}`;

    axios.get(url)
    .then(function (response) {
      // won't get called until the API call completes
      console.log(response);
      return {
        type: FETCH_WEATHER,
        payload: response.data
      };
    })
    .catch(function (error) { 
      // won't get called until the API call fails
      console.log(error);
      return {
        type: FETCH_WEATHER_ERROR,
        payload: error
      };
    });
}

You should also return an error in the catch if the API call is unsuccessful.

Answer 2

In your snippet, request will always be undefined because axios.get is an async operation and return happens before axios.get finishes execution. You do something like this:

export async function fetchWeather(city) {

  try {
    const request = await axios.get(`${ROOT_URL}&q=${city}`);
    // server returned a 2XX response (success)
    return {
      type: FETCH_WEATHER,
      payload: request
    };
  } catch(error) {
    // Network failure or 4XX or 5XX response.
    return {
      type: FETCH_WEATHER_FAIL
      payload: error
    }
  }
}