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/
浙公网安备 33010602011771号