ES7前端异步玩法:async/await理解 js原生API妙用(一)

时间:2022-11-09 19:30:54

ES7前端异步玩法:async/await理解

 

在最新的ES7(ES2017)中提出的前端异步特性:async、await。

什么是async、await?

async顾名思义是“异步”的意思,async用于声明一个函数是异步的。而await从字面意思上是“等待”的意思,就是用于等待异步完成。并且await只能在async函数中使用

通常async、await都是跟随Promise一起使用的。为什么这么说呢?因为async返回的都是一个Promise对象同时async适用于任何类型的函数上。这样await得到的就是一个Promise对象(如果不是Promise对象的话那async返回的是什么 就是什么);

await得到Promise对象之后就等待Promise接下来的resolve或者reject。

来看一段简单的代码:

ES7前端异步玩法:async/await理解  js原生API妙用(一)
1 async function testSync() {
2      const response = await new Promise(resolve => {
3          setTimeout(() => {
4              resolve("async await test...");
5           }, 1000);
6      });
7      console.log(response);
8 }
9 testSync();//async await test...
ES7前端异步玩法:async/await理解  js原生API妙用(一)

就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的,也更容易让人理解。

async、await串行并行处理

串行:等待前面一个await执行后接着执行下一个await,以此类推

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 async function asyncAwaitFn(str) {
 2     return await new Promise((resolve, reject) => {
 3         setTimeout(() => {
 4             resolve(str)
 5         }, 1000);
 6     })
 7 }
 8
 9 const serialFn = async () => { //串行执行
10
11     console.time('serialFn')
12     console.log(await asyncAwaitFn('string 1'));
13     console.log(await asyncAwaitFn('string 2'));
14     console.timeEnd('serialFn')
15 }
16
17 serialFn();
ES7前端异步玩法:async/await理解  js原生API妙用(一)

ES7前端异步玩法:async/await理解  js原生API妙用(一)

可以看到两个await串行执行的总耗时为两千多毫秒。

并行:将多个promise直接发起请求(先执行async所在函数),然后再进行await操作。

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 async function asyncAwaitFn(str) {
 2     return await new Promise((resolve, reject) => {
 3         setTimeout(() => {
 4             resolve(str)
 5         }, 1000);
 6     })
 7 }
 8 const parallel = async () => { //并行执行
 9     console.time('parallel')
10     const parallelOne = asyncAwaitFn('string 1');
11     const parallelTwo = asyncAwaitFn('string 2')
12
13     //直接打印
14     console.log(await parallelOne)
15     console.log(await parallelTwo)
16
17     console.timeEnd('parallel')
18
19
20 }
21 parallel()
ES7前端异步玩法:async/await理解  js原生API妙用(一)

ES7前端异步玩法:async/await理解  js原生API妙用(一)

通过打印我们可以看到相对于串行执行,效率提升了一倍。在并行请求中先执行async的异步操作再await它的结果,把多个串行请求改为并行可以将代码执行得更快,效率更高。

async、await错误处理

JavaScript异步请求肯定会有请求失败的情况,上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。

