Вложенные вызовы API в React.js

Question

Я создаю веб-приложение в React, которое должно обрабатывать 2 вызова API, где один зависит от другого. Первый вызов API будет захватывать данные из API OpenWeather, а затем второй вызов API будет использовать данные обратного вызова для вызова API Spotify.

Как настроить этот вложенный/зависимый API-вызов в React? Можно ли запустить вызов ajax в функции успеха первого вызова API? Или мне нужно создать новый компонент, который обрабатывает второй 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) 
     }); 
    } 
}); 

теперь, в стороне способ, которым вы можете сделать это с помощью шаблона потока, - это файл действий, который выполняет запросы.

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

Могу ли я запустить вызов Ajax под функцией успеха первого вызова API?

Конечно. Функция 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 для получения дополнительной информации.