async函数，也就是我们常说的async/await，是在ES8中引入的新特性，主要目的是为了简化使用基于Promise的API时所需的语法。async和await关键字让使用 Promises变得容易，而无需刻意地链式调用Promise。并且与嵌套的.then相比，代码可读性更好。下面就来介绍一下它的具体使用以及规则。
一、async函数
1. 用法
在函数声明的前面加上async关键字，就变成了 async 函数。
async function f() {
return 'hello world';
}
2. 返回值
async 函数的返回值是一个 Promise 实例，Promise 实例的结果由 async 函数的返回值决定：
如果返回的是一个 Promise 实例，最终得到的 Promise 对象的状态与值与返回的 Promise 实例保持一致。
如果返回的是一个非 Promise 实例的值，async 函数返回的一个状态为 resolved 的 Promise 实例，value 是函数内返回的值。
如果没有返回值，async 函数返回一个状态为resolved 的 Promise 实例，value 是undefined。
如果抛出错误，async 函数返回一个状态为 rejected 的 Promise 实例，reason 是抛出的错误。
二、await表达式
async function main(){
let result = await Promise.resolve('hello world');
console.log(result); // hello world
};
main();
async function f(){
let result = await 998;
console.log(result); // 998
}
f();
async function foo(){
let result = await {
then(resolve, reject){
setTimeout(() => {
resolve('success')
}, 2000);
}
};
console.log(result); // success
}
foo();
1. 规则
await 表达式必须写在 async 函数的里面。但async函数中可以没有 await，不过一般二者是一起使用的。
await 表达式可以取到 Promise 实例的结果（就是状态发生改变后传到回调函数的值）。当然，必须等到 Promise 实例的状态发生变化，await 表达式才能取到值。
2. 关于 await 的右侧的表达式
一般为 Promise 实例，await 表达式的值就是该 Promise 实例的结果。
如果是个其他类型的值（非 Promise 类型），await 表达式的值就是这个值。
后面是一个 thenable 对象（即定义then方法的对象），那么会将其等同于 Promise 对象。（介绍 Promise.resolve() 方法的时候介绍过 thenable 对象）。
3. 注意
如果 await 右侧是个状态为失败的 Promise 实例，会抛出异常。我们建议将 await 表达式放在try...catch结构里面。
async function f() {
try {
await Promise.reject('出错了');
} catch(e) {
}
return await Promise.resolve('hello world');
三、案例
使用async/await有诸多好处，这里例举一个前端最常用的东西（ajax发送请求）来直观的感受一下使用async/await带来的便捷之处。
1. 传统的Ajax请求
//创建异步对象
var xhr = new XMLHttpRequest();
//设置请求的url参数,参数一是请求的类型,参数二是请求的url,可以带参数,动态的传递参数starName到服务端
xhr.open('GET','http://www.atguigu.com');
//注册事件 onreadystatechange 状态改变就会调用
xhr.onreadystatechange = function () {
//如果能够进到这个判断 说明 数据 完美的回来了,并且请求的页面是存在的
if (xhr.readyState == 4 && xhr.status == 200) {
console.log(ajax.responseText); //输出相应的内容
}
}
//发送请求
ajax.send();
2. 用promise封装Ajax
使用promise可以更方便管理异步请求。promise可以用在单个或多个ajax请求，在多个请求当中可以指定请求的顺序。话不多说，上代码：
function sendAjax(url) {
let xhr = new XMLHttpRequest()
return new Promise(function (resolve, reject) {
xhr.open('GET', url)
xhr.onreadystatechange = function () {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
resolve(xhr.responseText) // 成功执行 resolve
} else {
reject() // 失败执行 reject
}
}
}
xhr.send()
})
}
let p1 = sendAjax('http://www.atguigu.com')
p1.then(function (data) {
console.log('成功了')
console.log(data)
}, function () {
console.log('失败了')
})
let p2 = sendAjax('http://www.atguigu.com')
p2.then(function (data) {
console.log('成功了')
console.log(data)
}, function () {
console.log('失败了')
})
3. async/await
使用async/await可以处理promise链式调用过长问题，async/await可以让我们同步书写请求嵌套，看起来更舒服：
// 假设有这么一个情况：
// 现有一个A请求，然后B请求依赖A请求返回的数据，C请求依赖B请求返回的数据...
// 如果是promise写
post('A', data)
.then(res1 => post('B', res1))
.then(res2 => post('C', res2))
.then(res3 => post('D', res3))
.then(res4 => post('E', res4))
...
// 换成async/await写
async handler() {
let a = await post('A', data)
let b = await post('B', a)
let c = await post('C', b)
let d = await post('D', c)
...
}
总结
async/await 可以直接拿到 Promise 的结果，可以代替 then() 方法和回调函数。可以取代链式调用，是回调地狱的终极解决方案。缺点是状态为 rejected 的 Promise 实例，会抛出异常，所以需要写在 try...catch结构中防止出错。