之所以去写一篇关于await和async相关的文章，主要是我经常忘记如何将它们和Promise一起搭配使用，为此单独记录一下它们的用法。
一、从字面上去理解await和async
1.1、什么是await和async
await在字面上是等待的意思，而async在字面上是异步、非同步的意思。如果你不清楚同步、异步的区别，那么我认为你有必要先去了解一下。官方给我们的使用语法是这样的：
async function(){
[返回值] = await 表达式;
...
}
如果你是首次接触await和async，看到这里，你可能会问为啥async和await是一起使用的，为什么会出现await和async，它们是用来解决什么问题的呢。我们还是从字面上去解释整个代码：
1、async操作符后面接了一个function，这说明什么，说明整个函数是异步执行的；
2、函数内部await操作符后面又接了一个表达式，这个表达式一般是一个异步操作，如果不是，则返回值本身。在实际开发中使用最多的是一个Promise对象，使用await之后这好像又是在告诉我们Promise是同步执行的，实际上的确是这样，await表达式会暂停当前async function的执行，等待Promise处理完成，如果Promise正常处理(fulfilled)，其回调的resolve函数参数作为await表达式的值，继续执行async function；如果Promise处理异常(rejected)，await表达式会将Promise的异常原因抛出。
1.2、为什么使用await和async
在前端页面开发中，我们经常会去请求后端接口，比如我们想获取当前登录用户的订单列表，而我们整个步骤又细分为两次ajax请求：
1、获取当前登录用户的id；
2、如果获取到用户id后，根据用户id获取用户的订单列表；
这里就涉及到一个问题，第二次请求是依赖于用户id的，也就是说我们必须拿到用户id，才能发起第二次请求，因为获取当前登录用户id和获取订单列表的操作必须是同步执行的。如果没有await和async语法的话，我们需要使用Promise的链式调用去解决整个问题：
//直接返回Promise
function getUserId(){
return new Promise((resolve,reject)=>{
userService.getUserId().then(res => {
resolve(res.data);
}).catch((err) => {
reject(err);
});
})
}
function getOrderList(userId){
return new Promise((resolve,reject)=>{
userService.getOrderList({
params: {
userId: userId,
}
}).then(res => {
resolve(res);
}).catch((err) => {
reject(err);
});
})
}
//执行
getUserId().then(getOrderList);
reslove方法的参数就是要传给回调函数的参数，即resolve将运行得到的结果传出来，而then接受该参数给回调继续执行后面的，如果这个then的中的函数还会返回Promise，则会重复执行该步骤直到结束。
这里首先会去执行userService.getUserId()请求，如果请求成功，则会通过resolver将运行得到的用户id传出来，而then接受getOrderList函数，参数是userId，返回一个Promise，则会继续执行userService.getOrderList()请求。
上面这段代码使用了Promise的链式调用，理解起来也比较困难。而使用await和async就会简单很多：
function getUserId(){
return new Promise((resolve,reject)=>{
userService.getUserId().then(res => {
resolve(res.data);
}).catch((err) => {
reject(err);
});
})
}
function getOrderList(userId){
return new Promise((resolve,reject)=>{
userService.getOrderList({
params: {
userId: userId,
}
}).then(res => {
resolve(res);
}).catch((err) => {
reject(err);
});
})
}
async function f1(){
let userId = await getUserId();
getOrderList(userId);
}
f1();
参考文章：