Javascript 导出服务器端函数以供客户端使用

我有一个函数，它试图用来自动完成

html

输入字段。我想在

上做一个向下键，这样用户就不必完全键入他们的城市名称

在
app.js
中，我使用，以便可以通过
process.env.MAPBOX\u令牌访问我的API密钥，并且需要
MAPBOX
：

app.js:

require('dotenv').config()
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: process.env.MAPBOX_TOKEN });

$(document).ready(function () {
    $('#citySearch').on('keyup', function(){
        var location = $(this).val();
        console.log("Location: " + location);

        async function geocoder(location){
            try {
                let response = await geocodingClient
                    .forwardGeocode({
                        query: location,
                        limit: 2
                    })
                    .send();
                console.log(response.body.features[0].place_name)
            } catch(err){
                console.log(err.message);
            }
        }
        geocoder(location)
    })

});

现在我想让一些客户端jQuery代码可以访问
geocodingClient
，这样我就可以在表单
字段中调用
keydown
上的函数
geocoder
我该怎么做？

下面抛出错误
未定义geocodingClient
。如何使此服务器端函数可用于客户端代码

public/js/mapBox.js:

require('dotenv').config()
const mbxGeocoding = require('@mapbox/mapbox-sdk/services/geocoding');
const geocodingClient = mbxGeocoding({ accessToken: process.env.MAPBOX_TOKEN });

$(document).ready(function () {
    $('#citySearch').on('keyup', function(){
        var location = $(this).val();
        console.log("Location: " + location);

        async function geocoder(location){
            try {
                let response = await geocodingClient
                    .forwardGeocode({
                        query: location,
                        limit: 2
                    })
                    .send();
                console.log(response.body.features[0].place_name)
            } catch(err){
                console.log(err.message);
            }
        }
        geocoder(location)
    })

});

您不能在客户端公开后端。此外，您不应该这样做。

你需要在两端之间进行沟通，并假设它们是不相关的

向服务器发送请求并处理返回的响应

$(document).ready(function () {
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location)
    //1.  request to back end with data and deal with response with
    // http libs (ajax, node http/https, axios, etc...)
  })
});



// 2. Reach a route to invoke the async function and respond the result



// 3. this should be at the backend and responding an answer to route that respondes to front.
 async function geocoder(location){
  try {
      let response = await geocodingClient
          .forwardGeocode({
              query: location,
              limit: 2
          })
          .send();
      console.log(response.body.features[0].place_name)
  } catch(err){
      console.log(err.message);
  }
}
// this should be at the backend and responding an answer to route that respondes to front.

您需要做的是将mapbox客户端脚本包含到html中

有关详细信息，请参见下面的链接


像下面这样

<script src="https://unpkg.com/@mapbox/mapbox-sdk/umd/mapbox-sdk.min.js"></script>
<script>
$(document).ready(function () {
  var mapboxClient = mapboxSdk({ accessToken: MY_ACCESS_TOKEN });
  $('#citySearch').on('keyup', function(){
    var location = $(this).val();
    console.log("Location: " + location);
    async function geocoder(location){
        try {
            let response = await mapboxClient.geocoding
                .forwardGeocode({
                    query: location,
                    limit: 2
                })
                .send();
            console.log(response.body.features[0].place_name)
        } catch(err){
            console.log(err.message);
        }
    }
    geocoder();
  })
}); </script>


$（文档）.ready（函数（）{
var mapboxClient=mapboxSdk（{accessToken:MY_ACCESS_TOKEN}）；
$（'citySearch'）。在（'keyup'，function（）上{
var location=$（this.val（）；
控制台日志（“位置：+位置）；
异步功能地理编码器（位置）{
试一试{
let response=wait mapboxClient.geocoding
.forwardGeocode({
查询：位置，
限额：2
})
.send（）；
console.log（response.body.features[0]。place\u name）
}捕捉（错误）{
控制台日志（错误消息）；
}
}
地理编码器（）；
})
}); 
但是我如何才能访问
我的\u访问\u令牌（服务器端）？您需要将其作为well@fugu要正确使用令牌，请参阅您可以为您的客户端创建其他令牌。appI今晚将尝试此操作。假设这两种方法和@FedeSc给出的答案都是有效的——有没有任何理由认为这不比另一种方法更好？@fugu这是针对不使用JS模块化系统的应用程序（即nodejs beckend）。如前所述
如果您不使用JS模块系统，您可以在CDN unpkg.com上使用引用预绑定文件的标记。
基本上，您将导入两次功能（前后），并且您必须在客户端处理秘密令牌，以避免http请求。谢谢-这非常有用。我希望我不必走这条路，因为我正在尝试创建一个在键入时调用函数的自动完成。这需要在
keydown
？@fugu-Yes上进行ajax调用，通常情况下就是这样，在每次按键时，ping服务器以获取自动完成列表，或者，在开始时ping服务器以获取完整的数据列表，并在本地执行自动完成。