React Native中使用Axios Get方法随机出现网络错误求助

以下是针对iOS和Android平台随机出现network error的几种排查及解决方法：

1. 增加超时配置并优化错误日志 #

Axios默认未设置超时时间，网络波动时可能导致请求挂起后触发network error。同时当前错误日志信息不足，无法定位具体原因，先修改代码补充关键配置：

import axios from 'axios';
import { API_KEY, BASE_URL } from '../constants';

const fetchConfigAPI = async () => {
    try {
        const response = await axios.get(`${BASE_URL}/config`, {
            headers: {
                Accept: 'application/json',
                'x-tutor-api-key': API_KEY,
            },
            timeout: 10000, // 设置10秒超时阈值
        });
        return response;
    } catch (error) {
        // 打印详细错误信息，便于定位问题
        console.log('Error details:', {
            message: error.message,
            response: error?.response,
            request: error?.request,
            config: error?.config
        });
        throw error;
    }
};

export default fetchConfigAPI;

2. 创建独立Axios实例并添加重试机制 #

全局Axios实例可能存在连接复用问题，创建单独实例并添加重试逻辑，处理临时网络波动导致的随机错误：

首先安装重试依赖：

npm install axios-retry

修改代码实现实例化与重试配置：

import axios from 'axios';
import axiosRetry from 'axios-retry';
import { API_KEY, BASE_URL } from '../constants';

// 创建独立的Axios实例，隔离全局配置影响
const apiClient = axios.create({
    baseURL: BASE_URL,
    headers: {
        Accept: 'application/json',
        'x-tutor-api-key': API_KEY,
    },
    timeout: 10000,
});

// 配置重试规则：针对网络错误和服务端错误重试3次，采用指数退避延迟
axiosRetry(apiClient, {
    retries: 3,
    retryCondition: (error) => {
        return axiosRetry.isNetworkError(error) || (error.response && error.response.status >= 500);
    },
    retryDelay: axiosRetry.exponentialDelay,
});

const fetchConfigAPI = async () => {
    try {
        const response = await apiClient.get('/config');
        return response;
    } catch (error) {
        console.log('Error details:', {
            message: error.message,
            response: error?.response,
            request: error?.request,
            config: error?.config
        });
        throw error;
    }
};

export default fetchConfigAPI;

3. 检查平台网络安全配置 #

iOS端：ATS配置 #

若API使用HTTP或自签名HTTPS，需在Info.plist中配置ATS规则允许目标域名：

<key>NSAppTransportSecurity</key>
<dict>
    <key>NSAllowsArbitraryLoads</key>
    <false/>
    <key>NSExceptionDomains</key>
    <dict>
        <key>你的API域名</key>
        <dict>
            <key>NSIncludesSubdomains</key>
            <true/>
            <key>NSTemporaryExceptionAllowsInsecureHTTPLoads</key>
            <true/>
            <key>NSTemporaryExceptionMinimumTLSVersion</key>
            <string>TLSv1.2</string>
        </dict>
    </dict>
</dict>

Android端：网络安全配置 #

在res/xml/network_security_config.xml中配置允许的域名：

<?xml version="1.0" encoding="utf-8"?>
<network-security-config>
    <domain-config cleartextTrafficPermitted="true">
        <domain includeSubdomains="true">你的API域名</domain>
    </domain-config>
</network-security-config>

并在AndroidManifest.xml的application标签中引用该配置：

<application
    ...
    android:networkSecurityConfig="@xml/network_security_config">

4. 前置检查网络连接状态 #

发起请求前先检查设备网络状态，避免无网场景触发错误：

import { NetInfo } from '@react-native-community/netinfo';

const fetchConfigAPI = async () => {
    const networkState = await NetInfo.fetch();
    if (!networkState.isConnected) {
        throw new Error('当前无网络连接');
    }
    
    try {
        const response = await apiClient.get('/config');
        return response;
    } catch (error) {
        console.log('Error details:', {
            message: error.message,
            response: error?.response,
            request: error?.request,
            config: error?.config
        });
        throw error;
    }
};

内容的提问来源于stack exchange，提问作者Naveen M