React Native中API调用卡顿问题排查：接口请求耗时过长

你的函数主要存在以下几个核心问题，导致接口在应用中耗时远超Postman：

1. 未取消重复并发请求 #

每次搜索参数变更就触发调用，用户快速输入时会发起大量重复请求（比如输入"abc"会触发a、ab、abc三次请求）。这些请求会在客户端队列中排队等待，甚至旧请求的响应可能晚于新请求，覆盖最新的搜索结果；同时过多并发请求可能触发后端限流或客户端网络栈阻塞，导致整体耗时剧增。

2. 未设置请求超时 #

fetch API默认没有超时限制，如果网络波动或后端出现异常挂起，请求会一直等待直到连接断开。而Postman有默认超时机制（一般为30秒），所以不会出现5-10分钟的等待情况。

3. 异步语法混用（非核心但影响维护） #

函数声明为async但内部使用.then/.catch链式调用，虽然语法合法，但容易导致错误处理逻辑混乱，不利于排查问题。

修复方案 #

步骤1：添加请求取消机制（AbortController） #

每次调用getSuggestions时，取消上一次未完成的请求，避免重复请求占用资源。

步骤2：增加超时设置 #

配合AbortController设置合理的超时时间（比如5秒），防止请求无限等待。

步骤3：添加输入防抖 #

用户输入停止一段时间后再发起请求，减少不必要的调用次数。

修复后的代码示例 #

// 定义全局AbortController实例，用于取消上一次请求
let abortController = null;

// 防抖函数，延迟执行请求
const debounce = (func, delay) => {
  let timeoutId;
  return (...args) => {
    clearTimeout(timeoutId);
    timeoutId = setTimeout(() => func.apply(this, args), delay);
  };
};

const getSuggestions = async query => {
  const filterToken = query.toLowerCase();
  if (query.length < 3) {
    setLoading(false);
    return;
  }

  // 取消上一次未完成的请求
  if (abortController) abortController.abort();
  abortController = new AbortController();
  const signal = abortController.signal;

  setLoading(true);
  try {
    // 超时设置：5秒后自动取消请求
    const timeoutId = setTimeout(() => abortController.abort(), 5000);

    const response = await fetch(
      'https://api.worldota.net/api/b2b/v3/search/multicomplete/',
      {
        method: 'POST',
        headers: {
          'Authorization': 'Basic xyzxyzxyzxyzxyzyzyzyzy',
          'Content-Type': 'application/json'
        },
        body: JSON.stringify({
          query: filterToken,
          language: 'en'
        }),
        signal: signal,
        redirect: 'follow'
      }
    );

    clearTimeout(timeoutId); // 请求成功返回，清除超时定时器

    if (!response.ok) throw new Error(`HTTP error! status: ${response.status}`);
    
    const responseData = await response.json();
    const sections = Object.keys(responseData.data).map(item => ({
      title: item,
      data: responseData.data[item]
    }));
    setSuggestionsList(sections);
  } catch (err) {
    // 忽略取消请求的错误
    if (err.name !== 'AbortError') {
      console.log('请求错误:', err);
    }
  } finally {
    setLoading(false);
  }
};

// 包装防抖后的函数，调用时用这个
const debouncedGetSuggestions = debounce(getSuggestions, 300);

内容的提问来源于stack exchange，提问作者Engr.Aftab Ufaq