React.js接口network返回正常但打印响应值为undefined如何解决？

核心根因 #

你封装的getAccountStatus Axios请求函数缺少return语句，async函数无显式返回时，默认返回携带undefined的Promise对象，因此上层调用await拿到的结果就是undefined，和服务端逻辑正常、浏览器Network面板有完整响应的现象不冲突。

修复步骤 #

1. 修改请求封装函数，添加返回语句 #

export const getAccountStatus = async token => {
  // 添加return把axios请求结果返回给上层调用
  return await axios.post(
    `${process.env.REACT_APP_API}/get-account-status`,
    {},
    {
      headers: {
        Authorization: `Bearer ${token}`
      }
    }
  );
};

2. （可选）提取业务响应数据 #

Axios返回的是完整响应对象，服务端返回的实际业务数据存储在data属性中，可按需直接提取：

// 方式1：封装层直接返回业务数据
export const getAccountStatus = async token => {
  const res = await axios.post(
    `${process.env.REACT_APP_API}/get-account-status`,
    {},
    {
      headers: {
        Authorization: `Bearer ${token}`
      }
    }
  );
  return res.data;
};

// 方式2：上层调用时提取
const accountStatus = async () => {
  try {
    const res = await getAccountStatus(auth.token);
    console.log(res.data); // 打印服务端返回的updatedUser数据
  } catch (err) {
    console.log(err);
  }
};

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