reactjs - 在 React Js 中管理多个 HTTP 请求操作
问题描述
现在我正在 ReactJS 做一个更大的项目。我现在有一个页面,我需要从该页面的多个 URL (API) 获取数据。也就是说,我需要得到 40 多个这样的结果列表:城市、县、类别、性别等。这一切都在单独的 URL 中。就像那样:
https://API_URL/users
https://API_URL/country-list
https://API_URL/city
https://API_URL/gender
and etc...
我目前正在使用以下方法来获得一个。
componentDidMount() {
this.setState({
isLoading: true
});
axios.get(API_URL + '/country-lists', {
headers: {
Authorization: GetTokens
}
})
.then(response => response.data)
.then(
(result) => {
this.setState({
countries: result.data,
isLoading: false
});
},
(error) => {
this.setState({
error,
isLoading: false
});
}
)
}
我发现了一些额外的选项,比如 promises、axios.all()。但我想知道它们是否可以成为一个完整的解决方案。
axios.all([
axios.get(https://API_URL/users'),
axios.get(https://API_URL/country-list'
...)
])
.then(axios.spread((countries, users) => {
// ... });
和
Promise.all([users, countries, products]).then(function(values) {
...
});
您应该使用哪种方式来获取此类数据或者是否有更好的解决方案?同时,考虑到互联网连接和各种错误。
解决方案
我认为 Axios 都是最好的解决方案......
我还建议您看一下这个链接,其中提出了执行多个异步调用的绝佳解决方案: AsynPipe
推荐阅读
- mongodb - casbah_2.12 不能与 MongoDB 4.0.0 一起使用
- c - 在 C 中将指针作为参数发送
- css - 最小宽度与最大宽度
- react-native - 内部的图像反应原生 FlatList 淡入,而不是仅仅被预渲染
- javascript - 从 mongodb 生成持续 1 天的随机文档
- python - 如何在不更改父类的情况下从父类正确继承方法?
- regex - 如何通过 typeorm 和 nest.js 中的正则表达式正确设置验证
- python - 如果满足条件,将列表系列中的 -n 元素附加到另一个列表系列
- jquery - 获取 img 的 src 值并将另一个元素作为背景图像
- c# - ScrollView 在 Xamarin Forms 中的另一个 ScrollView 内