在最新的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。
来看一段简单的代码：
async function testSync() {
const response = await new Promise(resolve => {
setTimeout(() => {
resolve("async await test...");
}, 1000);
});
console.log(response);
}
testSync();//async await test...
就这样一个简单的async、await异步就完成了。使用async、await完成异步操作代码可读与写法上更像是同步的，也更容易让人理解。
async、await串行并行处理
串行：等待前面一个await执行后接着执行下一个await，以此类推
async function asyncAwaitFn(str) {
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str)
}, 1000);
})
}
const serialFn = async () => { //串行执行
console.time('serialFn')
console.log(await asyncAwaitFn('string 1'));
console.log(await asyncAwaitFn('string 2'));
console.timeEnd('serialFn')
}
serialFn();
可以看到两个await串行执行的总耗时为两千多毫秒。
并行：将多个promise直接发起请求（先执行async所在函数），然后再进行await操作。
async function asyncAwaitFn(str) {
return await new Promise((resolve, reject) => {
setTimeout(() => {
resolve(str)
}, 1000);
})
}
const parallel = async () => { //并行执行
console.time('parallel')
const parallelOne = asyncAwaitFn('string 1');
const parallelTwo = asyncAwaitFn('string 2')
//直接打印
console.log(await parallelOne)
console.log(await parallelTwo)
console.timeEnd('parallel')
}
parallel()
通过打印我们可以看到相对于串行执行，效率提升了一倍。在并行请求中先执行async的异步操作再await它的结果，把多个串行请求改为并行可以将代码执行得更快，效率更高。
async、await错误处理
JavaScript异步请求肯定会有请求失败的情况，上面也说到了async返回的是一个Promise对象。既然是返回一个Promise对象的话那处理当异步请求发生错误的时候我们就要处理reject的状态了。
在Promise中当请求reject的时候我们可以使用catch。为了保持代码的健壮性使用async、await的时候我们使用try catch来处理错误。
async function catchErr() {
try {
const errRes = await new Promise((resolve, reject) => {
setTimeout(() => {
reject("http error...");
}, 1000);
);
//平常我们也可以在await请求成功后通过判断当前status是不是200来判断请求是否成功
// console.log(errRes.status, errRes.statusText);
} catch(err) {
console.log(err);
}
}
catchErr(); //http error...
以上就是async、await使用try catch 处理错误的方式。
虽然async、await也使用到了Promise但是却减少了Promise的then处理使得整个异步请求代码清爽了许多。
以上就是个人对ES7 async、await的一些个人理解，后续有其他的会补充更新，写的不好的地方欢迎各位大神指正，谢谢！
原文链接:https://www.cnblogs.com/leungUwah/p/7932912.html
-----------------------------------------------------------------------------------------------------------------------------------------------------------------------
拓展:
console.time和console.timeEnd用法
console.time和console.timeEnd这两个方法可以用来让WEB开发人员测量一个javascript脚本程序执行消耗的时间。随着WEB应用越来越重要，JavaScript的执行性能也日益受到重视，WEB开发人员知道一些性能测试机器是必须的。今天要介绍的console.time和console.timeEnd就是其中之一。
console.time方法是开始计算时间，console.timeEnd是停止计时，输出脚本执行的时间。
// 启动计时器
console.time('testForEach');
// (写一些测试用代码)
// 停止计时，输出时间
console.timeEnd('testForEach');
// 4522.303ms
这两个方法中都可以传人一个参数，作为计时器的名称，它的作用是在代码并行运行时分清楚各个计时器。对console.timeEnd的调用会立即输出执行总共消耗的时间，单位是毫秒。
注：console.time(“循环开始时间”)传的参数与console.timeEnd(“循环开始时间”)的参数必须一致，否则输出是不会计时的，计时为0ms，如果默认不传参数：default:08080ms
测试JavaScript性能的方法有很多，但console.time/timeEnd两个方法是最基本、最直接的技巧。
解决IE8不支持console
解决IE8不支持console,代码中包含console时会报错
//解决 IE8 不支持console
window.console = window.console || (function () {
var c = {}; c.log = c.warn = c.debug = c.info = c.error = c.time = c.dir = c.profile
= c.clear = c.exception = c.trace = c.assert = function () { };
return c;
})();
原文链接:https://blog.csdn.net/longzhoufeng/article/details/78801042