Экспорт серверной функции для использования на стороне клиента

Question

У меня есть функция, которая пытается использовать MapBox для автозаполнения поля ввода html.Я хочу сделать вызов геокодирования на keydown, чтобы пользователям не приходилось полностью вводить название своего города.

В app.js Я использую dotenv так что мой ключ API доступен через process.env.MAPBOX_TOKEN и требует Mapbox:

app.js:

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

Я сейчас хочу сделать geocodingClient доступно для некоторого клиентского кода jQuery, так что я могу вызвать функцию geocoder для keydown в поле формы <input>. Как я могу это сделать?

Ниже выдает ошибку geocodingClient is not defined.Как сделать эту серверную функцию доступной для кода на стороне клиента?

public / js / mapBox.js:

$(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)
    })

});

Answer 1

Вы не можете выставить свой бэкэнд на стороне клиента.Кроме того, вы не должны.

Вы должны общаться между целями и предполагать, что они не связаны.

Отправьте запрос на сервер и обработайте ответ.

$(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.

Answer 2

Что вам нужно сделать, это включить клиентский скрипт mapbox в html.

для подробностей вы можете увидеть ниже ссылку

https://github.com/mapbox/mapbox-sdk-js#pre-bundled-files-on-unpkgcom

что-то вроде ниже.

<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>