Laravel Sanctum SPA场景下Promise链末尾catch无法捕获Axios请求错误

• Promise链结构错误：你当前代码中的catch()仅绑定在api.get('/sanctum/csrf-cookie')返回的Promise实例上，只能捕获该GET请求以及它的回调中同步抛出的异常。你在GET的then回调中发起的api.post()是独立的新Promise实例，它抛出的错误没有被任何捕获逻辑承接，才会出现未捕获的Promise错误。
• Axios全局配置排查项：如果你配置了Axios全局响应拦截器，需要确认错误处理分支是否执行了return Promise.reject(error)，如果拦截器吞掉了错误没有抛出，也会导致业务层的catch无法捕获异常。

你不需要修改后端返回403的逻辑，403是符合语义的错误响应码，只需要调整前端Promise的链式结构即可，将post请求返回的Promise return到外层链上，让外层catch可以承接全链路的错误：

api.get('/sanctum/csrf-cookie')
  .then(() => {
    // 关键：返回post请求的Promise，将错误传递到外层链
    return api.post('/api/login', {
      name: username,
      password: password
    })
  })
  .then((response) => {
    // 登录成功逻辑
    console.log('works')
  })
  .catch(error => {
    // 现在可捕获GET、POST任意环节的错误
    setError('error')
  })

你也可以改用async/await语法，错误捕获逻辑更直观，不容易出现链式绑定错误：

const handleLogin = async () => {
  try {
    await api.get('/sanctum/csrf-cookie')
    await api.post('/api/login', { name: username, password: password })
    console.log('works')
  } catch (error) {
    setError('error')
  }
}

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