为什么 vue 中, await 不能取得正确的值 ？

[wwjvtwoex]

在 vue 中，使用 计算属性 设置 textarea

<textarea :value="myVal"></textarea>

...

computed:{
	myVal: function(){
		const rsp = await fetch('/url');
		const txt = await rsp.text();
    
		// 在这里打印出 aaa， 这是实际的值
	console.log(txt);
   
		// textarea 中的文字为 "[object promise]"
		return txt;
	},
},

...

[ccccccc]

async 才可以 await

[wwjvtwoex]

实际代码中是 async, 这里写错了

[wwjvtwoex]

再贴一遍实际的代码


computed:{
myVal: async function(){
const rsp = await fetch('/url');
const txt = await rsp.text();

// 在这里打印出 aaa， 这是实际的值
console.log(txt);

// textarea 中的文字为 "[object promise]"
return txt;
},
},

[feibinyang]

调用 async/await 返回的是 Promise，await 之后的语句会被 Promise().then(....) then 之后执行

[leafiy]

computed 不能异步返回
https://github.com/foxbenjaminfox/vue-async-computed

[wwjvtwoex]

@leafiy #5，我使用 异步 method 得到同样结果

[leafiy]

@wwjvtwoex rsp = fetch （）; txt = await rsp.text() ?
这里还不如直接用 fetch().then()

[mrcode]

楼主的用法 vue 表示超纲了...

computed 本身是用于对 data 里的数据进行一些运算，以便在 render 函数可直接使用

而且，本身 render 函数直接调用 computed 里的函数拿的值，因此楼主这里拿到的是 Promise<any>

楼主不妨把这段代码放到 methods 里，把结果放到 data 里

[q540374501]

血泪教训，千万不要试图在 async 里封装什么东西让人调用，调用者必须以 async/await 的结构调用才能取到值。然而这完全违背了封装的原意，vue 在渲染时直接把 computed 调用了，返回一个 promise，全部完蛋。