Question

我正在构建一个天气应用程序，并希望创建一个可重用的函数来发出AJAX请求，但我无法弄清楚如何使它工作。我的代码解释了我想要的东西比文字更好。如何使此功能正常工作？

fetchWeather(reqCity) {
var city = reqCity
var searchText = ...a lot of stuff
var results

axios.get(`https://query.yahooapis.com/v1/public/yql?q=${searchText}&format=json`)
.then(response => results = response.data.query.results.channel.item.condition)

return results //doesn't work because of asynchronicity
}

componentDidMount() {
var weatherInMoscow = this.fetchWeather('Moscow')
this.setState({
  moscow: weatherInMoscow 
})
}

Answer 1

您可以利用多种方法来实现这一目标。最简单的方法之一是传递callback函数并在callback（cb）中执行所需的操作。

fetchWeather(reqCity, cb) {
 var city = reqCity
 var searchText = ...a lot of stuff
 var results

 axios.get(`https://query.yahooapis.com/v1/public/yql?q=${searchText}&format=json`)
 .then(response => cb(response.data.query.results.channel.item.condition))
}

在您呼叫的地方，您发送与此类似的回调并在其中执行所需的操作。

componentDidMount() {
 var weatherInMoscow = this.fetchWeather('Moscow', (data) => {
   this.setState({
    moscow: data 
   })
 })
}

注意：此代码未说明如何处理错误。你需要在cb（回调）函数中添加逻辑来处理错误（如果有的话）。

为AJAX请求创建可重用的函数

1 个答案: