Как сделать запрос API с другим результатом API в ReactJS? - PullRequest
Новая
       13

Как сделать запрос API с другим результатом API в ReactJS?

0 голосов
/ 21 июня 2019

Как я могу сделать запрос API с результатами другого API?

Это для исторического приложения погоды. Я хочу использовать 3 API, один для широты и долготы, другой, который требует параметров широты и долготы и возвращает близлежащую id-станцию, а последний - для параметров id-станции от второго и возвращает температуру.

async componentDidMount(){ axios .get('https://api.apixu.com/v1/current.json?key=' + WEATHER_KEY + '&q=' + 'navodari') .then(res => { this.setState({ lat: res.data.location.lat, lon: res.data.location.lon }); return axios.get('https://api.meteostat.net/v1/stations/nearby?lat='+ this.state.lat+'&lon'+ this.state.lon +'&limit=1&key=' + STATION_KEY); }) .then(res => { this.setState({ station: res.data.id }); return axios.get('https://api.meteostat.net/v1/history/daily?station=' + this.state.station + '&start=' +this.state.start + '&end=' +this.state.start+ '&key=' + STATION_KEY); }) .then(response => { this.setState({ temp: response.data.temperature}); console.log(this.state.temp); }).catch(error => console.log(error.response));

Я ожидал сделать состояние temp с response.data.temperature, но это дает мне ошибку, что

станция не определена. ("400 BAD REQUEST")

Не могли бы вы посоветовать мне правильное решение?

Ответы [ 2 ]

0 голосов
/ 22 июня 2019

Решение, опубликованное Виджаем Меноном, должно работать, но многократный вызов setState вызовет несколько рендеров, которые могут быть менее эффективными.Кроме того, использование async / await другим способом может сделать код более читабельным: 

async componentDidMount(){
    try {
        const latlongdata = await axios.get('https://api.apixu.com/v1/current.json?key=' + WEATHER_KEY + '&q=' + 'navodari');
        const lat = latlongdata.data.location.lat;
        const lon = latlondata.data.location.lon;
        const stationdata = await axios.get('https://api.meteostat.net/v1/stations/nearby?lat=' + lat + '&lon' + lon + '&limit=1&key=' + STATION_KEY);
        const station = stationdata.data.id;
        const tempdata = await axios.get('https://api.meteostat.net/v1/history/daily?station=' + this.state.station + '&start=' + this.state.start + '&end=' + this.state.start + '&key=' + STATION_KEY);
        const temp = tempdata.data.temperature;
        this.setState({
            lat,
            lon,
            station,
            temp
        });
    } catch (err) {
        console.log(err);
    }
}
0 голосов
/ 21 июня 2019

Пример ниже, где вы используете async / await и вызываете следующий API в обратном вызове для предыдущего setState, чтобы убедиться, что состояние обновляется (поскольку обновления состояния также являются асинхронными): 

async componentDidMount(){
  let latlongdata ,stationdata,tempdata;
try {
        latlongdata = axios.get('https://api.apixu.com/v1/current.json?key=' + WEATHER_KEY + '&q=' + 'navodari')
          this.setState({ lat: latlongdata.data.location.lat,
                            lon: latlongdata .data.location.lon
                         },() => {
      stationdata = axios.get('https://api.meteostat.net/v1/stations/nearby?lat='+ this.state.lat+'&lon'+ this.state.lon +'&limit=1&key=' + STATION_KEY);
        this.setState({ station : stationdata.data.id },() {
         tempdata = axios.get('https://api.meteostat.net/v1/history/daily?station=' + this.state.station + '&start=' +this.state.start + '&end=' +this.state.start+ '&key=' + STATION_KEY);
      this.setState({ temp: tempdata.data.temperature});
 });
});
} catch(err) {
     console.log(err);
}
}
...