如何在 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"每次发出网络请求时都这样做，这也不是很理想。此外，在某些情况下，可能必须共享其他配置，例如必须将公共标头添加到所有请求中。

为了解决这个问题，大多数请求库都有内置解决方案。如果我们选择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到每个请求，因为实例中已提供了它。