未处理的拒绝 (InvalidTokenError) 使用 async 和 await答案

【问题标题】：Unhandled Rejection (InvalidTokenError) Using async and await未处理的拒绝 (InvalidTokenError) 使用 async 和 await
【发布时间】：2020-01-14 17:16:19
【问题描述】：

尽管在正确的位置使用await 并捕获任何可能的错误，但当令牌未定义时，以下函数会引发错误“未处理的拒绝（InvalidTokenError）：指定的令牌无效：无法读取未定义的属性'替换'”：

async function authenticateUsingExistingToken() {
  const userToken = localStorage.FBIdToken;
  if (userToken) {
    const decodedToken = jwtDecode(userToken);
    if (decodedToken.exp * 1000 < Date.now()) {
      resetUserContext();
      localStorage.FBIdToken = "";
    } else {
      axios.defaults.headers.common["Authorization"] = userToken;
      try {
        const responseObj = await axios.get("/user");
        setUserStates(responseObj.data);
      } catch (err) {
        console.error("Authentication Error! err: ", err);
      }
    }
  } else {
    resetUserContext();
  }
}
authenticateUsingExistingToken();

setUserStates 和 resetUserContext 只使用 React Hooks 做一些 setStates。数据获取的唯一 Promise 是我使用 await 的地方。

如果您能给我一些关于为什么会引发此类错误的想法，我将不胜感激。控制台报错发生在函数的最后一行}正在关闭它！

这是完整的错误堆栈：

./node_modules/jwt-decode/lib/index.js
C:/MY_FOLDER/client/node_modules/jwt-decode/lib/index.js:9
__webpack_require__
C:/MY_FOLDER/client/webpack/bootstrap:785
fn
C:/MY_FOLDER/client/webpack/bootstrap:150
Module../src/components/Auth/SignInUp/SignInUp.js
http://localhost:3000/static/js/main.chunk.js:374:68
__webpack_require__
C:/MY_FOLDER/client/webpack/bootstrap:785
fn
C:/MY_FOLDER/client/webpack/bootstrap:150
Module../src/containers/App/App.js
http://localhost:3000/static/js/main.chunk.js:2599:92
__webpack_require__
C:/MY_FOLDER/client/webpack/bootstrap:785
fn
C:/MY_FOLDER/client/webpack/bootstrap:150
Module../src/index.js
http://localhost:3000/static/js/main.chunk.js:3173:77
__webpack_require__
C:/MY_FOLDER/client/webpack/bootstrap:785
fn
C:/MY_FOLDER/client/webpack/bootstrap:150
1
http://localhost:3000/static/js/main.chunk.js:3328:18
__webpack_require__
C:/MY_FOLDER/client/webpack/bootstrap:785
checkDeferredModules
C:/MY_FOLDER/client/webpack/bootstrap:45
Array.webpackJsonpCallback [as push]
C:/MY_FOLDER/client/webpack/bootstrap:32
(anonymous function)
http://localhost:3000/static/js/main.chunk.js:1:67

【问题讨论】：

所以在你的代码库的某个地方，无论是客户端还是服务器上，都有一个 .replace 函数正在运行。你能试着找到它吗？
@TKoL，有趣的是我没有在客户端或服务器端代码的任何地方使用.replace。我认为这是在 React 的 useState 钩子中定义的。

标签： javascript error-handling async-await unhandled-exception

【解决方案1】：

基于未定义的 userToken 的值和您的错误位置（尽管它应该基于错误堆栈），异常可能已从 resetUserContext() 引发。

如果可能的话，你能分享一下这个功能吗？在可能隐藏任何敏感数据之后。

【讨论】：

这应该是一条评论。
@Mayank，感谢您的回复。我更新了问题并添加了您提出的信息。
@TKoL 抱歉，我最近加入了 SOF 和 atm，我无法对我自己的帖子发表任何评论。我会记住您的建议以供将来参考

【解决方案2】：

找到了！错误是从jwtDecode 生成的。因为函数定义为async，并且在jwtDecode 中抛出错误并没有解决或拒绝promise，所以产生了错误。为了解决这个问题，我将jwtDecode 包围在try 中并发现了错误。无论如何，感谢您的回复。

【讨论】：