访问info.clientToken提示Cannot read properties of undefined报错如何解决？

• 异步请求错误被吞导致info为undefined：你封装的getmeToken方法中，catch捕获请求错误后仅打印日志，没有返回任何值也没有抛出新错误，此时Promise状态会变为成功，返回值为undefined，因此getToken中.then接收到的info就是undefined
• 分支判断逻辑漏洞：当前判断仅校验了info存在且有error属性的场景，没有覆盖info本身为undefined的情况，当info为undefined时会直接进入else分支，读取info.clientToken就会触发属性读取错误
• 隐藏问题：fetch默认仅在网络请求失败时抛错，接口返回4xx/5xx状态码时不会进入catch，此时如果后端返回非JSON格式的响应，response.json()也会抛出错误被catch捕获，同样会导致info为undefined；另外你请求URL的模板字符串开头多了一个多余空格，可能导致请求路径错误触发404。

1. 完善getmeToken的错误处理 #

修改请求方法，错误场景下返回带error标识的对象，避免返回undefined，同时修复URL多余空格、响应状态校验问题：

export const getmeToken = (userId, token) => {
    // 去掉URL开头的多余空格
    return fetch(`${API}/payment/gettoken/${userId}`, {
        method: "GET",
        headers: {
            Accept: "application/json",
            "Content-Type": "application/json",
            Authorization: `Bearer ${token}`
        }
    }).then(response => {
        // 先校验响应状态是否正常
        if (!response.ok) {
            throw new Error(`请求错误，状态码：${response.status}`)
        }
        return response.json();
    })
    .catch(err => {
        console.log(err)
        // 错误场景统一返回带error的对象，上层可以统一处理
        return { error: err.message }
    })
}

2. 完善上层分支判断逻辑 #

先判断info是否存在，再进行后续逻辑处理：

const getToken = (userId, token) => {
  getmeToken(userId, token).then(info => {
    // 先判断info是否存在，存在且无error再取clientToken
    if (info?.error) {
      // 若项目不支持ES2020可选链，可替换为 if (info && info.error)
      setInfo({ ...info, error: info.error });
    } else if (info) {
      const clientToken = info.clientToken;
      setInfo({ clientToken });
    } else {
      // 兜底处理info为undefined的异常场景
      setInfo({ error: "获取token失败，请稍后重试" })
    }
  });
};

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