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

Question

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

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

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

Answer 1

如果这只是添加 BASE_URL，那么这可以通过在 constants.js 文件中声明它并从那里导出来实现。但是，这让我们每次发出网络请求时都做 BASE_URL + "something"，这也不是很理想。也可能存在一些必须共享其他配置的场景，比如必须将公共 header 添加到所有请求。

为了解决这个问题，大多数请求库都有 in-build 解决方案。如果我们选择 axios as the most popular one, we can 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 添加到每个请求，因为它已经在实例中提供。

Answer 2

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

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

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

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

Answer 3

我知道我创建这个 post 已经有一段时间了 - 只是想回顾一下我真正学到的东西。

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

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

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

How do I create a globally accessible variable in React JS

variables

global

reactjs