Создание аксиос URL с данными vue - получение неопределенного

Question

Я пытаюсь использовать axios для получения данных из openweathermap, в настоящее время я создаю URL-адрес, используя несколько методов для получения широты и долготы из браузера пользователя, а затем вызываю функцию, которая создает URL-адрес.

URL-адрес построен правильно и без каких-либо проблем, но когда я пытаюсь вызвать API с помощью Axios, происходит странная вещь (в основном, я получаю HTML-код моей собственной страницы возвращается мне)

Вот код:

let weather = new Vue ({
  el: '#weather',
  data: {
    error: '',
    apiUrl: '',
    city: '',
    country: '',
    icon: '',
    description: '',
    results: [],
  },
  methods: {
    getPosition: function() {
      if (navigator.geolocation){
        navigator.geolocation.getCurrentPosition(this.getUrl);
      }else{
        this.error = 'Geolocation is not supported.';
      }
    },
    getUrl: function(position){
      let lat = position.coords.latitude;
      let lon = position.coords.longitude;
      this.apiUrl = buildWeatherUrl(lat, lon);
    },
    getWeather: function(){
      axios.get(this.apiUrl).then(function (response) {
        this.city = response.data.name;
        this.results = response.data;
      }).catch( error => { console.log(error); });
    }
  },
  beforeMount() {
    this.getPosition();
  },
  mounted() {
    this.getWeather();
  }
});

Это мой первый раз, когда я использую Vue и axios, поэтому я не уверен, что я делаю здесь неправильно. Я также попытался добавить let self = this; и заменить все this на self в функции getWeather, но это не сработало.

Проблема в том, что я пытаюсь получить URL-адрес из apiUrl, который должен обновляться методом getUrl. Хотя, когда getWeather запускается после монтирования, URL-адрес не обновляется (если он жестко запрограммирован, он работает нормально).

Спасибо за помощь.

Answer 1

Полагаю, вы зарегистрировали маршрут как запрос POST, а не как запрос GET в файле маршрутов. Просто измените его на GET и код будет исправлен.

Answer 2

Мне удалось решить эту проблему, закомментировав весь код vue, затем создать пустой объект с именем data и попытаться добавить URL-адрес api в этот объект. После постоянного сбоя я понял, что URL не может быть передан объекту из navigator.geolocation.getCurrentPosition, поэтому я играл с глобальными переменными, и что-то ударило меня, проблема заключалась в том, как я пытался получить URL из navigator.geolocation.getCurrentPosition

Итак, я исправил проблему, добавив lat и lon к данным в vue, а затем построил URL перед вызовом axios. Это дало мне правильные результаты.

Вот окончательный код на случай, если он кому-нибудь пригодится.

    let weather = new Vue ({
  el: '#weather',
  data: {
    error: '',
    lat: 0,
    lon: 0,
    apiUrl: '',
    city: '',
    country: '',
    icon: '',
    description: '',
    results: [],
  },
  methods: {
    getPosition: function() {
      if (navigator.geolocation){
        var vm = this;
        navigator.geolocation.getCurrentPosition(this.updatePosition);
      }else{
        this.error = 'Geolocation is not supported.';
      }
    },
    updatePosition: function(position) {
        this.lat = position.coords.latitude;
        this.lon = position.coords.longitude;
    },
    getWeather: function(){
      let url = buildWeatherUrl(this.lat, this.lon);

      axios
      .get(url)
      .catch(function (error) {
        console.log(error);
      })
      .then(function (response) {
        console.log(response.data);
      });

Answer 3

Я подозреваю, что проблема в этой строке navigator.geolocation.getCurrentPosition(this.getUrl);.

Когда this.getUrl вызывается обратно navigator, функция больше не имеет правильного this, поэтому this.apiUrl = buildWeatherUrl(lat, lon); не будет работать. Попробуйте привязать this к this.getUrl, вот так

getPosition: function() {
  if (navigator.geolocation){
    let getUrl = this.getUrl.bind(this)
    navigator.geolocation.getCurrentPosition(getUrl);
  }else{
    this.error = 'Geolocation is not supported.';
  }
},

Или просто navigator.geolocation.getCurrentPosition(this.getUrl.bind(this));

Эта функция также имеет неправильный this.

axios.get(this.apiUrl).then(function (response) {
    this.city = response.data.name;
    this.results = response.data;
  }).catch( error => { console.log(error); });

Вам также нужно будет повторить предыдущее исправление:

Я также пытался добавить let self = this; и заменить все это себе в функция getWeather, но это не сработало.

Или просто используйте функцию стрелки.

axios.get(this.apiUrl).then(response => {
    this.city = response.data.name;
    this.results = response.data;
  }).catch( error => { console.log(error); });

Вот ссылка на окончательный ответ о переполнении стека о том, как управлять Javascript this: https://stackoverflow.com/a/20279485/2498782

Прокрутите до раздела ответа, озаглавленного «Общая проблема: использование методов объекта в качестве обратных вызовов / обработчиков событий».