请求的 Axios 拦截器在继续请求之前不等待等待函数调用完成

函数调用完成"/>

请求的 Axios 拦截器在继续请求之前不等待等待函数调用完成

我有使用 Axios 发出的所有请求的拦截器代码。

instance

这里是 Axios 实例。

instance.interceptors.request.use(async (config) => {
  const tokens = JSON.parse(localStorage.getItem('users'));
  if (!tokens) {
    return config;
  }
  const accessTokenValid = Date.now() <= (tokens?.expirationTime ?? Date.now());
  if (accessTokenValid) {
    return config;
  }
  const refreshToken = tokens.refreshToken;
  if (!refreshToken) { 
    return config;
  }

  const response = await fetch(`${some-endpoint}/auth/refresh/token?token=${refreshToken}`);
  const newTokens = (await response.json()).data.data;

  localStorage.setItem('users', JSON.stringify(
    {
      accessToken: newTokens.access_token,
      expirationTime: Date.now() + parseInt(JSON.parse(newTokens.expires_in)) * 1000 - 600 * 1000,
      refreshToken: newTokens.refresh_token,
    }
  ));

  config.headers.Authorization = `Bearer ${newTokens.access_token}`;

  return config;
}, (error) => {
  console.error(error);
});

那么，

instance

就这样用了

    return instance.get(
      "/users/" + id,
      options
    );

在哪里

options

看起来像这样。

        {
          headers: {
            Authorization: `Bearer ${session.accessToken}`,
          },
        }

上面代码的问题是token过期后第一次请求总是会失败。然后，

localStorage.users

中的值将被更新，第二个请求将成功，因为该值已被新的访问令牌替换。

我不想使用拦截器来响应重试原始请求。我想根据要求处理令牌刷新。经过调查发现 HTTP 请求发生的顺序如下。

• 对端点的 HTTP 请求

  users

• 然后，HTTP 请求到端点以刷新令牌

这告诉我请求拦截器中的

async/await

部分不起作用。我怎样才能让 HTTP 请求在运行 HTTP 请求本身之前必须先等待拦截器完成运行（包括等待任何异步函数）？

回答如下：