在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 async function catchErr() {
 2       try {
 3           const errRes = await new Promise((resolve, reject) => {
 4                 setTimeout(() => {
 5                     reject("http error...");
 6                  }, 1000);
 7            );
 8                 //平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
 9                 // console.log(errRes.status, errRes.statusText);
10         } catch(err) {
11              console.log(err);
12         }
13 }
14 catchErr(); //http error...
ES7前端异步玩法:async/await理解  js原生API妙用(一)

以上就是async、await使用try catch 处理错误的方式。

虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。

以上就是个人对ES7 async、await的一些个人理解,后续有其他的会补充更新,写的不好的地方欢迎各位大神指正,谢谢!

js原生API妙用(一)

 

复制数组

我们都知道数组是引用类型数据。这里使用slice复制一个数组,原数组不受影响。

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 let list1 = [1, 2, 3, 4];
 2 let newList = list1.slice();
 3 list1.push(5); // [1,2,3,4,5]
 4 //newList [1,2,3,4] 不受影响
 5 console.log(newList); //[1,2,3,4]
 6 console.log(list1); //[1, 2, 3, 4, 5]
 7 let list2 = [5,6,7,8];
 8 let newList2 = list2.concat();
 9 newList2.push(9); //
10 console.log(newList2); //[5, 6, 7, 8, 9]
11 console.log(list2); //[1, 2, 3, 4, 5]
ES7前端异步玩法:async/await理解  js原生API妙用(一)

函数参数转数组

将函数参数转数组,利用arguments伪数组形式,再用slice拷贝为新数组。

1 function argsParam() {
2     //arguments伪数组形式,再用slice拷贝为新数组
3     return Array.prototype.slice.call(arguments);
4 }
5
6 console.log(argsParam(1,2,3,4)); //[1, 2, 3, 4]

重复n个字符

利用Array构造函数传参,再使用join函数分隔指定的字符串

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 /**
 2     @params
 3     num: 重复次数
 4     str: 重复字符串
 5 **/
 6 function repeatStr(num, str) {
 7     return new Array(num+1).join(str);
 8 }
 9
10 console.log(repeatStr(5, 's'));//sssss
ES7前端异步玩法:async/await理解  js原生API妙用(一)

创建 N x N 二维矩阵,并初始化数据

使用Array对象传入数组length参数,调用fill再用map循环fill替换对应的值返回一个新数组

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 /**
 2     @params
 3     num: 矩阵次数
 4     str: 矩阵数组中的值,由于fill函数替换所以值都是一致的
 5 **/
 6 function arrayMatrix(num, matrixStr) {
 7     return Array(num).fill(null).map(() => Array(num).fill(matrixStr));
 8 }
 9 //  ["a", "a", "a", "a"]  ["a", "a", "a", "a"] ["a", "a", "a", "a"] ["a", "a", "a", "a"]
10 console.log(arrayMatrix(4, 'a'));
ES7前端异步玩法:async/await理解  js原生API妙用(一)

类数组(NodeList)转数组(Array)

其实,前面几个例子也有。如slice,这里加多数组的from方法,ES6语法糖

ES7前端异步玩法:async/await理解  js原生API妙用(一)
1 //返回的不是真正的Array(你无法使用filter、map、reduce等方法)
2 const nodeList = document.querySelectorAll('div');
3 // 方法1: 使用Array.from
4 const arrayList1 = Array.from(nodeList);
5 // 方法2: 使用slice
6 const arrayList2 = Array.prototype.slice.call(nodeList);
7 // 方法3: 使用ES6语法糖
8 const arrayList3 = [...nodeList];
ES7前端异步玩法:async/await理解  js原生API妙用(一)

数组内记录重复次数

使用reduce函数,reduce函数接收4个参数:1.累计变量:默认数组的第一个值;2.当前变量:默认数组的第二个值;3.当前位置:重0开始;4.原数组

ES7前端异步玩法:async/await理解  js原生API妙用(一)
1 const arrs = [1, 1, 1, 2, 2, 3];
2 //得到{1: 3, 2: 2, 3: 1}
3 arrs.reduce((obj, item) => {
4     if(!obj[item]) {
5         obj[item] = 0;
6     }
7     obj[item]++;
8     return obj;
9 }, {}); 
ES7前端异步玩法:async/await理解  js原生API妙用(一)

数组去重

数组去重有很多种方式如传统的for循环等,这里例子使用最新的ES6 set不重复方式,并使用set的has、add等 API操作;注意set返回的也是一个不重复的类数组形式要使用Array.from方法转成数组形式

ES7前端异步玩法:async/await理解  js原生API妙用(一)
 1 /**
 2     @params
 3     arr: 需要去重的数组
 4 **/
 5 function uniqueArray(arr) {
 6     const setArr = new Set();
 7     return arr.filter(val => !setArr.has(val) && setArr.add(val));
 8 }
 9
10 console.log(uniqueArray([1,1,2,1,1,2,3,4,5,3,2,4]));    //[1, 2, 3, 4, 5]
ES7前端异步玩法:async/await理解  js原生API妙用(一)

参考:http://hectorguo.com/zh/magic-js/

ES7前端异步玩法:async/await理解 js原生API妙用(一)的更多相关文章

  1. ES7前端异步玩法:async/await理解

    在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...

  2. 异步Promise及Async/Await可能最完整入门攻略

    此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...

  3. ASP.NET 异步编程之Async await

    本文重点介绍的是.NET Framework4.5 推出的异步编程方案  async await 请先看个5分钟的微软演示的视频:视频地址: https://channel9.msdn.com/Blo ...

  4. 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏

    本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...

  5. 异步Promise及Async/Await最完整入门攻略

    一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...

  6. 异步编程(async&await)

    前言 本来这篇文章上个月就该发布了,但是因为忙 QuarkDoc 一直没有时间整理,所以耽搁到今天,现在回归正轨. C# 5.0 虽然只引入了2个新关键词:async和await.然而它大大简化了异步 ...

  7. 学习迭代器实现C#异步编程——仿async/await(一)

    .NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C ...

  8. 基于任务的异步编程&lpar;Task&comma;async&comma;await&rpar;

    这节讲一下比较高级的异步编程用法Task,以及两个异步关键字async和await. Task是在C#5.0推出的语法,它是基于任务的异步编程语法,是对Thread的升级,也提供了很多API,先看一下 ...

  9. 异步编程之Async&comma;Await和ConfigureAwait的关系

    在.NET Framework 4.5中,async / await关键字已添加到该版本中,简化多线程操作,以使异步编程更易于使用.为了最大化利用资源而不挂起UI,你应该尽可能地尝试使用异步编程.虽然 ...

随机推荐

  1. SSAS更改默认端口号,使用非默认端口号的时候Olap连接字符串的格式

    Sql server的Analysis Service服务默认使用的是2382或2383端口,但是实际上我们可以通过配置文件手动更改SSAS使用其它端口号. 修改SSAS使用端口号的方法如下,找到你的 ...

  2. CSS Flex弹性布局

    关于css3的flex布局,阮一峰老师的文章写的清晰易懂又全面,这里附上链接http://www.ruanyifeng.com/blog/2015/07/flex-grammar.html?utm_s ...

  3. &lbrack;改善Java代码&rsqb;使用匿名类的构造函数

    建议39: 使用匿名类的构造函数 阅读如下代码,看看是否可以编译: public class Client { public static void main(String[] args) { Lis ...

  4. mysql 打包表在phpmyadmin提示正在使用中&period;&period;

    一,利用phpmyadmin修改表功能,REPAIR TABLE `你的表名` 或直接在数据库管理界面,选中表如下图 二,如果利用修改功能失败了我们还可以尝试在替换本地mysql数据库时,我们先停止m ...

  5. Android手机上判断网络运营商

    我们想获取手机的运营商信息.通常都会去调用系统的TelephonyManager类的取数据.但是很多时候可能取不到卡的信息(例如双卡手机和 一些特殊卡),这样就区别不了运营商了.但是有时候我们的需求要 ...

  6. Java内存模型-jsr133规范介绍

    原文地址:http://www.cnblogs.com/aigongsi/archive/2012/04/26/2470296.html; 近期在看<深入理解Java虚拟机:JVM高级特性与最佳 ...

  7. 通过jstack与jmap分析一次cpu打满的线上故障

    一.发现问题 下面是线上机器的cpu使用率,可以看到从4月8日开始,随着时间cpu使用率在逐步增高,最终使用率达到100%导致线上服务不可用,后面重启了机器后恢复. 二.排查思路 简单分析下可能出问题 ...

  8. 安装部署Ceph Calamari

    根据http://ovirt-china.org/mediawiki/index.php/%E5%AE%89%E8%A3%85%E9%83%A8%E7%BD%B2Ceph_Calamari 原文如下: ...

  9. 20145333茹翔《网络对抗》Exp9 Web安全基础实践

    20145333茹翔<网络对抗>Exp9 Web安全基础实践 基础问题回答 1.SQL注入原理,如何防御 SQL注入 就是通过把SQL命令插入到"Web表单递交"或&q ...

  10. C&num; WinForm 父窗体 子窗体 传值

    C# WinForm 父窗体 子窗体 传值 本次示例效果如下:Form1为父窗体(包含textBox1.button1)Form2为子窗体(包含textBox2.button2) 父窗体给子窗体传值= ...