Как сделать несколько вызовов API в React Native и Reflux - PullRequest
Новая
       3

Как сделать несколько вызовов API в React Native и Reflux

0 голосов
/ 01 мая 2018

Я следую учебному пособию Индрика Ласна по React / Reflux / Thunk в React Native Training и испытываю трудности с редактированием кода для учета связанных вызовов API.

Ссылка на учебник: https://medium.com/react-native-training/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b

Как объединить несколько вызовов API из API coinmarketcap.com?

Это код, который я думал, будет работать. Инструменты разработчика показывают, что данные поступают для двух вызовов API, но как только второй API загружается в браузер, он заменяет данные из первых данных API в представлении? 

import axios from 'axios';  
import { apiBaseURL } from './../Utils/Constants';  
import {    
  FETCHING_COIN_DATA,  
  FETCHING_COIN_DATA_SUCCESS,           
  FETCHING_COIN_DATA_FAIL  
} from './../Utils/ActionTypes';


export default function FetchCoinData() {
return dispatch => {

    dispatch({ type: FETCHING_COIN_DATA })

     axios.get(`${apiBaseURL}/v1/ticker/bitcoin`)
        .then(res => dispatch({ type: FETCHING_COIN_DATA_SUCCESS, payload: res.data })) 
        .then(() => axios.get(`${apiBaseURL}/v1/ticker/litecoin`))
        .then(res => dispatch({ type: FETCHING_COIN_DATA_SUCCESS, payload: res.data })) 
        .catch(err => {
            dispatch({ type: FETCHING_COIN_DATA_FAIL, payload: err.data })
        });
}
}

Ответы [ 2 ]

0 голосов
/ 01 мая 2018 
async componentDidMount() {
  const firstRequest = await axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p1);
  const secondRequest = await axios.get('https://maps.googleapis.com/maps/api/geocode/json?&address=' + this.props.p2);
  const thirdRequest = await axios.get('https://maps.googleapis.com/maps/api/directions/json?origin=place_id:' + firstRequest.data.results.place_id + '&destination=place_id:' + secondRequest.data.results.place_id + '&key=' + 'API-KEY-HIDDEN');

  this.setState({
    p1Location: firstRequest.data,
    p2Location: SecondRequest.data,
    route: thirdRequest.data,
  });
}
0 голосов
/ 01 мая 2018

Вы можете использовать async библиотеку для одновременного выполнения вызовов API. Вы также можете включить функцию обратного вызова, которая вызывается после получения результата от всех выполненных функций. 

import async from "async";
async.parallel([
  function(callback) {
    axios.get(`${apiBaseURL}/v1/ticker/bitcoin`).then(res => callback(res));
  },
  function(callback) {
    axios.get(`${apiBaseURL}/v1/ticker/ethereum`).then(res => callback(res));
  }
], function(err, results) {
    // after all the api calls are finished
    const bitcoinRes = results[0];
    const ethereumRes = results[1];
});
...