Question

我是一名从事 React 应用程序的 Angular 开发人员，我正在使用 axios 从 API 获取一些数据。我决定使用库提供的拦截器来确保对于每个请求我检查 401 授权错误，如果有任何添加适当的令牌和标头，如果它们存在，如果不为它们调用服务器请求。拦截器按预期工作，这意味着：当获得授权拒绝响应时，它调用授权端点设置令牌并再次重新运行请求。

index.js 中的拦截器

axios.interceptors.request.use(request => {
  if(!request.url.includes('token')){
    request.headers['Authorization'] = localStorage.getItem('amadeus_token')
  }
  return request
})

axios.interceptors.response.use(response => {
  return response
}, function(error){
  if(error.response.status === 401) {
     axios.post( `https://test.api.amadeus.com/v1/security/oauth2/token`, body)
    .then(result =>{
      localStorage.setItem('amadeus_token', `Bearer ${result.data.access_token}`)
      return axios.request(error.config);
    })
  }
}
)

我的组件 App.js 中的原始调用函数：

function getData() {
  axios.get('https://test.api.amadeus.com/v1/shopping/flight-destinations?origin=MAD')
  .then(data => {
    console.log(data, 'data')
    if(!!data) {
      console.log(data, 'data from get')
      setState(data)
    } else {
    }
  }, function(error) {
    console.log(error.toJson())
  })
};

我遇到了一个奇怪的竞争/时间问题，在拦截器中获取新令牌后重新运行原始请求后，我的原始函数没有侦听响应，因为原始响应已返回。

我相信发生的事情是，当我在 APP.JS 中的函数调用 get 请求时，第一次调用它会返回 Authorization Denied 响应，这解决了 APP.js 函数中的 Promise，这意味着它不是等待几分钟后从拦截器那里得到正确的响应。

一个快速的肮脏方法是从 App.JS 再次调用 get 请求，但必须有更好的方法，因为拦截器按预期工作，并返回正确的响应。

更新：尝试从我的组件调用相同的请求，这可行，但必须有一种方法来阻止过早履行承诺

如何从 axios 拦截器返回重试响应

0 个答案: