[英]How to make multiple API calls within React Native and Reflux
I am following Indrik Lasn's React/Reflux/Thunk tutorial in React Native Training and having a hard time editing the code to allow for chained API calls. 我正在关注React Native Training中Indrik Lasn的React / Reflux / Thunk教程,并且很难编辑代码以允许链接的API调用。
Tutorial Link: https://medium.com/react-native-training/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b 教程链接: https : //medium.com/react-native-training/learn-how-to-build-a-rn-redux-cryptocurrency-app-chapter-iii-a454dda156b
How do I chain multiple API calls from coinmarketcap.com's API? 如何链接来自coinmarketcap.com API的多个API调用?
This is the code I thought would work. 这是我认为可行的代码。 Developer tools shows the data is coming in for the 2 API calls but once the 2nd API loads into the browser, it replaces the data from the 1st API data within the view? 开发人员工具显示有2个API调用需要输入数据,但是将2nd API加载到浏览器后,它会替换视图中1st 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 })
});
}
}
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,
});
}
You can use async library to make the API calls all at the same time. 您可以使用异步库同时进行所有API调用。 You can also include a callback function which is invoked after the result from all the executed functions is received. 您还可以包括一个回调函数,该函数将在收到所有已执行函数的结果后调用。
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];
});
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.