React Native Expo 应用程序中的 RefreshView 超时答案

【问题标题】：Timeout for RefreshView in React Native Expo AppReact Native Expo 应用程序中的 RefreshView 超时
【发布时间】：2019-08-25 20:29:55
【问题描述】：

我当前的 React Native Expo 应用程序有一个实现 RefreshControl 的 ScrollView。用户拉下ScrollView 将导致onRefresh 函数被执行，该函数又调用动作创建者getSpotPrices 使用axios 查询API。

问题：如果出现网络问题，axios.get() 函数将需要很长时间才能超时。因此，需要实现axios.get() 或onRefresh 的超时。

我们如何在RefreshControl 中实现超时功能？

/src/containers/main.js

import React, { Component } from 'react';
import { connect } from 'react-redux';
import { ScrollView, RefreshControl } from 'react-native';

import MyList from '../components/MyList';
import { getSpotPrices } from '../actions';

class RefreshableList extends Component {

    onRefresh = () => {
        this.props.getSpotPrices();
    }

    render() {
        return (
            <ScrollView 
                refreshControl={
                    <RefreshControl 
                        refreshing={this.props.isLoading}
                        onRefresh={this._onRefresh}
                    />
                }>
                <MyList />
            </ScrollView>
        )
    }
}

const mapStateToProps = (state) => {
    return {
        isLoading: state.currencies.isLoading,
    }
}

const mapDispatchToProps = (dispatch) => {
    return {
        getSpotPrices: () => dispatch(getSpotPrices()),
    }
}

export default connect(mapStateToProps, mapDispatchToProps)(RefreshableList);

/src/actions/index.js

import api from "../utils/api";
import * as types from "../types";
import Axios from "axios";

const getSpotPrice = async () => {
  try {
    const res = await Axios.get(`https://api.coinbase.com/v2/prices/spot`);
    return parseFloat(res.data.data.amount);
  } catch (err) {
    throw new Error(err);
  }
};

export const getSpotPrices = () => async dispatch => {
  try {
    const price = await getSpotPrice();
    dispatch({
      type: types.CURRENCIES_SET,
      payload: price
    });
  } catch (err) {
    dispatch({
      type: types.CURRENCIES_FAILED_FETCH,
      payload: err.toString()
    });
  } finally {
    dispatch({
      type: types.CURRENCIES_IS_LOADING,
      payload: false
    })
  }
};

/src/reducers/currencies.js

import * as types from "../types";

const initialState = {
  data: {},
  isLoading: false,
};

export default (state = initialState, { type, payload }) => {
  switch (type) {

    case types.CURRENCIES_SET:
      return {
        ...state,
        data: payload,
        error: "",
        isLoading: false
      };

    case types.CURRENCIES_FAILED_FETCH:
      return {
        ...state,
        error: payload,
        isLoading: false
      };

    case types.CURRENCIES_IS_LOADING:
        return {
            isLoading: payload
        }

    default:
      return state;
  }
};

【问题讨论】：

在我看来，你应该在发出网络请求之前检查你的网络，你可以使用这个库来检查网络状态。 (github.com/react-native-community/react-native-netinfo)

标签： javascript reactjs react-native axios expo

【解决方案1】：

检查用户是否连接互联网或没有使用react-native-netinfo library

NetInfo.fetch().then(state => { console.log("连接类型", state.type); console.log("连接了吗？", state.isConnected); this.setState({ connected: state.isConnected }); });

//订阅常量取消订阅 = NetInfo.addEventListener(状态 => { console.log("连接类型", state.type); this.setState({ connected: state.isConnected }); }); // 取消订阅取消订阅（）；
在所有 api 调用中添加超时通常是一个好习惯，在 axios 中您可以轻松添加超时选项，例如：

await axios.get(url, { headers, timeout: 5000 })

所以在你的情况下修改 axios 调用为

await Axios.get(https://api.coinbase.com/v2/prices/spot, { timeout: 5000 } );

我设置了5秒的超时时间，你可以根据需要修改参数。

【讨论】：