这是我参与「第四届青训营 」笔记创作活动的第4天
JavaScript是一种单线程的编程语言也就是读一句运行一句的模式,在JS中有两种实现异步的方式
1.使用回调函数
例如使用setTimeout()让一个函数在指定的时间后执行,在编译到这个函数是会立刻返回,然后接着继续运行后面的代码等到时间到后在运行里面的回调函数。
使用回调函数虽然简单好理解,但当我们有多个异步函数要执行时我们就要使用多个定时器这样就使得代码十分的繁琐,之前在做项目时我要得到echarts图像的数据时需要异步操作就导致写了许多个回调函数来嵌套获得数据可读性十分的差。
2.使用Promise
我们可以通过promise函数的多个then来顺序的执行每个异步方法,then会等前一个then完成后在执行,这样就不会陷入回调地狱,也提高了代码的可读性。promise中的catch当一个then发生错误时将会触发并且之后的then将不会触发。整个promise结束后会进入finally
async和await
在以前我只知道前两个来实现异步操作在接触Async和await语法糖后也不需要之前一直.then这样繁琐的编写代码了。他们是基于Promise上的语法使得异步操作更加简单。
首先我们在函数前添加一个async使之成为一个异步函数(异步函数返回值是一个Promise),在异步函数中我们可以调用其他异步函数而我们只要在这个异步函数前加一个await就可以得到这个异步函数最后的结果。如下我们不需要使用then也可以实现异步操作得到正确结果。await会等待异步函数的结果,await不会使程序进入等待同时js会执行其他一些操作,因为await是基于promise和事件循环机制
async function f(){
let response =await fetch('http://baidu.com')
}
在使用这两个语法糖的同时要注意避免像下面这样的操作,表面看上去没问题,但这样会打破两个语句的并行,语句2会等待语句1的执行完后在执行
async function f(){
let response =await fetch('http://baidu.com')
let response1 =await fetch('http://taobao.com')
}
要解决上面的问题我们可以使用Promise.all将两个操作包含进去这样效率将提升一倍
async function f(){
let response =await fetch('http://baidu.com')
let response1 =await fetch('http://taobao.com')
let [a,b] = await Promise.all([response,response1])
}
并且我们在异步函数里面也不能使用forEach或map这些方法来实现异步即使在forEach里面回调函数写了await也没有用,forEach会立即返回。
要在循环里面等待异步函数执行完我们可以使用传统的for循环也可以使用for await的语法
如有什么错误还请纠正