当我还在使用promise来发送异步请求的时候，部门前端大佬已经改用async/ await了，代码很简洁，同时async/await 已经被标准化，是时候学习一下了~
一、async函数介绍
async 是 ES7 才有的与异步操作有关的关键字，和 Promise，Generator 有很大关联的。
【1】特点：
1、建立在 promise 之上。所以，不能把它和回调函数搭配使用。但它会声明一个异步函数，并隐式地返回一个Promise。因此可以直接return变量，无需使用 Promise.resolve 进行转换。
2、和 promise 一样，是非阻塞的。但不用写 then 及其回调函数，这减少代码行数，也避免了代码嵌套。而且，所有异步调用，可以写在同一个代码块中，无需定义多余的中间变量。
3、它的最大价值在于，可以使异步代码，在形式上，更接近于同步代码。
4、它总是与 await 一起使用的。并且await 只能在 async 函数体内。
5、await 是个运算符，用于组成表达式，它会阻塞后面的代码。如果等到的是 Promise 对象，则得到其 resolve 值。否则，会得到一个表达式的运算结果。
【2】用法：
先说一下async的用法，它作为一个关键字放到函数前面，用于表示函数是一个异步函数，因为async就是异步的意思， 异步函数也就意味着该函数的执行不会阻塞后面代码的执行。 下面我们就来写一个async 函数
async function test() {
return 'Hello World';
}
console.log(test())
语法很简单，就是在函数前面加上async 关键字，来表示它是异步的，那怎么调用呢？async 函数也是函数，平时我们怎么使用函数就怎么使用它，直接加括号调用就可以了
查看控制台打印结果
原来async 函数返回的是一个promise 对象，如果要获取到promise 返回值，我们应该用then 方法， 继续修改代码
async function test() {
return 'Hello World';
}
test().then(res=>{
console.log(res) // Hello World
})
console.log('我在后面，但是我先执行')
上面代码中通过then()方法获取到promise的返回值，假设promise内部抛出异常，我们同样可以通过catch()方法来捕获异常。
我们获取到了"Hello World', 同时test()异步函数的执行也没有阻塞后面代码的执行，"我在后面，但是我先执行"，这条语句会先执行
看到这，小伙伴们可能要纳闷了，就是封装一个Promise的对象返回而已，要这有个鬼用啊。别急，接下来有请async黄金搭档 await关键字闪亮登场。
二、await关键字
await是等待的意思，那么它等待什么呢，它后面跟着什么呢？
正常情况下，await 命令后面是一个 Promise 对象，它也可以跟其他值，如字符串，布尔值，数值以及普通函数。await表达式会使async函数暂停执行，等待promise的结果出来，然后恢复async的执行并返回解析值（resolved）
注意，await 关键字仅仅在async 函数中才有效，如果在async函数外使用await，则会抛出一个语法错误(SyntaxError)
function testAwait() {
return new Promise((resolve) => {
setTimeout(function () {
console.log("Test Await");
resolve();
}, 1000);
});
}
async function test() {
await testAwait();
console.log("Hello World");
}
test();
// Test Await
// Hello World
我们来分析下上面这段代码
现在我们看看代码的执行过程，调用test函数，它里面遇到了await, await 表示等一下，代码就暂停到这里，不再向下执行了，它等什么呢？等后面的testAwait函数中的promise对象执行完毕，然后拿到promise resolve 的值并进行返回，返回值拿到之后，它继续向下执行。执行console.log语句。
注意：await 命令后面的 Promise 对象，运行结果不一定都是resolve，也可能是 rejected。当promise返回结果为rejected状态时，会终止后面的代码执行。所以最好把 await 命令放在 try...catch 代码块中。异常被try...catch捕获后，继续执行下面的代码，不会导致中断
function testAwait() {
return new Promise((resolve) => {
setTimeout(function () {
console.log("Test Await");
resolve();
}, 1000);
});
}
async function test() {
try {
await testAwait();
} catch (err) {
console.log(err)
}
console.log("Hello World");
}
test();
文章每周持续更新，可以微信搜索「 前端大集锦 」第一时间阅读，回复【视频】【书籍】领取200G视频资料和30本PDF书籍资料
网友评论