javascript - axios拦截器错误处理中的承诺堆栈

Question

我的 vue 项目中有一个 axios 拦截器错误处理系统，根据错误，可以有一个操作，然后重试失败的请求。

axios.interceptors.response.use(
  response => {
    return response
  },
  error => {
    if (!error.config.ignoreErrorHandling) {
      return handleErrors(error)
    }

    return Promise.reject(error)
  }
)

export const handleErrors = async (error) => {

  // ...
  const errorHandlers = {
    // ...
    403: async data => {
        const { data } = axios.get(...)

        return new Promise((resolve, reject) => {
          Dialog.create({
              // ...
            })
            .onOk(async () => {
              // Here we retry the request that first failed, and now should not fail
              axios(error.config)
                .then(resolve)
                .catch(reject)
            })
            .onCancel(() => {
              reject(error)
            })
        })
      }
    }
  }

  const { status, data } = error.response

  return (
    (errorHandlers[status] && (await errorHandlers[status](data))) ||
    Promise.reject(error)
  )
}

它工作得很好，数据是在第一次请求的地方接收的，没有任何错误（如果代码是 403 并且用户接受了对话框），除非我有多个并行请求，导致多个错误，因此多个对话框。

防止显示多个对话框很容易，但我似乎无法找到一种仅在第一次显示对话框的方法，等待第一个对话框按确定，然后重试其他失败的请求。我的第一种方法是有一个 Promise 堆栈，但没有像我预期的那样工作，因为 Promise 是在 init 上解决的。

标签： javascriptvue.jspromiseaxioses6-promise