Question

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

Answer 1

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

基本URL组件：

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

Answer 2

如果您使用的是 redux ，我将看看这个lib redux-api-middleware。

我喜欢使用它，因为它可以使代码清晰。代替使用axios，它使用fetch来管理请求。

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

2 个答案: