Question

我正在尝试从天气API中获取数据。这是获取http://api.wunderground.com/api/5b81d144ae2d1942/conditions/q/46.838260,-71.293689.json

的api链接

在我的api.js文件中，我有这个基本功能：

const baseUrl = `http://api.wunderground.com/api/5b81d144ae2d1942/conditions/q`;

export const getCurrent = (lat,lon) => {
  return fetch(`${baseUrl}/${lon},${lat}.json`)
    .then((response) => response.json())
    .then((json) => {
      console.log(json.current_observation.weather)
      return json.current_observation
    })
    .catch(() => {
      console.error('unable to fetch tasks')
    })
}

注意console.log，在这个函数中我能够获取json数据，我得到了我想要的值。

现在，在我的Vue中，我用这种方式调用此函数：

export default {
  data: () => ({
    current: []
  }),
  created: function () {
    if (navigator.geolocation) {
      navigator.geolocation.getCurrentPosition(this.showPosition);
    }
  },
  methods: {
    showPosition(position) {
      const data = api.getCurrent(position.coords.longitude,position.coords.latitude);
      this.current = data;
      console.log(this.current);
    }
  }
}

出于某种原因，这里的console.log给了我这个：

Promise {<pending>}__proto__: 
Promise[[PromiseStatus]]: "resolved"
[[PromiseValue]]: Object

我不知道发生了什么，但我无法访问数据。我在网上搜索过，很多网页都在讨论这个问题，但找不到确切的解决方案，只有长篇文章......

是否有解决方案（代码请）

非常感谢。

Answer 1

要“摆脱”Promise并访问其数据，请在.getCurrent()的结果中使用.then()，就像使用fetch()时一样：

  methods: {
    showPosition(position) {
      api.getCurrent(position.coords.longitude,position.coords.latitude)
        .then((data) => {
          this.current = data;
          console.log(this.current);
        }
    }
  }

或者，您可以将showPosition声明为async，然后使用await：

  methods: {
    showPosition: async function(position) {
      const data = await api.getCurrent(position.coords.longitude,position.coords.latitude);
      this.current = data;
      console.log(this.current);
    }
  }

请注意，两个执行的结果将以异步方式处理，这意味着this.current不会立即获得data的值。

如何在获取json数据时摆脱承诺

1 个答案: