视频讲解
在js中右两种实现异步操作的方式:
一、回调函数
比如使用setTimeout()让一个传入的回调函数在指定时间后才执行
setTimeout(() => {
console.log("哈喽");
},3000);
这种方法虽然简单易懂,但是当需要一次执行多个异步操作时,程序就会一层一层的嵌套执行(所谓的回调地狱),所以就出现了promise函数
二、Promise链式调用
优点:它可以用一种链式结构将多个异步操作串联起来,避免了链式的层层嵌套
fetch:
是JS中使用Promise的API, 它用来发起一个请求 来获取服务器数据,可用他动态更新页面的内容,也就是所谓的AJAX技术
- 使用fetch()方法发起一个请求 来获取服务器数据 然后调用它的then方法,并传递一个回调函数
- 这个请求成功完成,那么回调函数就会被调起,请求的结果也会以参数的形式传递进来
- 它可以用一种链式结构将多个异步操作串联起来,比如这里的response.json()方法也会返回一个promise
它代表在某个时刻会将数据转换成json格式
- 如果想等到这个方法执行之后在执行其他操作,可在后面追加一个then,执行接下来的代码
在使用异步操作的时候也可能会遇到错误(如:网络问题或者数据格式不正确。。。),所以我们就需要捕获这些错误了( catch()方法) - 在链式结构的末尾附加一个catch()方法
如果在此之前的任意一个步骤发生错误,将会被catch触发,之后的then就不会被继续执行
- 在调用结束后执行finally()方法,无论执行失败与否,都可以在finally()处进行清理工作,比如清理之前的动画
三、新标准的关键字: async 和 await
是基于Promise之上的两个语法糖,让异步操作更加简单明了
- 先使用 async关键字将函数标记为异步操作(返回值为Promise对象的函数)
- 在异步函数中可以调用其他的异步函数
可直接使用await()方法,而不是then方式
此处await()会等到异步函数Promise(此处指的是fetch函数)调用完成之后直接返回最终结果
所以这里的response已经是服务器返回的响应数据了
使用await时需要注意的地方:
当分贝区await这两个异步操作时,为了执行效率更加高效,可以将所有的异步函数用Promise.all组合起来,然后再进行await