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作为最受欢迎的广告，我们可以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

我知道我写这篇文章已经有一段时间了-只是想回顾一下我学到的东西。

这是为Axios设置全局配置的好方法。我通常会创建一个文件夹并在其中创建一个api.js文件，我可以使用该文件进行所有API调用，这很棒，因为这意味着您只需指定一次标题/基本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中创建全局可访问变量

4 个答案: