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

问题：定义了一个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

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

但是如果不使用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()
}

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

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

回答

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。

以上是 【Vue】vue中使用 promise在computed和methods的区别 的全部内容， 来源链接： utcz.com/a/75683.html

回到顶部