簡體   English   中英

與客戶攔截器一起使用時,Axios 捕獲不起作用

[英]Axios catch not working when used with a customer interceptor

我正在使用攔截器在狀態代碼401時刷新訪問令牌,但我的catch已停止處理任何其他錯誤代碼,例如400

請求.js

import axios from 'axios'

const axiosApiInstance = axios.create()

axiosApiInstance.interceptors.response.use(
    (response) => {
      return response
    },
    (error) => {
      return new Promise((resolve) => {
        const originalRequest = error.config
        const refreshToken = localStorage.getItem("refresh")
        if (error.response && error.response.status === 401 && error.config && !error.config.__isRetryRequest && refreshToken) {
          originalRequest._retry = true
  
          const response = fetch('http://127.0.0.1:8000/api/token/refresh/', {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json',
            },
            body: JSON.stringify({
              refresh: refreshToken,
            }),
          })
            .then((res) => res.json())
            .then((res) => {
              localStorage.setItem("access", res.access) 
              originalRequest.headers['Authorization'] = 'Bearer ' + res.access
              return axios(originalRequest)
            })
          resolve(response)
        }
        return Promise.reject(error)
      })
    },
  )

  export default axiosApiInstance

You need to pass a second argument to your callback to new Promise called reject and then reject the promise using that function instead of Promise.reject .

我無法在沒有測試的情況下進行驗證,現在設置起來有點困難,但看起來你沒有正確拒絕從錯誤回調返回的 promise。 如果您可以確認 promise 在400的情況下永遠不會被解決或拒絕,那將有助於證實我的懷疑。 不過,請嘗試進行此更改:

arguments 到您的新 Promise 回調:

      return new Promise((resolve) => {

變成

      return new Promise((resolve, reject) => {

后來拒絕,而不是

        return Promise.reject(error)

就這樣做

        reject(error) // return does nothing here, can be omitted

編輯:

雖然,有人說這是一個 promise 反模式。 您正在無緣無故地創建一個新的 Promise。

import axios from 'axios'

const axiosApiInstance = axios.create()

axiosApiInstance.interceptors.response.use(
    (response) => {
      return response
    },
    (error) => {
        const originalRequest = error.config
        const refreshToken = localStorage.getItem("refresh")
        if (error.response && error.response.status === 401 && error.config && !error.config.__isRetryRequest && refreshToken) {
            originalRequest._retry = true

            return fetch('http://127.0.0.1:8000/api/token/refresh/', {
            method: 'POST',
            headers: {
                'Content-Type': 'application/json',
            },
            body: JSON.stringify({
                refresh: refreshToken,
            }),
            })
            .then((res) => res.json())
            .then((res) => {
                localStorage.setItem("access", res.access) 
                originalRequest.headers['Authorization'] = 'Bearer ' + res.access
                return axios(originalRequest)
            })
        }
        return Promise.reject(error)
    },
  )

  export default axiosApiInstance

應該是這樣的。

暫無
暫無

聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.

 
粵ICP備18138465號  © 2020-2024 STACKOOM.COM