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

Question

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

而不必指定:
常量 BASE_URL = ' https://apiurlgoeshere.com/ '

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

Answer 1

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

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