Question

我正在尝试使用axios从openweathermap获取数据，目前，我正在通过使用一些方法从用户浏览器中获取经纬度，然后调用一个用于构建URL的函数来构建url。 / p>

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并将所有self替换为getWeather，但这没用。

问题是我正在尝试从apiUrl获取url，该URL应该通过getUrl方法进行更新。尽管在挂载后运行getWeather时，URL似乎没有更新（如果其经过硬编码，则可以正常工作）。

谢谢您的帮助。

Answer 1

我怀疑问题出在这行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

的权威堆栈溢出答案的链接。

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

Answer 2

我猜您已将路由注册为POST请求，而不是GET请求在路由文件中。只需将其更改为GET，代码就会固定。

Answer 3

我能够通过注释掉所有vue代码来解决此问题，然后创建一个名为data的空对象，然后尝试将api url放入该对象中。在不断失败之后，我意识到无法将URL从navigator.geolocation.getCurrentPosition内部传递给对象，所以我玩了全局变量，并且遇到了麻烦，问题在于我如何尝试从{{ 1}}

因此，我通过在Vue中的数据中添加navigator.geolocation.getCurrentPosition和lat来解决此问题，然后在调用axios之前构建url。那给了我正确的结果。

这是最终代码，以防对某人有用。

lon

使用Vue数据构建axios网址-变得不确定

3 个答案: