React.js 中的嵌套 API 调用答案

【问题标题】：Nested API calls in React.jsReact.js 中的嵌套 API 调用
【发布时间】：2016-01-27 08:14:57
【问题描述】：

我正在 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

【问题讨论】：

“可以在第一次API调用成功函数下运行ajax调用吗？” 当然可以。 success 函数只是另一个函数。您可以在其中执行任何其他 JavaScript。

标签： javascript api reactjs

【解决方案1】：

我会建议您遵循 Flux 模式来提出您的请求，尤其是.. 但是您可以使用您所拥有的东西提出一个链式请求

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)
        });
    }
});

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

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
    });
}

【讨论】：

再次感谢 - 我之前遇到过 Flux，但还没有完全掌握语法 + 设置。我最终使用了您为 spotify api 调用创建第二个函数的第一个示例 - 然后在第一个成功函数下调用该函数..！
@YNINNY 确定。 Flux 的美妙之处在于，您可以将数据从子节点传递给任何父节点，也可以将所有附加组件都监听一个商店...也就是状态就是商店值

【解决方案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 了解更多信息。

【讨论】：