异步神器async-await

时间: 2020-05-26阅读: 68标签: es6

ES5的回调使我们陷入地狱,ES6的Promise使我们脱离魔障,终于、ES7的async-await带我们走向光明。今天就来学习一下 async-await。


async-await和Promise的关系

经常会看到有了 async-await、promise 还有必要学习吗、async await优于promise的几个特点,接收了这些信息后,就蒙圈了。现在才知道,async-await是promise和generator的语法糖。只是为了让我们书写代码时更加流畅,当然也增强了代码的可读性。简单来说:async-await 是建立在 promise机制之上的,并不能取代其地位。


基本语法

async function basicDemo() {    let result = await Math.random();    console.log(result);
}

basicDemo();// 0.6484863241051226//Promise {[[PromiseStatus]]: "resolved", [[PromiseValue]]: undefined}

上述代码就是async-await的基本使用形式。有两个陌生的关键字async、await,同时函数执行结果似乎返回了一个promise对象。


async

async用来表示函数是异步的,定义的函数会返回一个promise对象,可以使用then方法添加回调函数

async function demo01() {    return 123;
}

demo01().then(val => { console.log(val);// 123});

若 async 定义的函数有返回值,return 123;相当于Promise.resolve(123),没有声明式的 return则相当于执行了Promise.resolve();


await

await 可以理解为是 async wait 的简写。await 必须出现在 async 函数内部,不能单独使用。

function notAsyncFunc() {
await Math.random();
}
notAsyncFunc();//Uncaught SyntaxError: Unexpected identifier

await 后面可以跟任何的js 表达式。虽然说 await 可以等很多类型的东西,但是它最主要的意图是用来等待 Promise 对象的状态被 resolved。如果await的是 promise对象会造成异步函数停止执行并且等待 promise 的解决,如果等的是正常的表达式则立即执行。

function sleep(second) {    return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(' enough sleep~');
}, second);
})
}function normalFunc() { console.log('normalFunc');
}
async function awaitDemo() {
await normalFunc(); console.log('something, ~~'); let result = await sleep(2000); console.log(result);// 两秒之后会被打印出来}
awaitDemo();// normalFunc// VM4036:13 something, ~~// VM4036:15 enough sleep~

希望通过上面的 demo,大家可以理解我上面的话。


实例

举例说明啊,你有三个请求需要发生,第三个请求是依赖于第二个请求的解构第二个请求依赖于第一个请求的结果。若用 ES5实现会有3层的回调,若用Promise 实现至少需要3个then。一个是代码横向发展,另一个是纵向发展。今天只给出 async-await 的实现哈~

//我们仍然使用 setTimeout 来模拟异步请求function sleep(second, param) {    return new Promise((resolve, reject) => {
setTimeout(() => {
resolve(param);
}, second);
})
}

async function test() { let result1 = await sleep(2000, 'req01'); let result2 = await sleep(1000, 'req02' + result1); let result3 = await sleep(500, 'req03' + result2); console.log(`
${result3}
${result2}
${result1}
`);
}

test();//req03req02req01//req02req01//req01


错误处理

上述的代码好像给的都是resolve的情况,那么reject的时候我们该如何处理呢?

function sleep(second) {    return new Promise((resolve, reject) => {
setTimeout(() => {
reject('want to sleep~');
}, second);
})
}

async function errorDemo() { let result = await sleep(1000); console.log(result);
}
errorDemo();// VM706:11 Uncaught (in promise) want to sleep~// 为了处理Promise.reject 的情况我们应该将代码块用 try catch 包裹一下async function errorDemoSuper() { try { let result = await sleep(1000); console.log(result);
} catch (err) { console.log(err);
}
}

errorDemoSuper();// want to sleep~// 有了 try catch 之后我们就能够拿到 Promise.reject 回来的数据了。

小心你的并行处理!!!

我这里为啥加了三个感叹号呢~,因为对于初学者来说一不小心就将 ajax 的并发请求发成了阻塞式同步的操作了,我就真真切切的在工作中写了这样的代码。await 若等待的是 promise 就会停止下来。业务是这样的,我有三个异步请求需要发送,相互没有关联,只是需要当请求都结束后将界面的 loading 清除掉即可。
刚学完 async await 开心啊,到处乱用~

