promise和async await的区别
在项目中第一次遇到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、简单来看,这两者除了语法糖不一样外,他们解决的问题、达到的效果是大同小异的,我们可以在不同的应用场景,根据自己的喜好来选择使用。