React Native Expo App中RefreshView的超時

Question

我當前的React Native Expo應用程序具有一個實現RefreshControl的ScrollView 。 用戶拉下ScrollView將導致執行onRefresh函數，該函數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;
  }
};

Answer 1

1. 使用react-native-netinfo庫檢查用戶是否已連接Internet

   NetInfo.fetch（）。then（state => {console.log（“ Connection type”，state.type）; console.log（“是否已連接？”，state.isConnected）; this.setState（{connected：狀態。已連接 }）; }）;

   //訂閱const取消訂閱= NetInfo.addEventListener（狀態=> {console.log（“連接類型”，state.type）; this.setState（{已連接：state.isConnected}）;}）; //取消訂閱unsubscribe（）; <-在componentwillunmount中執行此操作

2. 在axios中的所有api調用中添加超時通常是一個好習慣，您可以輕松地添加一個超時選項，例如：

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

因此，在您的情況下，將axios調用修改為

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

我設置了5秒鍾的超時時間，您可以根據需要修改參數。