es6之async和await

之所以去写一篇关于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，则会重复执行该步骤直到结束。

亲爱的读者和支持者们，自动博客加入了打赏功能，陆陆续续收到了各位老铁的打赏。在此，我想由衷地感谢每一位对我们博客的支持和打赏。你们的慷慨与支持，是我们前行的动力与源泉。

日期	姓名	金额
2023-09-06	*源	19
2023-09-11	*朝科	88
2023-09-21	*号	5
2023-09-16	*真	60
2023-10-26	*通	9.9
2023-11-04	*慎	0.66
2023-11-24	*恩	0.01
2023-12-30	I*B	1
2024-01-28	*兴	20
2024-02-01	QYing	20
2024-02-11	*督	6
2024-02-18	一*x	1
2024-02-20	c*l	18.88
2024-01-01	*I	5
2024-04-08	*程	150
2024-04-18	*超	20
2024-04-26	.*V	30
2024-05-08	D*W	5
2024-05-29	*辉	20
2024-05-30	*雄	10
2024-06-08	*:	10
2024-06-23	小狮子	666
2024-06-28	*s	6.66
2024-06-29	*炼	1
2024-06-30	*!	1
2024-07-08	*方	20
2024-07-18	A*1	6.66
2024-07-31	*北	12
2024-08-13	*基	1
2024-08-23	n*s	2
2024-09-02	*源	50
2024-09-04	*J	2
2024-09-06	*强	8.8
2024-09-09	*波	1
2024-09-10	*口	1
2024-09-10	*波	1
2024-09-12	*波	10
2024-09-18	*明	1.68
2024-09-26	B*h	10
2024-09-30	岁	10
2024-10-02	M*i	1
2024-10-14	*朋	10
2024-10-22	*海	10
2024-10-23	*南	10
2024-10-26	*节	6.66
2024-10-27	*o	5
2024-10-28	W*F	6.66
2024-10-29	R*n	6.66
2024-11-02	*球	6
2024-11-021	*鑫	6.66
2024-11-25	*沙	5
2024-11-29	C*n	2.88