React Native中Fetch请求超时设置及网络连通性检测咨询

一、简便的Fetch超时实现方式 #

原生Fetch API确实没有内置超时配置，最常用且简洁的方案是借助Promise.race()，让你的请求和一个超时Promise“竞争”，谁先完成就取谁的结果。

这里是修改后的完整代码示例，直接就能用：

// 封装带超时的Fetch工具函数
const fetchWithTimeout = (url, options, timeout = 30000) => {
  return Promise.race([
    fetch(url, options),
    new Promise((_, reject) => {
      setTimeout(() => {
        reject(new Error('Timeout happened'));
      }, timeout);
    })
  ]);
};

// 实际调用示例
const objReq = { /* 你的请求体数据 */ };

fetchWithTimeout('url', {
  method: "POST",
  headers: {
    'Accept': '*/*',
    'Content-Type': 'application/json',
  },
  body: JSON.stringify(objReq)
})
.then(response => response.text())
.then(responseJson => {
  if (responseJson != null && responseJson != undefined) {
    // 这里写你的正常响应处理逻辑
  }
})
.catch(error => {
  if (error.message === 'Timeout happened') {
    alert('Timeout happened'); // 触发超时提示
  } else {
    alert(error + " from error");
    console.error(error);
  }
});

原理说明： #

• Promise.race()会同时监听传入的所有Promise，只要有一个先完成（不管是成功resolve还是失败reject），就会返回这个结果。
• 我们同时发起Fetch请求和一个30秒后主动reject的Promise，如果30秒内请求没完成，超时Promise就会先触发，直接进入catch分支，刚好能弹出你需要的超时提示。

二、调用API前的网络连通性检测建议 #

在React Native中，推荐使用@react-native-community/netinfo库来检测网络状态，它能准确判断设备是否联网，还能区分WiFi/蜂窝网络等类型。

步骤1：安装依赖 #

# React Native 0.60+版本支持自动链接，直接安装即可
npm install @react-native-community/netinfo
# 或者用yarn
yarn add @react-native-community/netinfo

步骤2：在调用API前做网络检查 #

你可以封装一个检测函数，发起请求前先确认网络状态：

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

// 异步检测网络连接状态
const checkNetworkStatus = async () => {
  const networkState = await NetInfo.fetch();
  return networkState.isConnected;
};

// 封装完整的API调用流程
const makeApiCall = async () => {
  const isConnected = await checkNetworkStatus();
  if (!isConnected) {
    alert('请检查你的网络连接');
    return;
  }

  // 网络正常，再调用带超时的Fetch
  try {
    const response = await fetchWithTimeout('url', {
      method: "POST",
      headers: {
        'Accept': '*/*',
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(objReq)
    });
    const responseJson = await response.text();
    if (responseJson != null && responseJson != undefined) {
      // 处理正常响应
    }
  } catch (error) {
    if (error.message === 'Timeout happened') {
      alert('Timeout happened');
    } else {
      alert(error + " from error");
      console.error(error);
    }
  }
};

额外小建议： #

• 网络检测只能判断设备是否有网络，但没法保证服务器一定可达，所以超时处理仍然必不可少，两者结合能大幅提升用户体验。
• 你还可以监听网络状态的实时变化，比如在App启动时注册监听，随时提醒用户网络状态变更：

NetInfo.addEventListener(networkState => {
  if (!networkState.isConnected) {
    alert('网络连接已断开');
  }
});

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