Node.js中使用Fetch API替换Axios API后无法映射返回数据的问题排查

你遇到的错误核心原因很明确：Fetch API的res.json()方法返回的是一个Promise对象，而非直接解析好的JSON数据——这和Axios的自动解析行为有本质区别。

为什么Axios可以直接map，Fetch不行？ #

• 在你的Axios代码里，res.data已经是Axios帮你异步解析完成后的用户数组，所以直接调用map完全没问题；
• 但你写的Fetch代码中，res.json().map(...)相当于在一个Promise实例上调用map方法，而Promise对象本身并没有map方法，自然会抛出res.json(...).map is not a function的错误。

修正后的Fetch实现代码 #

你需要把res.json()的异步操作放在额外的then链中，等待它解析完成后再处理数组：

const fetchUsers = () => {
  return function (dispatch) {
    dispatch(fetchUsersRrequest());
    fetch("https://jsonplaceholder.typicode.com/users")
      .then((res) => {
        // 先等待res.json()完成解析，拿到真正的用户数组
        return res.json();
      })
      .then((data) => {
        // 现在data是解析后的数组，正常执行map操作
        const users = data.map((user) => user.id);
        console.log(users);
        dispatch(fetchUsersSuccess(users));
      })
      .catch((error) => {
        dispatch(fetchUsersFaliure(error.message));
      });
  };
};

如果习惯用async/await写法，代码会更直观：

const fetchUsers = () => {
  return async function (dispatch) {
    try {
      dispatch(fetchUsersRrequest());
      const res = await fetch("https://jsonplaceholder.typicode.com/users");
      // 等待JSON解析完成
      const data = await res.json();
      const users = data.map((user) => user.id);
      console.log(users);
      dispatch(fetchUsersSuccess(users));
    } catch (error) {
      dispatch(fetchUsersFaliure(error.message));
    }
  };
};

额外提示 #

Fetch还有个和Axios不同的点：只有网络层面的错误才会进入catch，像404、500这类HTTP状态码错误不会触发catch。如果需要处理这类情况，可以在解析前加个判断：

.then((res) => {
  if (!res.ok) {
    throw new Error(`请求失败！状态码：${res.status}`);
  }
  return res.json();
})

另外注意你代码里的拼写错误：fetchUsersFaliure应该是fetchUsersFailure（少了一个字母u），建议修正避免后续潜在问题。

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