Axios - перехватчики не работают при ошибке запроса - код 401

Question

У меня есть простое приложение реакции, которое использует третий API для извлечения данных. Прежде чем делать какие-либо запросы, необходимо извлечь токен, чтобы использовать его в заголовках. Этот токен создается с использованием одного и того же API путем передачи идентификатора клиента и секретного идентификатора - API является Artsy API. Срок действия этого токена истекает, поэтому этот API необходимо запрашивать, если токен не существует. После получения токена я могу без проблем вызывать другие запросы.

Я настроил запросы API в отдельном файле, например так: Apis.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. Таким образом, идея состоит в том, чтобы создать какое-то промежуточное программное обеспечение, создать экземпляр и затем использовать его в качестве перехватчика, если есть запрос на эту ошибку. Если есть, то примените токен к этому экземпляру и выполните запрос retry. Также не уверен, как установить токен в экземпляре.

Пока я получаю ошибку 401 в методе getArtists, этот API вызывается при загрузке страницы, он находится под componentDidMount.

App.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 doc для аутентификации.

Кто-нибудь может помочь? не совсем уверен, как использовать экземпляр как «промежуточное программное обеспечение»? новичок в Axios. Я бы хотел избежать промежуточного программного обеспечения 3-й библиотеки, я предпочитаю учиться вручную, чем использовать 3-и библиотеки. Ваша помощь будет высоко ценится

Обновление:

Мне удалось это несколько сработать, я изменил 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')

2. Об ошибке 401, которую вы получаете из предоставленного вами API-интерфейса. Я думаю, вам следует запросить токен до запуска приложения.

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; этот код не повлияет на заголовки запроса.