Chromium系浏览器net::ERR_INSUFFICIENT_RESOURCES错误解决求助

问题描述 #

调用Pokemon API时，搜索和常规加载宝可梦功能正常，但按属性筛选时，控制台出现大量类似 GET https://pokeapi.co/api/v2/pokemon/terapagos-stellar net::ERR_INSUFFICIENT_RESOURCES 的错误。

• 仅在Brave和Chromium浏览器中出现该问题，Firefox运行正常
• 仅在Linux Ubuntu笔记本上出现，Windows环境下功能正常

已尝试的无效方案 #

• 禁用开发者工具缓存：短暂有效后失效
• 无痕模式：无效果

相关代码 #

useEffect(() => {
        async function fetchPokemon() {
            setIsLoading(true);
            let url = URL;
            if (filter) {
                url = "https://pokeapi.co/api/v2/pokemon?limit=1302&offset=0";
            }
            const res = await fetch(url);
            const data = await res.json();
            const result = data.results;
            setNext(data.next);
            setPrev(data.previous);
            const pokemonInfo = await Promise.all(
                result.map(async (pokemon) => {
                    const res = await fetch(
                        `https://pokeapi.co/api/v2/pokemon/${pokemon.name}`
                    );
                    return res.json();
                })
            );
            setIsLoading(false);
            if (!search && !filter) {
                setData(pokemonInfo);
            }
        }
        fetchPokemon();

        async function fetchPokemonByType(type) {
            setData([]);
            const res = await fetch(`https://pokeapi.co/api/v2/type/${type}`);
            const data = await res.json();
            const pokemonList = 
                data.pokemon?.map((pokemon) => pokemon.pokemon.name) || [];
            const pokemonInfo = await Promise.all(
                pokemonList.map(async (name) => {
                    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
                    return res.json();
                })
            );

            !search && setData(pokemonInfo);
        }
        fetchPokemonByType(filter);

        async function searchPokemon() {
            if (search !== "") {
                const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${search}`);
                if (res.ok) {
                    const data = await res.json();
                    setData([data]);
                    setSearchError("");
                } else {
                    setSearchError("There is no such Pokémon");
                    setIsLoading(false);
                }
            }
        }
        searchPokemon();
    }, [URL, filter, search]);
    useEffect(() => {}, [search]);

解决方案分析与修复 #

1. 核心问题：并发请求过载触发资源限制 #

Promise.all 会一次性发起所有筛选到的宝可梦请求，当属性对应的宝可梦数量较多时，瞬间大量并发请求会触发Chromium内核浏览器（Brave/Chromium）的资源阈值限制——Linux环境下的浏览器资源分配阈值通常比Windows更低，而Firefox的并发请求调度策略不同，因此未出现问题。

2. 具体修复步骤 #

（1）限制并发请求数量

将一次性批量请求改为分批处理，降低瞬间资源占用：

// 替换fetchPokemonByType中的Promise.all部分
const pokemonInfo = [];
// 每次处理10个请求，可根据实际情况调整数量
for (let i = 0; i < pokemonList.length; i += 10) {
  const batch = pokemonList.slice(i, i + 10);
  const batchData = await Promise.all(
    batch.map(async (name) => {
      const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
      return res.json();
    })
  );
  pokemonInfo.push(...batchData);
}

（2）避免不必要的重复请求

当前useEffect会同时执行三个请求函数，无论当前场景是搜索、筛选还是常规加载。添加条件判断，只执行对应场景的逻辑：

useEffect(() => {
  async function fetchPokemon() { /* 原函数内容不变 */ }
  async function fetchPokemonByType(type) { /* 原函数内容不变 */ }
  async function searchPokemon() { /* 原函数内容不变 */ }

  // 只执行当前场景需要的请求
  if (search) {
    searchPokemon();
  } else if (filter) {
    fetchPokemonByType(filter);
  } else {
    fetchPokemon();
  }
}, [URL, filter, search]);

（3）添加单个请求错误捕获

避免单个请求失败导致整个批量请求崩溃，同时减少无效资源消耗：

// 在fetchPokemonByType的请求map中添加错误处理
batch.map(async (name) => {
  try {
    const res = await fetch(`https://pokeapi.co/api/v2/pokemon/${name}`);
    if (!res.ok) throw new Error(`请求失败: ${name}`);
    return res.json();
  } catch (err) {
    console.warn(`跳过${name}: ${err.message}`);
    return null; // 或返回自定义默认数据
  }
})

3. 额外优化建议 #

• 对已请求过的宝可梦数据做本地缓存，避免重复请求
• 优化加载状态管理，防止多次触发重复请求

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