使用 React Native 获取多个 API 请求答案

【问题标题】：Fetching multiple API requests with React Native使用 React Native 获取多个 API 请求
【发布时间】：2016-01-11 07:50:18
【问题描述】：

这是我的代码大纲（省略了一些细节）。基本上我只想在单击一个按钮时发出两个类似的 API 请求，然后有一个函数可以处理两个请求的结果，但我无法弄清楚。

class myClass extends Component {

      constructor(props) {
        super(props);
        this.API_KEY_ONE = ‘firstapikey’
        this.API_KEY_TWO = ‘secondapikey’
        this.state = {
           city: 'undefined',
           state: 'undefined'
        }
      }

callOne() {
    this.REQUEST_URL = 'https://api.wunderground.com/api/' + this.API_KEY_ONE +    '/geolookup/conditions/astronomy/forecast/q/.json';

    fetch(this.REQUEST_URL).then((response) => response.json()).then((responseData)  => {

       this.setState({
        city: responseData.location.city
        });

    }).done();
}

 callTwo() {
      this.REQUEST_URL = 'https://api.DifferentSite.com/api/' + this.API_KEY_TWO +  '/geolookup/conditions/astronomy/forecast/q/.json';

      fetch(this.REQUEST_URL).then((response) => response.json()).then((responseData) => {

         this.setState({
        state: responseData.location.state
         });

     }).done();
}

// where to put this? when both requests finish, pass both to new component

this.props.navigator.push({
    title: 'Forecast',
    component: Forecast,
    passProps: {city: this.state.city, state: this.state.state}
  });


getForecast() {
     this.callOne();
     this.callTwo();
}

<TouchableHighlight onPress={() => this.getForecast()} />

【问题讨论】：

标签： api promise fetch react-native react-router

【解决方案1】：

您可以继续使用.then()，所以它应该是这样的：

callBoth(){
    var request_1_url = 'https://api.wunderground.com/api/' + this.API_KEY_ONE +    '/geolookup/conditions/astronomy/forecast/q/.json';
    var request_2_url = 'https://api.DifferentSite.com/api/' + this.API_KEY_TWO +  '/geolookup/conditions/astronomy/forecast/q/.json';

    fetch(request_1_url).then((response) => response.json()).then((responseData)  => {
        this.setState({
            city: responseData.location.city
        });
    }).then(()=>{
        fetch(request_2_url).then((response) => response.json()).then((responseData) => {
         this.setState({
            state: responseData.location.state,
            isFinish: true
         });
     }).done();
    }).done();
}

【讨论】：

【解决方案2】：

1) 看来您正在使用city 和state 作为 passProps 而不会刷新 currentView，所以也许您应该将它们用作当前组件的变量。

2) 你可以简单地使用一个变量来记录抓取的状态。和设置_finish = 0一样，当city被获取时，_finish = _finish + 1，并验证_finish是否等于2。当state被获取时，做同样的验证。

fetch(...){
   // if _finish is equals 2, navigator push.
}

3) 或者你可以在没有额外变量的情况下做到这一点：

fetch(...){
   if (this._city && this._state){
      // navigator push
   }
}

【讨论】：