javascript - 使用 vue 数据构建 axios url - 未定义

Question

我正在尝试使用 axios 从 openweathermap 获取数据，目前，我正在通过使用几种方法从用户浏览器获取经纬度来构建 url，然后调用构建 url 的函数。

url 构建正确，没有任何问题，但是当我尝试使用 axios 调用 api 时，会发生奇怪的事情(基本上我得到了自己的页面 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 替换为 getWeather 函数中的 self 但那没用。

问题是我正在尝试从 apiUrl 获取 url，该 url 应通过 getUrl 方法进行更新。尽管在安装后运行 getWeather 时，URL 似乎并未更新(如果其硬编码，则可以正常工作)。

感谢您的帮助。

Answer 1

我怀疑问题出在这一行navigator.geolocation.getCurrentPosition(this.getUrl);。

当 this.getUrl 被 navigator 回调时，该函数不再具有正确的 this，因此 this. apiUrl = buildWeatherUrl(lat, lon); 将不起作用。尝试将 this 绑定(bind)到 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); });

您需要重做之前的修复:

I also tried to add let self = this; and replace all this to self in the getWeather function but that didn't work.

或者简单地使用箭头函数。

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

滚动到答案的标有“常见问题:使用对象方法作为回调/事件处理程序”的部分。