function sleep(second) {    return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('request done! ' + Math.random());
}, second);
})
}

async function bugDemo() {
await sleep(1000);
await sleep(1000);
await sleep(1000); console.log('clear the loading~');
}

bugDemo();

loading 确实是等待请求都结束完才清除的。但是你认真的观察下浏览器的 timeline 请求是一个结束后再发另一个的(若观察效果请发真实的 ajax 请求)
那么,正常的处理是怎样的呢?

async function correctDemo() {    let p1 = sleep(1000);    let p2 = sleep(1000);    let p3 = sleep(1000);
await Promise.all([p1, p2, p3]); console.log('clear the loading~');
}
correctDemo();// clear the loading~

恩, 完美。看吧~ async-await并不能取代promise.


await in for 循环

最后一点了,await必须在async函数的上下文中的。

// 正常 for 循环async function forDemo() {    let arr = [1, 2, 3, 4, 5];    for (let i = 0; i < arr.length; i ++) {
await arr[i];
}
}
forDemo();//正常输出// 因为想要炫技把 for循环写成下面这样async function forBugDemo() { let arr = [1, 2, 3, 4, 5];
arr.forEach(item => {
await item;
});
}
forBugDemo();// Uncaught SyntaxError: Unexpected identifier

来自:https://mp.weixin.qq.com/s/8iWQXoc1nfW6-YQolEMQ1A


站长推荐

1.云服务推荐: 国内主流云服务商,各类云产品的最新活动,优惠券领取。地址:阿里云腾讯云华为云

2.广告联盟: 整理了目前主流的广告联盟平台,如果你有流量,可以作为参考选择适合你的平台点击进入

链接: http://www.fly63.com/article/detial/9339

ES6新特性:JavaScript中的Map和WeakMap对象

Map对象是一种有对应 键/值 对的对象, JS的Object也是 键/值 对的对象 ;ES6中Map相对于Object对象有几个区别:

ES6的7个实用技巧

ES6的7个实用技巧包括:1交换元素,2 调试,3 单条语句,4 数组拼接,5 制作副本,6 命名参数,7 Async/Await结合数组解构

es6 class

构造函数的prototype属性,在 ES6 的“类”上面继续存在。事实上,类的所有方法都定义在类的prototype属性上面。

es6 Reflect对象

Reflect是ES6为操作对象而提供的新API,而这个API设计的目的只要有:将Object对象的一些属于语言内部的方法放到Reflect对象上,从Reflect上能拿到语言内部的方法。如:Object.defineProperty,修改某些object方法返回的结果。让Object的操作都变成函数行为。

es6中const定义的属性是否可以改变_为什么有人说const并非一定为常量

const是用来定义常量的,而且定义的时候必须初始化,且定义后不可以修改。const实际上保证的,并不是变量的值不得改动,而是变量指向的那个内存地址所保存的数据不得改动。

JS 中的require 和 import 区别

require 和 import 区别:遵循的模块化规范不一样,出现的时间不同。Require是CommonJS的语法,CommonJS的模块是对象,输入时必须查找对象属性。

ES6中let变量的特点,使用let声明总汇

ES6中let变量的特点:1.let声明变量存在块级作用域,2.let不能先使用再声明3.暂时性死区,在代码块内使用let命令声明变量之前,该变量都是不可用的,4.不允许重复声明

ES6 Iterators

本文旨在分析理解 Iterators。 Iterators 是 JS中的新方法,可以用来循环任意集合。 在ES6中登场的Iterators。因其可被广泛使用,并且已在多处场景派上用场,

ES6新特性:JavaScript中的Reflect对象

Reflect这个对象在我的node(v4.4.3)中还没有实现, babel(6.7.7)也没有实现 ,新版本的chrome是支持的, ff比较早就支持Proxy和Reflect了,要让node支持Reflect可以安装harmony-reflect ;

ES6 Promise用法详解

Promise是一个构造函数,接受一个参数(Function),并且该参数接受两个参数resolve和reject(分别表示异步操作执行成功后的回调函数、执行失败后的回调函数)

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!

文章投稿关于web前端网站点搜索站长推荐网站地图站长QQ:522607023

小程序专栏: 土味情话心理测试脑筋急转弯幽默笑话段子句子语录成语大全运营推广