如何在 React JS 中创建全局可访问的变量答案

【问题标题】：How do I create a globally accessible variable in React JS如何在 React JS 中创建全局可访问的变量
【发布时间】：2018-12-06 12:05:46
【问题描述】：

在我的 react JS 应用程序中，我进行了许多 API 调用，

不必指定： const BASE_URL = 'https://apiurlgoeshere.com/'

在每个页面上，我宁愿在整个应用程序中都可以访问 BASE_URL，所以我可以只做 BASE_URL + API_CALL 示例

【问题讨论】：

你试过用localStorage来保存全局变量吗？
@Jin — SPA，没必要存储。
我建议在单个页面中提供所有 URL，然后将这些 URL 用于不同的页面
好的，那么请尝试这样做。 window.BASE_URL = 'apiurlgoeshere.com';然后就可以全局使用这个变量了。
假设你正在使用像 Webpack 这样的模块打包器，创建一个模块（例如constants.js）并将其导入到任何你需要常量的地方。

标签： reactjs variables global

【解决方案1】：

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

为了解决这个问题，大多数请求库都有内置解决方案。如果我们选择axios作为最受欢迎的，我们可以create a instance赞：

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 添加到每个请求中，因为它已在实例中提供。

【讨论】：

看起来很有趣，而且可能比 React Context 更好。你能详细说明你什么时候使用 React Context 以及什么时候使用这种方式吗？
@EresDev: 当 React Context 是 an over-engineered solution.

【解决方案2】：

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

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

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

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

【讨论】：

【解决方案3】：

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

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

【讨论】：

【解决方案4】：

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

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 来处理响应。

【讨论】：