V2EX = way to explore
V2EX 是一个关于分享和探索的地方
现在注册
已注册用户请  登录
wwjvtwoex
V2EX  ›  Vue.js

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

  •  
  •   wwjvtwoex · 2018-08-16 15:39:39 +08:00 · 4621 次点击
    这是一个创建于 2289 天前的主题,其中的信息可能已经有所发展或是发生改变。

    在 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;
    	},
    },
    

    ...

    9 条回复    2019-04-04 15:00:02 +08:00
    ccccccc
        1
    ccccccc  
       2018-08-16 16:11:33 +08:00 via iPhone
    async 才可以 await
    wwjvtwoex
        2
    wwjvtwoex  
    OP
       2018-08-16 16:14:36 +08:00
    实际代码中是 async, 这里写错了
    wwjvtwoex
        3
    wwjvtwoex  
    OP
       2018-08-16 16:17:41 +08:00
    再贴一遍实际的代码


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

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

    // textarea 中的文字为 "[object promise]"
    return txt;
    },
    },
    feibinyang
        4
    feibinyang  
       2018-08-16 16:23:05 +08:00   ❤️ 1
    调用 async/await 返回的是 Promise,await 之后的语句会被 Promise().then(....) then 之后执行
    leafiy
        5
    leafiy  
       2018-08-16 16:29:07 +08:00   ❤️ 1
    wwjvtwoex
        6
    wwjvtwoex  
    OP
       2018-08-16 16:36:36 +08:00
    @leafiy #5,我使用 异步 method 得到同样结果
    leafiy
        7
    leafiy  
       2018-08-16 16:41:56 +08:00   ❤️ 1
    @wwjvtwoex rsp = fetch (); txt = await rsp.text() ?
    这里还不如直接用 fetch().then()
    mrcode
        8
    mrcode  
       2018-09-23 00:42:58 +08:00
    楼主的用法 vue 表示超纲了...

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

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

    楼主不妨把这段代码放到 methods 里,把结果放到 data 里
    q540374501
        9
    q540374501  
       2019-04-04 15:00:02 +08:00
    血泪教训,千万不要试图在 async 里封装什么东西让人调用,调用者必须以 async/await 的结构调用才能取到值。然而这完全违背了封装的原意,vue 在渲染时直接把 computed 调用了,返回一个 promise,全部完蛋。
    关于   ·   帮助文档   ·   博客   ·   API   ·   FAQ   ·   实用小工具   ·   1861 人在线   最高记录 6679   ·     Select Language
    创意工作者们的社区
    World is powered by solitude
    VERSION: 3.9.8.5 · 25ms · UTC 16:23 · PVG 00:23 · LAX 08:23 · JFK 11:23
    Developed with CodeLauncher
    ♥ Do have faith in what you're doing.