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

Question

我正在尝试使用 axios 从 openweathermap 获取数据，目前，我正在通过使用一些方法从用户浏览器获取 lat 和 lon，然后调用构建 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，所以我不确定我在这里做错了什么。我还尝试在getWeather 函数中添加let self = this; 并将所有this 替换为self，但这不起作用。

问题是我正在尝试从 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;并将所有这些替换为 self in 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 中传递给对象，所以我使用了全局变量，有些东西打到了我，问题在于我如何尝试从 navigator.geolocation.getCurrentPosition 中获取 url /p>

所以我通过在 vue 中的数据中添加 lat 和 lon 来解决这个问题，然后在调用 axios 之前构建 url。这给了我正确的结果。

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

    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);
      });