搞懂Promise async await 之间的联系

视频讲解
在js中右两种实现异步操作的方式：

一、回调函数
比如使用setTimeout()让一个传入的回调函数在指定时间后才执行

setTimeout(() => {
    
	console.log("哈喽");
},3000);

这种方法虽然简单易懂，但是当需要一次执行多个异步操作时，程序就会一层一层的嵌套执行（所谓的回调地狱），所以就出现了promise函数
二、Promise链式调用
优点：它可以用一种链式结构将多个异步操作串联起来，避免了链式的层层嵌套
fetch: 是JS中使用Promise的API， 它用来发起一个请求 来获取服务器数据，可用他动态更新页面的内容，也就是所谓的AJAX技术

1. 使用fetch()方法发起一个请求 来获取服务器数据 然后调用它的then方法，并传递一个回调函数
   
2. 这个请求成功完成，那么回调函数就会被调起，请求的结果也会以参数的形式传递进来
   
3. 它可以用一种链式结构将多个异步操作串联起来，比如这里的response.json()方法也会返回一个promise
   它代表在某个时刻会将数据转换成json格式
   
4. 如果想等到这个方法执行之后在执行其他操作，可在后面追加一个then，执行接下来的代码
   
   在使用异步操作的时候也可能会遇到错误（如：网络问题或者数据格式不正确。。。），所以我们就需要捕获这些错误了（ catch()方法）
5. 在链式结构的末尾附加一个catch()方法
   如果在此之前的任意一个步骤发生错误，将会被catch触发，之后的then就不会被继续执行
   
6. 在调用结束后执行finally()方法，无论执行失败与否，都可以在finally()处进行清理工作，比如清理之前的动画

三、新标准的关键字： async 和 await

是基于Promise之上的两个语法糖，让异步操作更加简单明了

1. 先使用 async关键字将函数标记为异步操作（返回值为Promise对象的函数）
   
2. 在异步函数中可以调用其他的异步函数
   可直接使用await()方法，而不是then方式
   此处await()会等到异步函数Promise(此处指的是fetch函数)调用完成之后直接返回最终结果
   
   所以这里的response已经是服务器返回的响应数据了
   

使用await时需要注意的地方：
当分贝区await这两个异步操作时，为了执行效率更加高效，可以将所有的异步函数用Promise.all组合起来，然后再进行await