Axios请求拦截器问题：等待Cookie接口完成后再发起请求

核心问题 #

你的代码存在两个关键逻辑错误，导致请求顺序混乱或请求阻塞：

1. 请求拦截器中重复发起请求：无论是否进入Cookie判断分支，最后都会执行$axios.request(request)，同时分支内的请求也未正确等待或返回，引发重复请求（对应问题A）。
2. 拦截器未遵循Axios规范：Axios请求拦截器需要返回请求配置或解析为配置的Promise，直接调用$axios.request会打断Axios的原生请求流程，导致请求完全阻塞（对应问题B）。

修正后的代码 #

Axios拦截器配置

export default function ({ $axios, $cookiz, store }) {
  $axios.onRequest(async (config) => {
    // 简化Cookie存在性判断，覆盖undefined/null/空字符串场景
    const xsrfCookie = $cookiz.get('XSRF-TOKEN')
    if (!xsrfCookie) {
      // 等待Cookie接口请求完成
      await store.dispatch('login/getXsrfCookie')
    }
    // 返回配置，让Axios继续执行原生请求流程
    return config
  })
}

Vuex Action 修正

getXsrfCookie(context) {
  // 复用正在进行的请求Promise，避免重复调用Cookie接口
  if (context.state.xsrfCookiePromise) {
    return context.state.xsrfCookiePromise
  }

  const xsrfCookiePromise = this.$axios.get('/csrf-cookie')
    .then(() => {
      // 请求完成后清空Promise，确保后续请求可以重新触发
      context.commit('setXsrfCookiePromise', null)
    })
    .catch((error) => {
      // 出错时也要清空Promise，避免一直持有失败的Promise
      context.commit('setXsrfCookiePromise', null)
      throw error // 抛出错误让上层处理
    })

  context.commit('setXsrfCookiePromise', xsrfCookiePromise)
  return xsrfCookiePromise
}

关键修正说明 #

1. 拦截器逻辑回归Axios规范：不再手动调用$axios.request，而是返回请求配置。当拦截器返回Promise时，Axios会自动等待Promise完成后再继续执行请求，确保顺序正确。
2. 去除重复请求触发：删除了分支外的冗余$axios.request(request)调用，避免同一请求被发起多次。
3. 完善错误处理：在Vuex Action中增加了catch逻辑，确保Cookie请求失败时不会一直持有无效的Promise，避免后续请求被阻塞。
4. 简化判断逻辑：用!xsrfCookie替代冗长的多条件判断，代码更简洁且覆盖所有无效场景。

额外说明 #

Laravel的/csrf-cookie接口会自动在响应中设置XSRF-TOKEN Cookie，Axios默认会读取该Cookie并自动添加X-XSRF-TOKEN请求头，无需手动处理Cookie的存储或请求头设置。

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