vue中使用 promise在computed和methods的区别

Question

问题：定义了一个api
里面返回一个Promise

export function fetchPost(url, var1) {
  return new Promise((resolve, reject) => {
    axios.post(url, qs.stringify(var1)).then(res => {
      resolve(res.data)
    }).catch(res => {
      reject(res)
    })
  })
}

然后在vue组件中定义了computed属性

    computed: {
      article: async function () {
        let id = this.$route.params.id;
        let obj = await getDescribe(id);
        console.log(obj.tLists[0]);
        return obj.tLists[0];
      }
    },

但是在页面中显示article时promise

但是如果不使用computed而使用methods+mounted生命钩子来完成

    methods: {
      async getArticle() {
        let id = this.$route.params.id;
        let obj = await getDescribe(id);
        this.article = obj.tLists[0];
      }
    },
    mounted() {
      this.getArticle()
    }

可以看到article会变成正常的object
这是什么原因导致的 希望可以解惑

Answer 1

async function中的返回值是用于后续异步操作的，并不是其本身的返回值。调用该函数时，会立即返回一个Promise对象。

async function firstJob() {
  var result1 = await someAsyncTask();
  var result2 = await anotherAsyncTask(result1);
  return result2;
}
console(firstJob()); // 返回Promise

firstJob().then(function (result){
  console.log(result); // 返回result2的值
});

computed计算变量的结果是直接取的function的返回值，不会考虑该function是否为异步，所以每次计算结果article都是一个Promise对象。watch里面的代码还是会执行完的，只不过obj.tLists[0]值并没有作为其方法返回的值附给article。

methods中的getArticle方法里有this.article = obj.tLists[0]这句，所以article在异步执行到这句话的时候就会被赋值。

如果要监听this.$route.params.id的变化来异步修改article，建议用watch。