[英]Axios catch not working when used with a customer interceptor
I am using interceptor that refreshes the access token upon a status code of 401
but my catch
has stopped working upon any other error codes such as 400
我正在使用拦截器在状态代码401
时刷新访问令牌,但我的catch
已停止处理任何其他错误代码,例如400
request.js请求.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
. 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
.
I can't verify without testing, and that's a bit difficult to set up right now, but it looks very much like you're not properly rejecting the promise that you're returning from the error callback.我无法在没有测试的情况下进行验证,现在设置起来有点困难,但看起来你没有正确拒绝从错误回调返回的 promise。 If you can confirm that the promise is never resolved or rejected in the case of a 400
, that would help confirm my suspicion.如果您可以确认 promise 在400
的情况下永远不会被解决或拒绝,那将有助于证实我的怀疑。 Try making this change, though:不过,请尝试进行此更改:
The arguments to your new Promise callback: arguments 到您的新 Promise 回调:
return new Promise((resolve) => {
becomes变成
return new Promise((resolve, reject) => {
and later to reject, instead of后来拒绝,而不是
return Promise.reject(error)
just do this就这样做
reject(error) // return does nothing here, can be omitted
Edit:编辑:
Although, a very good point by someone that this is a promise anti-pattern.虽然,有人说这是一个 promise 反模式。 You're creating a new Promise for no reason.您正在无缘无故地创建一个新的 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
Should be something like this.应该是这样的。
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.