Vue中的async和await的使用

async和await

在Vue中如果某个方法的返回值是Promise对象那么我们可以使用async和await来简化这次Promise操作
  • 注:await只能用在被async修饰的方法中
  • 没有使用async和await
login(){
    this.$refs.loginFormRef.validate(  valid =>{
        console.log(valid);
        if (!valid) return;
        const result=  this.$axios.post("login/loginCheckOut",this.loginForm);
        console.log(result);
    });
}

  • 使用了async和await
login(){
    this.$refs.loginFormRef.validate( async valid =>{
        console.log(valid);
        if (!valid) return;
        const result= await this.$axios.post("login/loginCheckOut",this.loginForm);
        console.log(result);
    });
}

  • 接着还可以使用{data:res}来解构出data数据
login(){
    this.$refs.loginFormRef.validate( async valid =>{
        console.log(valid);
        if (!valid) return;
        const {data:res}= await this.$axios.post("login/loginCheckOut",this.loginForm);
        console.log(res);
    });
}

来自为知笔记(Wiz)

原文地址:https://www.cnblogs.com/agoodmanisme/p/55bc7a6a94fd7701410a607acfb3576a.html

时间: 2024-11-07 19:17:51

Vue中的async和await的使用的相关文章

[译] C# 5.0 中的 Async 和 Await (整理中...)

C# 5.0 中的 Async 和 Await [博主]反骨仔 [本文]http://www.cnblogs.com/liqingwen/p/6069062.html 伴随着 .NET 4.5 和 Visual Studio 2012 的 C# 5.0 ,我们可以使用的新的异步模式,这里涉及到 async 和 await 关键字.有许多不同点的观点,比起之前我们所看到的代码,它的可读性和实用性是否更加突出.我们将通过一个例子,看看它与当前的做法有何“与众不同”. 线性代码与非线性代码 大部分的软

ES7中的async和await

ES7中的async和await 在上一章中,使用Promise将原本的回调方式转换为链式操作,这就将一个个异步执行的操作串在一条同步线上了.下一次的操作必须等待当前操作的结束. 使用Promise的最后,遇到了一个问题,就是如果要对已经获得数据数组进行遍历,并在遍历中继续对每一条数据做异步请求操作,这就构成了一个树状查询. 蠢办法 对于上述问题,我们完全可以用上一章中的垃圾代码来构建一个for循环的嵌套then! 但上一章已经说过,千万不要写出这种垃圾代码,所以如果你的node或者浏览器并不支

ES7中的async 和 await

async 和 await 一个函数如果加上 async ,那么该函数就会返回一个 Promise async function test() { return "1" } console.log(test()) // -> Promise {<resolved>: "1"} async 就是将函数返回值使用 Promise.resolve() 包裹了下,和 then 中处理返回值一样,并且 await 只能配套 async 使用. async f

vue中使用async/await的实践

一.前言 在项目中经常遇到处理异步请求的情况,面对层层的嵌套,回调显示那么苍白无力: async / await是ES7的重要特性之一,也是目前社区里公认的优秀异步解决方案,既然这样就用上吧. 二.配置编译 网上实践很多... 反倒是Promise在实践过程中加了一个polyfill. 三.实践 await后方法要写成peomise的形式,大概如下,这样异步操作看起来就像同步操作一样明了. 原文地址:https://www.cnblogs.com/leaf930814/p/8502541.htm

在vue中使用async/await遇到的坑

最近无聊在搞一些新的东西,今天就遇到一个async/await的坑: 因为我用的不是vue官方的脚手架,所以遇到这样的问题: await is a reserved word 这样的警告,我猜应该是缺乏相关的解析器. 然后取掉await之后,又出现async出现问题: 好吧,只能google之. 查到相关资料后: 安装了babel-plugin-transform-runtime还有babel-runtime,并在.babelrc文件里添加:"plugins":["trans

【转】【C#】C# 5.0 新特性——Async和Await使异步编程更简单

一.引言 在之前的C#基础知识系列文章中只介绍了从C#1.0到C#4.0中主要的特性,然而.NET 4.5 的推出,对于C#又有了新特性的增加--就是C#5.0中async和await两个关键字,这两个关键字简化了异步编程,之所以简化了,还是因为编译器给我们做了更多的工作,下面就具体看看编译器到底在背后帮我们做了哪些复杂的工作的. 二.同步代码存在的问题 对于同步的代码,大家肯定都不陌生,因为我们平常写的代码大部分都是同步的,然而同步代码却存在一个很严重的问题,例如我们向一个Web服务器发出一个

使用 Async 和 Await 的异步编程

来自:http://msdn.microsoft.com/library/vstudio/hh191443 异步对可能起阻止作用的活动(例如,应用程序访问 Web 时)至关重要. 对 Web 资源的访问有时很慢或会延迟. 如果此类活动在同步过程中受阻,则整个应用程序必须等待. 在异步过程中,应用程序可继续执行不依赖 Web 资源的其他工作,直至潜在阻止任务完成. 下表显示了异步编程提高响应能力的典型区域. 从 .NET Framework 4.5 和 Windows 运行时中列出的 API 包含

[.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库

此为文章备份,原文出处(我的网站)  [.NET 4.5] ADO.NET / ASP.NET 使用 Async 和 Await 异步 存取数据库 http://www.dotblogs.com.tw/mis2000lab/archive/2014/05/08/ado.net4.5_async_await_20140508.aspx 以前的ADO.NET也能作  "异步"(Async,大陆说法:异步),可以参考 KKBruce 2009/11月的文章: SQLCOMMAND的异步行程

C#的多线程——使用async和await来完成异步编程(Asynchronous Programming with async and await)

https://msdn.microsoft.com/zh-cn/library/mt674882.aspx 侵删 更新于:2015年6月20日 欲获得最新的Visual Studio 2017 RC文档,参考Visual Studio 2017 RC Documentation. 使用异步编程,你可以避免性能瓶颈和提升总体相应效率.然而,传统的异步方法代码的编写方式比较复杂,导致它很难编写,调试和维护. Visual Studio 2012引入了一个简单的异步编程的方法,依赖.NET Fram