Reactjs 在react项目中构造api配置文件的最佳方法是什么？

我正在开发react应用程序，对于api调用，我正在使用axios库。对于所有api调用，我都有app.js文件，当某些组件需要进行api调用时，只需从该文件调用函数即可。简言之，这将是目前的小结构。在app.js文件中，我有多个api调用，在这些调用中，由于令牌授权的原因，我也在发送头配置。所以我想有一个单独的配置文件，它将有默认的api头和所有我用于api调用的URL。我正在寻找构造代码的最佳方法。

您可以使用一个组件，该组件包含您的基本URL（API基本位置）

基本URL组件：

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://react-test-b1ae5.firebaseio.com/'
});

export default instance;

import axios from '../../axios-orders';
import * as axiosURLS from '../../axiosURL'; 

axios.get( axios.baseURL+axiosURLS.DELETE_URL )
            .then( response => {
                // Some code//
            } )
            .catch( error => {
                // handle error
            } );

另一个保存API调用的文件部分：您可以为该组件指定所需的名称（例如：axiousURL）

消费：

import axios from 'axios';

const instance = axios.create({
    baseURL: 'https://react-test-b1ae5.firebaseio.com/'
});

export default instance;

import axios from '../../axios-orders';
import * as axiosURLS from '../../axiosURL'; 

axios.get( axios.baseURL+axiosURLS.DELETE_URL )
            .then( response => {
                // Some code//
            } )
            .catch( error => {
                // handle error
            } );

---

如果您使用的是redux，我会看看这个库

---

我喜欢使用它，因为它使代码清晰。它没有使用

axios

，而是使用

fetch

来管理请求。

这看起来不错，但我还需要一点升级：例如，我需要有两个不同的axios头，第一个头在我登录时，第二个头在我做一些请求时，我需要发送令牌授权，所以，如果我把头放在axios.create中，我会在每次调用axios时都使用它，登录时不需要它