React Native中如何区分AbortController的超时终止与前序请求终止？

我明白你遇到的问题了——React Native 0.63.3还不支持AbortController.abort()的reason参数，导致你没法区分超时自动终止和手动终止前序请求这两种AbortError。其实我们可以利用JavaScript的动态特性，给AbortController实例手动添加自定义标记来解决这个问题，具体实现如下：

修改核心逻辑：给AbortController添加自定义终止标记 #

我们可以在触发终止操作时，给对应的AbortController实例附加一个自定义属性（比如abortReason），用来标记终止的原因。之后在catch块里，通过检查这个属性就能区分不同的终止场景了。

1. 更新请求函数，标记超时终止

async function request(url, abortController) {
  // 手动设置超时定时器
  const timeoutRef = setTimeout(() => {
    // 标记终止原因为超时
    abortController.abortReason = 'timeout';
    abortController.abort();
  }, 90000); // CASE 1: 超时自动终止

  try {
    const response = await fetch(url, { signal: abortController.signal });
    clearTimeout(timeoutRef); // 请求成功，清除超时定时器
    return response;
  } catch (e) {
    clearTimeout(timeoutRef); // 请求失败/终止时，也要清除定时器避免内存泄漏
    throw e; // 继续抛出异常，让上层函数处理
  }
}

2. 更新搜索函数，标记前序请求终止

var abortController = null;
var requestPending = false;

async function searchWebsite(searchQuery) {
  // 如果存在正在进行的请求，终止它
  if (abortController && !abortController.signal.aborted && requestPending) {
    // 标记终止原因为"终止前序请求"
    abortController.abortReason = 'cancel-previous';
    abortController.abort(); // CASE 2: 手动终止前序请求
  }
  
  try {
    abortController = new AbortController();
    requestPending = true;
    let apiRequest = await request("http://someurl.com", abortController);
    // 处理请求响应逻辑
    console.log('请求成功:', apiRequest);
    requestPending = false;
  } catch(e) {
    requestPending = false;
    if (e.name === 'AbortError') {
      // 根据自定义标记区分终止类型
      switch(abortController.abortReason) {
        case 'timeout':
          console.log('请求超时！展示带重试选项的错误提示');
          // 在这里添加你的重试提示逻辑，比如弹出弹窗让用户点击重试
          break;
        case 'cancel-previous':
          console.log('前序请求被终止（用户发起了新请求），无需特殊提示');
          // 这种情况通常不需要给用户显示错误，因为是用户主动触发了新搜索
          break;
        default:
          console.log('未知的请求终止原因');
      }
    } else {
      // 处理其他网络错误（比如网络断开、404等）
      console.log('网络异常:', e);
    }
  }
}

关键说明 #

• 利用JS的动态特性，我们给AbortController实例添加了abortReason属性，这在React Native的环境中完全可行，不需要依赖平台支持额外的API。
• 每次创建新请求时，我们会重新赋值abortController变量，所以前序请求的标记不会干扰当前请求的判断。
• 一定要记得清除超时定时器，不管请求成功还是失败/终止，避免内存泄漏问题。

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