为何我的Axios服务函数返回fulfilled状态的Promise对象？

问题原因 #

• 所有async函数的返回值都会被JavaScript自动包装为Promise对象——哪怕你在函数内部return了普通值，最终也会变成Promise.resolve(返回值)。你的getPlaylists是async函数，所以它执行后必然返回Promise，而非直接返回接口数据。
• 你的调用代码存在错误：setData(playlistService.getPlaylists)是把函数本身赋值给了data，而非调用函数获取结果；就算写成setData(playlistService.getPlaylists())，也只是把Promise对象存进了data，没有提取Promise内部的实际结果。

解决方案 #

1. 正确调用async函数并处理Promise #

useEffect的回调不能直接是async函数（会触发内存泄漏警告），需要在内部定义async函数并执行，用await获取结果后再更新状态：

useEffect(() => {
  const fetchPlaylists = async () => {
    // 用await等待Promise完成，提取实际返回值
    const playlistData = await playlistService.getPlaylists();
    setData(playlistData);
  };
  fetchPlaylists();
}, []);

也可以用.then()链式调用处理Promise：

useEffect(() => {
  playlistService.getPlaylists()
    .then(playlistData => setData(playlistData))
    .catch(err => console.error('获取播放列表失败:', err)); // 建议添加错误捕获逻辑
}, []);

2. 正确查看更新后的状态 #

setData是异步操作，直接在useEffect外的console.log(data)会打印初始状态值（比如undefined）。要查看更新后的data，可以添加依赖data的useEffect：

useEffect(() => {
  console.log('更新后的播放列表数据:', data);
}, [data]);

3. 完善服务函数的错误处理 #

你的getPlaylists函数在catch块中，如果错误没有response属性（比如网络错误），会返回undefined，建议补充处理逻辑，让调用方能感知到错误：

const getPlaylists = async () => {
  try {
    const res = await axios.get(`${API_SONGS_URL}/`, config);
    console.log('RES ', res);
    return res;
  } catch (error) {
    if (error.response) {
      return error.response.data;
    } else {
      console.error('请求失败:', error);
      throw error; // 抛出错误，让调用方通过.catch处理
    }
  }
};

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