我刚刚开始了一个简单的天气应用程序项目来训练 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
}))
});
}
最佳答案
据我所知,您想在 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
中使用它,这可能是一个更好的主意。
关于javascript - 链接请求,以便我可以在第二个请求中使用第一个请求中的数据,我们在Stack Overflow上找到一个类似的问题: https://stackoverflow.com/questions/47956521/