Question

我主要是一名C＃开发人员，他在JavaScript / EcmaScript方面经验有限，并试图了解创建我可以在我的函数中重用的API服务实例的正确方法。

我正在处理的应用是React应用，而我尝试使用的API服务是Google商家信息。我为所有Google商家信息相关功能创建了一个外部文件，以便它们可以重复使用。以下是该文件中的函数，该API将调用API以获取Google提供的一些建议。

export const googleCall = (keyword) => {
    const googlePlacesAutocomplete = new google.maps.places.AutocompleteService();
    googlePlacesAutocomplete.getQueryPredictions({input: keyword}, callback);
}

每次新的按键进入此功能时，保持＆＃34;全新＆go;都是google.maps.places.AutocompleteService（）是没有意义的。

我能想到的一个选择是在我的React应用程序中 - 比如在ComponentWillMount中 - 我可以创建一个这个服务的实例，然后将它与关键字一起传递给这个函数，但这看起来有点麻烦。这看起来像这样：

export const googleCall = (googleService, keyword) => {
    googleService.getQueryPredictions({input: keyword}, callback);
}

我认为更好的方法是确保googleCall（）函数可以访问状态中的内容，即在我的redux商店中。换句话说，我可以在ComponentWillMount函数中创建googleService的实例，并将其放在我的redux商店中。我不确定如何让这个功能访问我所处的状态。

或者，更一般地说，在ES中 - 特别是在ES2015中 - 如何创建这个服务的实例，我的googleCall函数可以在每次调用它时访问它而无需创建新的服务实例？我不确定如何在ES中创建一个实例，并将其保存在内存中以供后续调用。

更新：

在我的React组件中，我只是得到了这样的googleCall函数：

import {googleCall} from '../googlePlacesFunctions';

Answer 1

我对你的问题感到有些困惑。为什么不呢？

// api.js

const googlePlacesAutocomplete = new google.maps.places.AutocompleteService();

export const googleCall = (keyword, callback) => {
  googlePlacesAutocomplete.getQueryPredictions({input: keyword}, callback);
}

这样你就不会在任何地方传递任何内容，而且你不会创建多个AutocompleteService的实例

在ES2015中创建API服务实例

1 个答案: