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

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

而不必指定： const BASE_URL=''

---

在每个页面上，我希望整个应用程序都可以访问BASE_URL，因此我可以执行BASE_URL+API_调用，例如

如果这只是添加

BASE_URL

，那么可以通过在

constants.js

文件中声明它并从那里导出它来实现。但是，这使得我们每次发出网络请求时都要做

BASE\u URL+“某事”

，这也不是很理想。此外，在某些情况下，还可能需要共享其他配置，例如，必须将公共头添加到所有请求中

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

并在将要使用的

axios

的任何地方导入此文件，如：

import axios from "./axios-instance";

---

假设

axios instance.js

是创建实例的文件。现在，您可以跳过向每个请求添加

BASE\u URL

，因为它已经在实例中提供了。

如果

webpack

用于代码包，则可以使用

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

对于

gulp

build，可以使用

---

.pipe（替换（'BASE\u 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来处理响应

您是否尝试使用

localStorage

保存全局变量？@Jin-这是一个SPA，不需要存储它。我建议在单个页面中提供所有URL，然后将这些URL使用到不同的页面中。请尝试这样做。window.BASE_URL=''；然后，您可以全局使用此变量。假设您使用的是类似Webpack的模块绑定器，请创建一个模块（例如，

constants.js

）并将其导入到需要常量的任何位置。看起来很有趣，可能比React Context更好。你能详细说明一下什么时候使用React-Context以及什么时候使用这种方式吗？@EresDev:when-React-Context是。

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