链接请求，以便我可以在第二个请求中使用第一个请求中的数据

Question

我刚刚开始了一个简单的天气应用程序项目来训练 React 和数据获取。

import React, { Component } from 'react';
import './App.css';

import axios from 'axios';


class App extends Component {

  constructor(props) {
    super(props);

    this.state = {
      city: "",
      id: 0
    }

    this.choseCity = this.choseCity.bind(this);
    this.cityName = this.cityName.bind(this);
    this.cityInfo = this.cityInfo.bind(this);
  }


  chooseCity(e) {
    console.log(e.target.value)
    this.setState({
      city: e.target.value
    });
  }


  cityName() {
    axios.get(`https://www.metaweather.com/api/location/search/?query=${this.state.city}`)
      .then(res => res.data)
      .then(data => this.setState({
        city: data[0].title,
        id: data[0].woeid}))
  }

  cityInfo() {
    axios.get(`https://www.metaweather.com/api/location/${this.state.id}/`)
      .then(res => console.log(res.data))
  }


  render() {
    return (
      <div className="App">
        <input type="text" placeholder="Enter city name" value={this.state.city} onChange={this.chooseCity}/>
        <button onClick={this.cityName}>Name</button>
        <button onClick={this.cityInfo}>Info</button>

      </div>
    );
  }
}

export default App;

因此，我有 2 个函数（cityName 和 cityInfo）可以在 2 个不同的 onClick 事件上执行。他们似乎都独立工作。

cityName() 请求存储在我所在州的数据。
cityInfo() 在请求的 url 中使用此状态以获取更多信息。

我试图将它们链接起来以便能够在一次调用中检索所有数据，但是由于它们都是异步的，所以我的第二个请求在第一个请求的数据存储在我的状态之前开始，并且api 没办法在一个请求中直接获取我需要的信息。

我已经尝试了一些方法，比如将它们分组到一个函数中，但到目前为止还没有定论。

解决方案：@elsyr

这是如何在一个函数中链接，在请求之间使用数据：

cityInfo() {
    axios.get(`https://www.metaweather.com/api/location/search/?query=${this.state.city}`)
      .then(res => res.data)
      .then(data => {
        axios.get('https://www.metaweather.com/api/location/' + data[0].woeid)
          .then(res => res.data)
          .then (data => this.setState({
            info: data
          }))
      });
  }

Answer 1

据我所知，您想在 cityName 中设置状态后立即触发 cityInfo 中的调用。

这是完全可能的 - setState 是异步的（您似乎已经明白了），但是 setState 也有一个可选的 callback parameter 供您使用。回调保证在状态修改后触发。

您的代码在 cityName 中可能如下所示：

cityName() { axios.get(`https://www.metaweather.com/api/location/search/?query=${this.state.city}`) .then(res => res.data) .then(data => this.setState({ city: data[0].title, id: data[0].woeid}), this.cityInfo); // callback here! runs after the state is set! }

您的另一个选择是将您的 axios 调用链接在一起。如果我们在这里查看您的代码块：

cityName() { axios.get(`https://www.metaweather.com/api/location/search/?query=${this.state.city}`) .then(res => res.data) .then(data => { // data here already contains the id - data[0].woeid // we can just use it here to kick off another request - something like: // axios.get('https://www.metaweather.com/api/location/' + data[0].woeid) }); }

因为您使用了 .then()，所以您知道在开始 cityInfo 通话之前您一定会获得数据。这可能需要更多的重构，但如果你只保留 cityName 的状态以在 cityInfo.
中使用它可能是一个更好的主意

链接请求，以便我可以在第二个请求中使用第一个请求中的数据

Chain requests so I can use data from my first request in my second one

javascript

httprequest

reactjs

axios