reactjs - Axios - 拦截器无法处理请求错误 - 401 代码

Question

我有一个简单的 React 应用程序，它使用第三个 API 来获取数据。在发出任何请求之前，必须检索 token 以便在 header 中使用它。此 token 是通过传递客户端 ID 和 secret ID 使用相同的 API 创建的 - API 是 Artsy API。此 token 有一个到期日期，因此如果 token 不存在，则必须请求此 API。拿到token之后，我就可以毫无问题的调用其他请求了。

我已经在单独的文件中设置了 API 请求，如下所示: API.js

import Axios from 'axios';
const baseURL = 'https://api.artsy.net/api';

// set up xap-token and set tot default headers
const instance = Axios.create({
    baseURL: baseURL + '/tokens/xapp_token',
    params: {
        'client_id': process.env.CLIENTID,
        'client_secret': process.env.CLIENTSECRET
    }
});

instance.interceptors.request.use(undefined, err => {
    const status = err.response ? err.response.status : null;
    console.log("auth",err.response)

    if(status === 401){
        console.log("auth",err.response)
        return 'hello'
        // this.getAuthToken();
    }
});

export default{

    getArtworks: function(){
        return new Promise((resolve, reject) => {
            instance.get(baseURL + '/artworks')
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            });
        });
    },

    getArtists: function(){
        return new Promise((resolve, reject) => {
            instance.get(baseURL + '/artists')
            .then(res => {
                resolve(res)
            })
            .catch(err => {
                reject(err);
            });
        });

    },

    getTest: function(){
        return 'hello';
    }
};

不太确定如何使用 create 和 interceptors，但我创建了一个 Axios 实例。因此，我们的想法是创建某种中间件，创建一个实例，然后在有针对该错误的请求时将其用作拦截器。如果存在，则将 token 应用于该实例并继续请求，重试。也不确定如何在实例中设置 token 。

到目前为止，我在 getArtists 方法中遇到了一个 401 错误，这个 api 在页面加载时被调用，它在 componentDidMount 下。

应用程序.jsx

import React, { Component } from 'react';
import Apis from './utils/Api';
import Gallery from './components/Gallery';

class App extends Component{
    constructor(props){
        super(props);
        this.state = {
            artWorks: []
        }
    }

    componentDidMount = () => {
        // Apis.getArtists();
        Apis.getArtists().then(res => {
            console.log(res)
            // this.setState({
            //     artWorks: res.data
            // })
        });
    }

    render(){
        return(
            <div>
                <Gallery artists={this.state.artWorks}/>
            </div>
        )
    }
}

export default App;

这是 api用于身份验证的文档链接。

有人可以帮忙吗？不确定如何将实例用作“中间件”？ Axios 的新手。我想避免使用 3rd 库中间件，我更喜欢手动学习而不是使用 3rd 库。非常感谢您的帮助

更新:

我能够让这个有点工作，我修改了 instance.interceptor:

instance.interceptors.response.use(undefined, err => {
    const status = err.response ? err.response.status : null;
    if(status === 401){
        console.log("auth",err.response)

        instance.post(err.config.authURL, err.config.auth).then(res => {
            let token = res.data.token;
            err.config.headers['X-XAPP-Token'] = token;
            console.log('calling',err.response)
            return instance.request(err.config)
        });
    }

    // return Promise.reject(err);
});

但是我在 getArtists 响应中变得不确定。不确定这里发生了什么。这是控制台的屏幕截图:

Answer 1

您应该使用 instance.interceptors.response 而不是 instance.interceptors.request 。

因为请求拦截器在 Ajax 请求发送之前被调用。我认为响应拦截器实际上是您想要的。

---

1. 关于BaseURL，你应该像下面这样设置

const instance = Axios.create({
    baseURL: 'https://api.artsy.net/api'
})
// because you set the baseURL of the instance
// this will request url https://api.artsy.net/api/artworks
instance.get('/artworks')

1. 关于您收到的 401 错误，来自您提供的 api 文档。我认为您应该在应用启动之前请求获取 token 。

instance.post('tokens/xapp_token').then(res => {
  /* here is the response
{
  "type" : "xapp_token",
  "token" : "...",
  "expires_at" : "2014-09-05T12:39:09.200Z"
}
  */

  // you can set common request headers like this
  // or use request interceptors here to set headers
  // then every request you sent by instance after will have X-XAPP-Token header
  instance.defaults.headers.common['X-XAPP-Token'] = res.token
})

---

其实err.config.headers['X-XAPP-Token'] = token;这段代码不会影响请求头。