Загрузка внешней функции из скрипта в Vue компонент

Question

Я пытаюсь получить доступ к внешнему сценарию js, содержащему вспомогательную функцию для использования в моем Vue компоненте. Я пытаюсь использовать https://www.geoplugin.com/webservices/javascript и https://www.npmjs.com/package/vue-plugin-load-script, вдохновленные этой статьей: https://www.sitepoint.com/geo-location-2-lines-javascript/

Я пытаюсь чтобы получить доступ к местоположению города текущего пользователя для моего приложения погоды и, если нет результата, использовать заранее определенный город. Во внешнем файле сценария меня интересует функция function geoplugin_city(), которая возвращает строку текущего города, например «Сидней».

Мой блок кода внутри моего Vue компонента:

  mounted () {
    // Access script
    this.$loadScript("http://www.geoplugin.net/javascript.gp")
      .then(() => {
        // Do something with script
        var city = geoplugin_city()
        this.getWeather(city) // --> run my own weather function with city from script file
      })
      .catch(() => {
        // Failed to fetch script
        this.getWeather("Sydney") // --> run my own weather function with predetermined city
      });
  }

Буду признателен за любую помощь! :)

Answer 1

Объединение нескольких ответов здесь , попробуйте добавить скрипт в dom и установить его свойство sr c в URL вашего скрипта.

  let script = document.createElement('script')
  script.async = true
  script.setAttribute('src', 'http://www.geoplugin.net/javascript.gp')
  document.head.appendChild(script)
  script.onload = () => {
    let city = geoplugin_city()
    this.getWeather(city)
  }
  script.onerror = error => {
    this.getWeather("Sydney")
  }