在反应项目中构建 api 配置文件的最佳方法是什么？答案

【问题标题】：What is the best way to structure api config file in react project?在反应项目中构建 api 配置文件的最佳方法是什么？
【发布时间】：2019-01-14 19:20:51
【问题描述】：

我正在开发 react 应用程序，对于 api 调用，我正在使用 axios 库。对于所有 api 调用，我都有 app.js 文件，然后当某些组件需要进行 api 调用时，只需从该文件调用函数。简而言之，现在这将是一个小结构。在 app.js 文件中，我有多个 api 调用，在这些调用中，我还对令牌授权的标头配置原因进行了验证。所以我想要一个单独的配置文件，它有默认的 api 头和我用于 api 调用的所有 url。我正在寻找一种构建代码的最佳方式。

【问题讨论】：

标签： reactjs api axios

【解决方案1】：

您可以使用一个组件，它保存您的 baseURL（API 基本位置）

基本网址组件：

import axios from 'axios';

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

export default instance;

另一个保存 API 调用部分的文件：你可以给这个组件起一个想要的名字（例如：axiousURL）

export const ADD_URL = 'AddArticle';
export const DELETE_URL = 'DeleteArticle';
export const UPDATE_URL = 'UpdateArticle';

消费：

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
            } );

【讨论】：

看起来不错，但我也需要升级一下发送令牌授权，所以如果我将标头放在 axios.create 中，我将为每个 axios 调用提供它，并且我不需要它来登录

【解决方案2】：

如果你使用 redux，我会看看这个库 redux-api-middleware。

我喜欢使用它，因为它使代码清晰。它不使用axios，而是使用fetch 来管理请求。

【讨论】：