Question

我在React中创建一个Web应用程序，需要处理2个API调用，其中一个依赖于另一个。第一个API调用将从OpenWeather API获取数据 - 然后第二个API调用将使用该回调数据来调用Spotify的API。

如何在React中设置此嵌套/依赖API调用？我可以在第一个API调用的成功函数下运行ajax调用吗？或者我是否需要创建一个处理第二个API的新组件，它将以某种方式从第一个API调用中获取数据？

    // Making the API call to OpenWeather API:
var CityInfo = React.createClass({
    getInitialState: function() {
        return {data: {}};
    },
    loadCityInfo: function(e){
    var city = $(e.currentTarget).data('city');
        $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?q='+city,
            method: 'GET',
            success: function(result) {
                this.setState({data: result});
                console.log(result);

            }.bind(this)
        });
    },
    render: function() {
        return (
            <div>
                <h2><button onClick={this.loadCityInfo} data-city={this.props.info.name}>{this.props.info.name}</button></h2>
            </div>
        );
    }
});

完整代码：https://jsbin.com/lefupo/edit?js,output

Answer 1

我建议您按照助焊剂模式特别提出要求..但是如果你有什么，你可以提出链式请求

var CityInfo = React.createClass({
    loadCityInfo: function(e){
        var city = $(e.currentTarget).data('city');
        $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?q='+city+"&APPID=3c8e84ea9c6f7938384d3c3980033d80",
            method: 'GET',
            success: function(result) {
                this.setState({data: result});
                console.log(result);
                // make request here
            }.bind(this)
        });
    }
});

现在除了使用flux模式执行此操作之外，还有一个执行请求的操作文件..

module.exports = {
    loadWeather: function(city){
        return $.ajax({
            url: 'http://api.openweathermap.org/data/2.5/weather?q='+city+"&APPID=3c8e84ea9c6f7938384d3c3980033d80",
            method: 'GET'
        });
    },
    loadSpotify: function(params){
        //do request here
    }
}

然后在你的loadcity函数中你可以这样做

loadCityInfo: function(e){
    var city = $(e.currentTarget).data('city');
    actions.loadWeather(city).done(function(res){
        //set your state
        actions.loadSpotify(params)
    }).fail(funciton(res){
        //handle fail
    });
}

Answer 2

我可以在第一个API调用的成功函数下运行ajax调用吗？

当然。 success函数只是另一个函数。您可以在其中执行任何其他JavaScript。

但是，利用$.ajax返回承诺的事实会更清晰。所以你可以写这个：

getWeatherData(city) // contains the Ajax call to OpenWeather
.then(getSpotifyData) // contains call to Spotify, gets passed result from getWeatherData
.then(function(result) {
  // update state
});

有关详细信息，请参阅Deferreds。

React.js

2 个答案: