promise和async await的区别
2024-08-28 16:22:20
在项目中第一次遇到async await的这种异步写法,来搞懂它
项目场景 :点击登录按钮后执行的事件,先进行表单校验 this.$refs.loginFormRef.validate
(element库中的规则),校验成功后向服务端发送请求,getLogindata是我封装的axios请求函数,返回值是promise。
export function getLogindata(loginForm) {
return request1({
url: '/login',
data: loginForm
})
}
1、用async await
this.$refs.loginFormRef.validate(async valid => {
if (!valid) return;
const result = await getLogindata(this.loginForm);
console.log(result);
});
控制台结果:
2、用promise
this.$refs.loginFormRef.validate(valid => {
if (!valid) return;
const result = getLogindata(this.loginForm)
console.log(result);
});
控制台结果:
this.$refs.loginFormRef.validate(valid => {
if (!valid) return;
getLogindata(this.loginForm).then(res => {
console.log(res);
});
});
控制台结果:
从三个控制台的返回结果可以看到,getLogindata函数加上await后返回值结果就是promise执行reslove/then后得到的结果,所以await getLogindata()就是表示会等到getLogindata的promise成功reosolve之后才得到结果。
通俗易懂的解释:
1、async修饰的函数是一个异步函数,async修饰的函数也带有then catch方法,因此,经async修饰的函数也是一个promise。await关键字只能用在aync定义的函数内。
2、Promise的出现解决了传统callback函数导致的“地域回调”问题,但它的语法导致了它向纵向发展行成了一个回调链,遇到复杂的业务场景,这样的语法显然也是不美观的。
而async await代码看起来会简洁些,使得异步代码看起来像同步代码,await的本质是可以提供等同于”同步效果“的等待异步返回能力的语法糖,只有这一句代码执行完,
才会执行下一句。async/await使得异步代码看起来像同步代码,这正是它的魔力所在
3、简单来看,这两者除了语法糖不一样外,他们解决的问题、达到的效果是大同小异的,我们可以在不同的应用场景,根据自己的喜好来选择使用。
最新文章
- MySQL字符集
- 插入排序 - C语言
- asp.net MVC中使用entity framework出现从 datetime2 数据类型到 datetime 数据类型的转换产生一个超出范围的值”的处理
- ES6转换为ES5
- NGUI 学习笔记实战之二——商城数据绑定(Ndata)
- 去掉cajviewer 右上角的“中国知网数字出版物超市
- MongoDB简单操作
- JavaScript_数组
- C++ template随笔
- web Listener
- 第五章_JSTL
- 解读 Vue 之 Reactive
- 前端开发工具Brackets介绍,安装及安装Emme插件时踩过的坑
- 打造基于Clang LibTooling的iOS自动打点系统CLAS(三)
- EasyUI动态加载panel,并给panel添加内容
- Java——ping &; telnet实现
- 【51Nod】1920 空间统计学 状压DP
- SGU 101 Domino (输出欧拉路径)
- Python 由list转为dictionary
- linux中守护进程启停工具start-stop-daemon
热门文章
- vue脚手架创建项目名字报错
- Python模块_import语句_from...import 函数名_from ... import *
- ASP.NET Core 监听SQL Server数据库的实时信息
- Python os.rename() 方法
- PHP array_map() 函数
- PHP link() 函数
- luogu P1784 数独 dfs 舞蹈链 DXL
- 剑指 Offer 50. 第一个只出现一次的字符
- JavaWeb项目的部署以及远程调试
- Semantic Monocular SLAM for Highly Dynamic Environments面向高动态环境的语义单目SLAM