如果这只是添加BASE_URL，那么这可以通过在constants.js文件中声明它并从那里导出来实现。但是，这让我们BASE_URL + "something"每次发出网络请求时都会这样做，这也不是很理想。此外，在某些情况下，必须共享其他配置，例如必须将公共标头添加到所有请求中。

为了解决这个问题，大多数请求库都有内置解决方案。如果我们选择axios作为最受欢迎的，我们可以创建一个像这样的实例：

const instance = axios.create({
  baseURL: 'https://some-domain.com/api/',
  timeout: 1000,
  headers: {'X-Custom-Header': 'foobar'}
});
export default instance;

并将其导入axios到将要使用的任何地方，例如：

import axios from "./axios-instance";

假设axios-instance.js是创建实例的文件。现在您可以跳过向BASE_URL每个请求添加 ，因为它已在实例中提供。

如果webpack用于代码包，可以使用DefinePlugin。

new webpack.DefinePlugin({
    'BASE_URL': JSON.stringify('https://apiurlgoeshere.com/')
});

对于gulp构建，可以使用gulp-replace。

.pipe(replace('BASE_URL', 'https://apiurlgoeshere.com/'))

我知道自从我创建这篇文章以来已经有一段时间了 - 只是想回顾一下我真正学到的东西。

这是为 Axios 设置全局配置的好方法。我通常会创建一个文件夹并在其中创建一个 api.js 文件，我用它来进行所有 API 调用，这很棒，因为这意味着您只需指定一次标头/基本 URL/凭据等。

这是解决方案的代码示例：

function apiCall (method, path, data) {
    let url = "https://urltoyourapis.com/";
    return new Promise((resolve, reject) => {
        return Axios[method](url, {headers}, data).then(res => {
            return resolve(res);
        }).catch(err => {
            return reject(err);
        })
    })
}

现在，每当您想要进行 API 调用时，您都可以将此函数导入到您想要进行 API 调用的文件中，然后执行以下操作：

apiCall("get", "account-info")

然后，这将对端点“account-info”进行 API 调用以获取信息，您可以等待并将结果设置为变量或使用 .then .catch 来处理响应。