ES7前端异步玩法:async/await理解 js原生API妙用(一)
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。
来看一段简单的代码:

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...

就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的,也更容易让人理解。
async、await串行并行处理
串行:等待前面一个await执行后接着执行下一个await,以此类推

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();

可以看到两个await串行执行的总耗时为两千多毫秒。
并行:将多个promise直接发起请求(先执行async所在函数),然后再进行await操作。

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()

通过打印我们可以看到相对于串行执行,效率提升了一倍。在并行请求中先执行async的异步操作再await它的结果,把多个串行请求改为并行可以将代码执行得更快,效率更高。
async、await错误处理
JavaScript异步请求肯定会有请求失败的情况,上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。
在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。

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...

以上就是async、await使用try catch 处理错误的方式。
虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。
以上就是个人对ES7 async、await的一些个人理解,后续有其他的会补充更新,写的不好的地方欢迎各位大神指正,谢谢!
js原生API妙用(一)
复制数组
我们都知道数组是引用类型数据。这里使用slice复制一个数组,原数组不受影响。

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]

函数参数转数组
将函数参数转数组,利用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函数分隔指定的字符串

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

创建 N x N 二维矩阵,并初始化数据
使用Array对象传入数组length参数,调用fill再用map循环fill替换对应的值返回一个新数组

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'));

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

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];

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

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 }, {});

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

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]

参考:http://hectorguo.com/zh/magic-js/
ES7前端异步玩法:async/await理解 js原生API妙用(一)的更多相关文章
- ES7前端异步玩法:async/await理解
在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...
- ES7中前端异步特性:async、await。
在最新的ES7(ES2017)中提出的前端异步特性:async.await. 什么是async.await? async顾名思义是"异步"的意思,async用于声明一个函数是异步的 ...
- 异步Promise及Async/Await可能最完整入门攻略
此文只介绍Async/Await与Promise基础知识与实际用到注意的问题,将通过很多代码实例进行说明,两个实例代码是setDelay和setDelaySecond. tips:本文系原创转自我的博 ...
- ASP.NET 异步编程之Async await
本文重点介绍的是.NET Framework4.5 推出的异步编程方案 async await 请先看个5分钟的微软演示的视频:视频地址: https://channel9.msdn.com/Blo ...
- C# 同步 异步 回调 状态机 async await Demo
源码 https://gitee.com/s0611163/AsyncAwaitDemo 为什么会研究这个? 我们项目的客户端和服务端通信用的是WCF,我就想,能不能用异步的方式调用WCF服务呢?或者 ...
- 原生JS实战:写了个一边玩游戏,一边记JS的API的游戏
本文是苏福的原创文章,转载请注明出处:苏福CNblog:http://www.cnblogs.com/susufufu/p/5878913.html 本程序[一边玩游戏,一边记JS的API]是本人的个 ...
- 异步Promise及Async/Await最完整入门攻略
一.为什么有Async/Await? 我们都知道已经有了Promise的解决方案了,为什么还要ES7提出新的Async/Await标准呢? 答案其实也显而易见:Promise虽然跳出了异步嵌套的怪圈, ...
- 异步编程(async&await)
前言 本来这篇文章上个月就该发布了,但是因为忙 QuarkDoc 一直没有时间整理,所以耽搁到今天,现在回归正轨. C# 5.0 虽然只引入了2个新关键词:async和await.然而它大大简化了异步 ...
- 学习迭代器实现C#异步编程——仿async/await(一)
.NET 4.5的async/await真是个神奇的东西,巧妙异常以致我不禁对其实现充满好奇,但一直难以窥探其门径.不意间读了此篇强文<Asynchronous Programming in C ...
随机推荐
- 错误处理: Python值传递和引用传递的问题
1.插入数据库的时候报错110, 提示columns数量少于插入的值内容. 2.核对了下栏目并没有少,打印出插入的值,看看值是不是多了. 查看了下,确实第二次值的时候长度边长了,第二次把第一次的部分值 ...
- DS博客作业06--图
1.本周学习总结 1.1.思维导图 1.2.谈谈你对图结构的认识及学习体会 本章学习了图结构的相关知识,图形结构属于复杂的非线性数据结构,在实际应用中很多问题可以用图来描述.在图结构中,每个元素可以有 ...
- iOS AFNetWorking中block执行完后再执行其它操作
需求:同时进行两次网络请求,网络请求是异步的,在网络请求成功后进行其它的操作.两个网络请求是这样,一个网络请求中block执行完之后,再进行其它操作,也是一样的原理,只是这时候不需要线程组了,只需要信 ...
- matlab 中的删除文件
Matlab中有两种删除文件的方式: 一种是删除文件 delete()函数 //可以使用help delete命令查询delete()函数的使用方法 delete('p1.jpg' ...
- django获取前端有multiple属性的select的多选项
author_list = request.POST.getlist('author_list') ###
- poj 2724 Purifying Machine
Purifying Machine Time Limit: 2000MS Memory Limit: 65536K Total Submissions: 5408 Accepted: 1575 ...
- ajax cache enable and ajax concurrency!
Today, forget to close ajax cache which leads to duplicate result from cache as to Jquery, this way, ...
- 标准C程序设计七---64
Linux应用 编程深入 语言编程 标准C程序设计七---经典C11程序设计 以下内容为阅读: <标准C程序设计>(第7版) 作者 ...
- window10下用ZIP压缩包安装 mysql 8.0.11
1.下载地址 https://dev.mysql.com/downloads/mysql/ 2.解压后的文件目录如图,复制到指定的文件目录,如我的 E:\root\mysql-8.0.11-winx6 ...
- 小程序-支持的最小像素px
经过我手机多次测试,支持的最小px为: 8px;