передача данных обратно в вызывающую функцию асинхронного запроса

Question

Я прочитал этот ответ на возврате данных из асинхронных запросов , но мне все еще трудно определить, как применить эти ответы в моем приложении.

В приведенном ниже коде я пытаюсьполучить доступ к возвращенному результату асинхронного запроса getWeather и использовать эти данные в jsx, который следует в приведенном ниже операторе return getWeather.

Я заметил ответы на вопрос предыдущего OP, сказанные для обработки результатов в функции обратного вызова, но я не знаю, как получить это обратно по цепочке в результате вызова getWeather.

Мой вопрос - как я могу передать эти данные обратно и получить доступ к ним внутри функции FiveDayWeather?

const URL = `http://api.openweathermap.org/data/2.5/forecast?zip=94040&appid=${OPEN_WEATHER_KEY}`

const FiveDayWeather = () => {
  let days = getWeather()

  return(
    <div className="five-day-weather">
      <div className="day-of-week-item">
        <div className="day">Hi Again</div>
        <div className="image-indicator"></div>
        <div className="temp"></div>
      </div>
    </div>
  )
}

function getWeather() {
  axios.get(URL)
    .then(function(response) {
      handleData(response)
    })
}

function handleData(response) {
  return response
}

Answer 1

Вы должны сделать вызов API в методе componentDidMount и установить результат в state компонента.Затем в вашем методе рендеринга вам нужно использовать state.

constructor(props) {
    super(props);
    this.state = {
      error: null,
      isLoaded: false,
      days: []
    };

  }

getWeather() {
  axios.get(URL)
    .then(response => {
       this.setState({
           isLoaded: true,
           days: response //Set the right value here from response
       });
    }).catch( error => {
       this.setState({
           isLoaded: true,
           error
       }); 
    });
 }

render() {
    const { error, isLoaded, days } = this.state;
    if (error) {
      return <div>Error: {error.message}</div>;
    } else if (!isLoaded) {
      return <div>Loading...</div>;
    } else {
      return (
        // your template to show the data goes here
      );
    }
  }

. Обратитесь к документации ReactJS для AJAX здесь .

Answer 2

Ваша функция getWeather() ничего не возвращает, а handleData() не выполняет то, что вы думаете.

Вместо большого количества возвратов, вы должны попробовать функцию async.axios работает асинхронно.Таким образом, await будет ожидать получения данных из axios, а затем вернет их.Попробуйте вот так:

async function getWeather() {
 return await axios.get(URL)
}