react-redux - 如果 API 不使用 redux 提供数据,如何显示 25000 毫秒的超时?
问题描述
我是反应和减少的新手。我已经使用 redux 实现了 API 获取,但是如果 API 没有给出特定时间的数据,我不确定我应该在哪里放置 Timeout 的代码。一切正常我也在获取数据。我唯一坚持的是如何显示超时。有没有办法做到这一点?提前致谢 :)
减速器.js
export const GET_REPOS = 'my-awesome-app/repos/LOAD';
export const GET_REPOS_SUCCESS = 'my-awesome-app/repos/LOAD_SUCCESS';
export const GET_REPOS_FAIL = 'my-awesome-app/repos/LOAD_FAIL';
const initialState = {
repos: [],
loading: false,
error: null
};
export default function reducer(state = initialState , action) {
switch (action.type) {
case GET_REPOS:
return { ...state, loading: true };
case GET_REPOS_SUCCESS:
return { ...state, loading: false, repos: action.payload.data };
case GET_REPOS_FAIL:
return {
...state,
loading: false,
error: 'Error while fetching repositories',
};
default:
return state;
}
}
export function listRepos(photos) {
return {
type: GET_REPOS,
payload: {
request: {
url: `photos/`
}
}
};
}
export function listThumb(albumId) {
return {
type: GET_REPOS,
payload: {
request: {
url: `photos?albumId=${albumId}`
}
}
};
}
主页.js
import React, { Component } from 'react';
import { ActivityIndicator } from 'react-native-paper';
import { View, Text, FlatList, StyleSheet, TouchableOpacity } from 'react-native';
import { connect } from 'react-redux';
import styles from '../HomeComponent/style';
import { Ionicons } from '@expo/vector-icons';
import { listRepos } from '../../../reducer';
import ErrorAlert from '../../common/ErrorAlertComponent/errorAlert';
class Home extends Component {
componentDidMount() {
this.props.listRepos('');
}
FlatListItemSeparator = () => (
<View style={styles.flatListItemSeparator} />
)
renderItem = ({ item }) => (
<View style={styles.listRowContainer}>
<TouchableOpacity onPress={() => this.props.navigation.navigate('ThumbnailViewScreen', {
albumID: item.id,
})} style={styles.listRow}>
<View style={styles.listTextNavVIew}>
<Text style={styles.albumTitle}> {item.title} </Text>
<Ionicons name='md-arrow-dropright' style={styles.detailArrow} />
</View>
</TouchableOpacity>
</View>
);
render() {
const { error, loading, products } = this.props;
if (error) {
return <ErrorAlert />;
}
if (loading) {
return (
<View style={{ flex: 1, paddingTop: 30 }}>
<ActivityIndicator animating={true} size='large' />
</View>
);
}
const { repos } = this.props;
return (
<View style={styles.MainContainer} >
<FlatList
styles={styles.container}
data={repos}
renderItem={this.renderItem}
ItemSeparatorComponent={this.FlatListItemSeparator}
/>
</View>
);
}
}
const mapStateToProps = state => {
let storedRepositories = state.repos.map(repo => ({ key: repo.id.toString(), ...repo }));
return {
repos: storedRepositories,
loading: state.loading,
error: state.error
};
};
const mapDispatchToProps = {
listRepos
};
export default connect(mapStateToProps, mapDispatchToProps)(Home);
解决方案
首先,您应该为您的 axios 创建入口点。例如:
import axios from 'axios/index';
const api = axios.create({
baseURL: 'site.com',
timeout: 25000,
});
export default api;
并将其导入您进行 api 调用的地方:
import api from 'yourDirectory';
并使用这个入口点:
api.get(url)
如果请求时间过长 axiostimeout
在 25000ms 后抛出错误
推荐阅读
- sybase - SQL Anywhere if..elseif..else 语法错误
- php - 如何将 Wordpress 的“nav_menu_link_attributes”添加到特定菜单?
- python - 如何从装饰器装饰的函数中访问在装饰器中声明的日志记录对象?
- powershell - 从文件夹复制项目并将日期附加到文件名。修改后文件不会关闭
- javascript - Vue没有将数据绑定到图像src
- python - 合并数据框的列并用零填充空数字
- javascript - 反应形式 Angular 格式输入数据
- javascript - 在 Javascript 中显示瓷砖地图
- c# - 如何删除数据网格和数据库中的多行?
- c# - LiveCharts 中运行时的多轴