ReactJS中如何管理依赖其他请求的async/await异步调用

AI 小北

2026-8-29

解答

`.map()`批量发起请求的可行性

这个方案完全可行：遍历调用axios.get()会并行发起所有请求，相比串行等待单个请求返回的写法执行效率高很多，适合批量拉取关联资源的场景。

现有代码的问题

接口传参错误（核心报错原因）
你调用的${BASE_URL}/type/${poke.name}是宝可梦属性类型的详情接口，该接口仅接受属性名称/ID（比如fire火、water水）作为参数，传入宝可梦名称会直接返回404响应。如果要获取单个宝可梦的属性信息，应该请求${BASE_URL}/pokemon/${poke.name}接口，返回结果中的types字段就是对应宝可梦的属性列表。
未处理批量请求的异步等待
map中调用异步函数会返回Promise数组，你当前没有等待这些Promise执行完成。如果后续需要将所有请求结果存入组件状态用于渲染，会出现数据不完整的问题，需要搭配Promise.all等待所有请求结束后再处理结果。

修正后代码

import React from "react";
import axios from "axios";
import "./styles.css";

const App = () => {
  const BASE_URL = "https://pokeapi.co/api/v2";

  const getAllPokemons = async () => {
    const { data } = await axios.get(`${BASE_URL}/pokemon`);
    console.log("宝可梦列表：", data);

    // 等待所有批量请求执行完成
    const allPokeData = await Promise.all(
      data.results.map(poke => getSinglePokeData(poke))
    );
    console.log("所有宝可梦完整数据：", allPokeData);
  };

  const getSinglePokeData = async (poke) => {
    const { data } = await axios.get(`${BASE_URL}/pokemon/${poke.name}`);
    return data;
  };

  React.useEffect(() => {
    getAllPokemons().catch(err => console.error("请求失败：", err));
  }, []);

  return (
    <div className="App">
      <h1>宝可梦列表</h1>
    </div>
  );
};

export default App;