React异步函数调用API返回Pending Promise问题求助

问题原因 #

所有async函数的返回值本质都是Promise对象——哪怕你在函数里return了具体数据，它也会被自动包装成Promise。所以直接写const data = fetchData()时，拿到的是还未完成的Pending状态Promise，不是最终的接口返回数据。

解决方案 #

方案1：在useEffect内部用async/await处理

注意：useEffect的回调函数不能直接是async函数（因为useEffect期望返回清理函数或undefined，而async函数返回Promise），所以要在内部单独定义一个async函数再调用：

useEffect(() => {
  const fetchAndProcessData = async () => {
    try {
      // 用await等待Promise完成，拿到实际数据
      const data = await fetchData();
      console.log(data);
      // 这里可以把数据存入state，比如setTracks(data)
      setLoading(false);
    } catch (err) {
      console.error('数据请求失败:', err);
      setLoading(false);
    }
  };

  fetchAndProcessData();
}, []);

方案2：用Promise的.then()链式调用

直接在fetchData()后面通过.then()获取结果：

useEffect(() => {
  fetchData()
    .then(data => {
      console.log(data);
      // setTracks(data);
      setLoading(false);
    })
    .catch(err => {
      console.error('数据请求失败:', err);
      setLoading(false);
    });
}, []);

额外优化建议 #

1. 别用any类型：定义TypeScript接口规范数据结构，避免类型模糊：

// 定义接口描述返回数据结构
interface Track {
  id: string;
  name: string;
  artists: Array<{ name: string }>;
  // 根据实际需求添加字段
}

interface SpotifySearchResult {
  tracks: { items: Track[] };
}

const fetchData = async (): Promise<Track[]> => {
  const res = await fetch("https://api.spotify.com/v1/search?q=thoughtsofadyingatheist&type=track&limit=30", {
    method: "GET",
    headers: {
      Accept: "application/json",
      "Content-Type": "application/json",
      Authorization: "Bearer BQD2JKxAuqmgsNKgWx6JiRMCskc3l1FK3VsHfOah3ey86GC8EmGBlrEGAfTCyVB1cFo2TDVQYQm8RvB_YQD6V9cXUf_HER0dfBeLc_AZ0N56VNOrsLyt2yzK6gaD5WarThefqmZj68ODXUVrLwQYfuocahIUhWOEO4WuziwVvloE",
    },
  });
  // 检查请求是否成功
  if (!res.ok) throw new Error(`请求错误：${res.status}`);
  const data: SpotifySearchResult = await res.json();
  return data.tracks.items;
};

2. 处理错误边界：添加try/catch或.catch()，避免请求失败时loading一直处于true状态。
3. 安全处理Token：不要把Spotify的Bearer Token硬编码到前端代码里，建议通过后端代理或者环境变量注入，防止Token泄露被滥用。

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