主页 / 问题 / 1598611
Accepted
Sun-ny11
Asked:2024-11-02 19:31:24 +0000 UTC2024-11-02 19:31:24 +0000 UTC

当Axios拦截器重复请求时，如何将数据上传到MobX存储？

  • 772

当accessToken它变坏时，interceptor它会捕获错误，更新令牌并重复请求。重复请求，但没有数据写入store。如何实施？

  (response: AxiosResponse) => {
    return response
  },
  async (error: unknown) => {
    if (isAxiosError(error)) {
      if (error.response?.status === StatusCode.Unauthorized) {
        if (error.config?.url === Endpoints.updateToken) {
          return Promise.reject(error)
        } else {
          try {
            const params = error.config || undefined

            await authStore.updateToken(params)
          } catch (updateError) {
            return Promise.reject(updateError)
          }
        }
      }
    }

    return Promise.reject(error)
  }
)


  async updateToken(
    params: InternalAxiosRequestConfig | undefined
  ) {
    try {
      const newToken = await authApi.updateToken()

      setToLocalStorage(StorageKeys.AccessToken, newToken)

      if (params) {
        params.headers.Authorization = `Bearer ${newToken}`

        const repeatedRequest = await instance.request(params)

        // ???

      }
    } catch (error) {
      return Promise.reject(error)
    }
  }

我尝试重复的不是请求，而是操作，从 axios error.config 获取数据，但带有路径参数的请求让我困惑"/api/v1/posts/{postId}/comments/{commentId}/answers/{answerId}/likes"

axios

1 个回答

  1. Best Answer

    从拦截器返回的承诺将最终出现在导致错误的操作中。

    instance.interceptors.response.use(
  (response: AxiosResponse) => {
    return response
  },
  async (error: unknown) => {
    if (isAxiosError(error)) {
      if (error.response?.status === StatusCode.Unauthorized) {
        if (error.config?.url === Endpoints.updateToken) {
          return Promise.reject(error)
        } else {
          try {
            const repeatedResponse = await authStore.updateToken(error.config)

            return Promise.resolve(repeatedResponse) // вернется в экшен
          } catch (updateError) {
            return Promise.reject(updateError)
          }
        }
      }
    }

    return Promise.reject(error)
  }
)
//_____________store_____________

  async me() {
    try {
      const profile = await authApi.me() // повторный запрос, вернет промис из interceptor
      
      runInAction(() => {
        this.profile = profile
      })
    } catch (error) {
      throw Error
    }
  }

async updateToken(params: InternalAxiosRequestConfig | undefined) {
    try {
      if (localStorage.getItem(StorageKeys.AccessToken)) {
        const newToken = await authApi.updateToken()

        setToLocalStorage(StorageKeys.AccessToken, newToken)

        if (params) {
          params.headers.Authorization = `Bearer ${newToken}`

          const repeatedRequest = await instance.request(params)

          return repeatedRequest
        }
      }
    } catch (error) {
      return Promise.reject(error)
    }
  }
    • 0

相关问题