JS面试(2)
五、异步编程
1、Event Loop(JS执行机制)
1.1、JS是单线程,也就是说,同一时间只能做一件事。
a、同步(按顺序来)
同步任务:同步任务都在主流程上执行,形成一个执行栈。(宏任务)
b、异步(同时进行)
异步任务:JS的异步是通过回调函数实现的。异步任务相关回调函数添加到任务队列中(任务队列也称消息队列)。一般而言,异步任务有三种类型:
普通事件,如click、resize等
资源加载,如load、error等
定时器,包括setTimeout、setInterval等。
1.2、JS执行机制--Event Loop
先执行执行栈中的同步任务;
异步任务(回调函数)放入任务队列中;
一旦执行栈中的所有同步任务执行完毕,系统会按次序取任务队列中的异步任务,于是被读取的异步任务结束等待状态,进入执行栈,开始执行。
2、什么是回调函数?回调函数有什么缺点?如何解决回调地狱问题?
2.1、回调函数概念
回调函数是一个作为变量传递给另一个函数的函数,它在主体函数执行完之后再执行
2.2、回调函数特点
你定义的
你没有调用
但是最终执行了
2.3、缺点
回调函数有一个致命的弱点,就是容易写出回调地狱(Callback hell)
嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身
嵌套函数一多,就很难处理错误
不能使用 try catch 捕获错误
不能直接 return
2.4、常见的回调函数
DOM事件回调函数
定时器回调函数
ajax请求回调函数
生命周期回调函数
2.5、如何解决回调函数
promise
async/await
generator
3、异步编程的实现方式?
3.1、回调函数的方式
使用回调函数的方式有一个缺点是,多个回调函数嵌套的时候会造成回调函数地狱,上下两层的回调函数间的代码耦合度太高,不利于代码的可维护
3.2、Promise的方式
使用 Promise 的方式可以将嵌套的回调函数作为链式调用。但是使用这种方法,有时会造成多个 then 的链式调用,可能会造成代码的语义不够明确
3.3、generator的方式
它可以在函数的执行过程中,将函数的执行权转移出去,在函数外部还可以将执行权转移回来。当遇到异步函数执行的时候,将函数执行权转移出去,当异步函数执行完毕时再将执行权给转移回来。因此在 generator 内部对于异步操作的方式,可以以同步的顺序来书写。使用这种方式需要考虑的问题是何时将函数的控制权转移回来,因此需要有一个自动执行 generator 的机制,比如说 co 模块等方式来实现 generator 的自动执行
3.4、async函数的方式
async 函数是 generator 和 promise 实现的一个自动执行的语法糖,它内部自带执行器,当函数内部执行到一个 await 语句的时候,如果语句返回一个 promise 对象,那么函数将会等待 promise 对象的状态变为 resolve 后再继续向下执行。因此可以将异步逻辑,转化为同步的顺序来书写,并且这个函数可以自动执行
4、Promise
4.1、在构造 Promise 的时候,构造函数内部的代码是立即执行的
Promise本身是同步的立即执行函数,当在executor中执行resolve()或者reject()的时候, 此时是异步操作,也就是说promise中函数体内部的非异步操作正常顺序执行,resolve()和reject()异步操作为promise实例对象的返回结果,这个返回结果后面的then或者catch需要用,所以then和catch要放到异步任务中等待所有同步任务执行完毕之后再按顺序(或者如果有定时器,需要遵循定时器的时间)执行。
4.2、Promise是异步编程的一种解决方案,
它是一个对象,可以获取异步操作的消息,他的出现大大改善了异步编程的困境,避免了地狱回调,它比传统的解决方案回调函数和事件更合理和更强大。所谓Promise,简单说就是一个容器,里面保存着某个未来才会结束的事件(通常是一个异步操作)的结果。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理
4.3、Promise解决了什么问题/为什么需要promise
在工作中经常会碰到这样一个需求,比如我使用ajax发一个A请求后,成功后拿到数据,需要把数据传给B请求;那么需要如下编写代码
上面的代码有如下缺点:
● 后一个请求需要依赖于前一个请求成功后,将数据往下传递,会导致多个ajax请求嵌套的情况,代码不够直观。
● 如果前后两个请求不需要传递参数的情况下,那么后一个请求也需要前一个请求成功后再执行下一步操作,这种情况下,那么也需要如上编写代码,导致代码不够直观。
promise:解决了地狱回调的问题
4.4、Promise的实例有三个状态
Pending(进行中)
Resolved(已完成)
Rejected(已拒绝)
4.5、Promise的实例有两个过程
pending -> fulfilled : Resolved(已完成)
pending -> rejected:Rejected(已拒绝)
4.6、名字由来
对象的状态不受外界影响。promise对象代表一个异步操作,有三种状态,pending(进行中)、fulfilled(已成功)、rejected(已失败)。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态,这也是promise这个名字的由来——“承诺”
4.7、特点
一旦状态改变就不会再变,任何时候都可以得到这个结果。
promise对象的状态改变,只有两种可能:从pending变为fulfilled,从pending变为rejected。这时就称为resolved(已定型)。如果改变已经发生了,你再对promise对象添加回调函数,也会立即得到这个结果。这与事件(event)完全不同,事件的特点是:如果你错过了它,再去监听是得不到结果的
4.8、Promise的缺点
无法取消Promise,一旦新建它就会立即执行,无法中途取消
如果不设置回调函数,Promise内部抛出的错误,不会反应到外部
当处于pending状态时,无法得知目前进展到哪一个阶段(刚刚开始还是即将完成)
4.9、总结
Promise 对象是异步编程的一种解决方案,最早由社区提出。
Promise 是一个构造函数,接收一个函数作为参数,返回一个 Promise 实例。
一个 Promise 实例有三种状态,分别是pending、resolved 和 rejected,分别代表了进行中、已成功和已失败。
实例的状态只能由 pending 转变 resolved 或者rejected 状态,并且状态一经改变,就凝固了,无法再被改变了。
状态的改变是通过 resolve() 和 reject() 函数来实现的,可以在异步操作结束后调用这两个函数改变 Promise 实例的状态,它的原型上定义了一个 then 方法,使用这个 then 方法可以为两个状态的改变注册回调函数。这个回调函数属于微任务,会在本轮事件循环的末尾执行
5、Promise的基本用法
5.1、创建Promise对象
a、new Promise()法
b、promise.resolve()方法
resolve(11)代码中,会让promise对象进入确定(resolve状态),并将参数11传递给后面的then所指定的onFulfilled 函数;
c、promise.reject()方法
reject(‘wrong’)代码中,会让promise对象进入拒绝(reject状态),并将参数wrong传递给后面的catch所指定的reject 函数;
5.2、Promise方法
a、then()方法
p.then(res => {...},err => {...})
then方法可以接受两个回调函数作为参数。第一个回调函数是Promise对象的状态变为resolved时调用,第二个回调函数是Promise对象的状态变为rejected时调用。其中第二个参数可以省略
then方法返回的是一个新的Promise实例(不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法
b、catch()方法
p.catch(err => {...})
该方法相当于then方法的第二个参数,指向reject的回调函数
c、all()方法
Promise.all([p1,p2...])
all方法可以完成并行任务, 它接收一个数组,数组的每一项都是一个promise对象。当数组中所有的promise的状态都达到resolved的时候,all方法的状态就会变成resolved,如果有一个状态变成了rejected,那么all方法的状态就会变成rejected
当所有的子Promise都完成,该Promise完成,返回值是全部值的数组,这个数组按顺序保存着每一个promise对象resolve执行时的值
如果有任何一个失败,该Promise失败,返回值是第一个失败的子Promise的结果
d、race()方法
Promise.race([p1,p2...])
race方法和all一样,接受的参数是一个每项都是promise的数组,但是与all不同的是,当最先执行完的事件执行完之后,就直接返回该promise对象的值。如果第一个promise对象状态变成resolved,那自身的状态变成了resolved;反之第一个promise变成rejected,那自身状态就会变成rejected
实际应用
当要做一件事,超过多长时间就不做了,可以用这个方法来解决
e、finally()方法
p.finally()
finally方法用于指定不管 Promise 对象最后状态如何,都会执行的操作
不管promise最后的状态,在执行完then或catch指定的回调函数以后,都会执行finally方法指定的回调函数
服务器使用 Promise 处理请求,然后使用finally方法关掉服务器,finally方法的回调函数不接受任何参数,这意味着没有办法知道,前面的 Promise 状态到底是fulfilled还是rejected
6、Promise.all和Promise.race的区别的使用场景
Promise.all()
Promise.all可以将多个Promise实例包装成一个新的Promise实例。同时,成功和失败的返回值是不同的,成功的时候返回的是一个结果数组,而失败的时候则返回最先被reject失败状态的值。Promise.all中传入的是数组,返回的也是是数组,并且会将进行映射,传入的promise对象返回的值是按照顺序在数组中排列的,但是注意的是他们执行的顺序并不是按照顺序的,除非可迭代对象为空。需要注意,Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的,这样当遇到发送多个请求并根据请求顺序获取和使用数据的场景,就可以使用Promise.all来解决。
Promise.race()
Promse.race就是赛跑的意思,意思就是说,Promise.race([p1, p2, p3])里面哪个结果获得的快,就返回那个结果,不管结果本身是成功状态还是失败状态。当要做一件事,超过多长时间就不做了,可以用这个方法来解决
7、对async/await 的理解
7.1、async/await其实是Generator 的语法糖,它能实现的效果都能用then链来实现,它是为优化then链而开发出来的。从字面上来看,async是“异步”的简写,await则为等待,所以很好理解async 用于申明一个 function 是异步的,而 await 用于等待一个异步方法执行完成。
async函数返回的是一个Promise 对象,如果在函数中 return 一个直接量,async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象,async 函数返回的是一个 Promise 对象,所以在最外层不能用 await 获取其返回值的情况下,当然应该用原来的方式:then() 链来处理这个 Promise 对象
async函数返回的是一个promise对象
可以用then()方法或者catch()方法来处理async函数(promise对象)
7.2、对promise/then、async/await 的理解
async函数实际上就是promise对象,promise是同步的立即执行函数,所以aysnc函数也是立即执行函数,也就是说含有async或者promise(下面还有普通函数,或者console.log(...))会按照代码的顺序进行执行(若async函数中有await需要重新考虑执行顺序,具体看下面的tip)
promise(async函数)异步任务只针对promise(async函数)中调用的then()方法或者catch()方法等里面的函数执行,promise(async函数)中的同步任务正常执行,不会阻塞,此时then或者catch方法里面的代码会放到异步任务队列中,待页面所有同步任务完成后再按照顺序(或时间顺序)执行
没有await的async函数也是立即执行函数,会正常执行async函数里面的代码
tip:有await的async函数,会暂时阻碍await下面所有代码的执行,在async函数中并且在await前面的代码(以及await紧跟着的那个异步函数也会正常运行)会正常运行,待await等待到他后面异步函数的结果之后,再执行await下面的代码。注意:await在没有等待到它后面的异步函数的结果时只是阻碍async函数中且在await下面的代码的执行,async函数中且在await前面、await后面紧跟着的那个异步任务的代码,以及async函数之后的代码不会受到影响,会正常运行
8、await 到底在等啥?
await后面必须是异步函数, await是在等待一个异步函数完成,而这个异步函数返回值可能时promise对象,也可能是其他值,而await 等待的就是就是异步函数的返回值:
如果它等到的不是一个 Promise 对象,那 await 表达式的运算结果就是它等到的东西
如果它等到的是一个 Promise 对象,await 就忙起来了,它会阻塞在async函数之中且await后面的代码,等着 Promise 对象 resolve,然后得到 resolve 的值,作为 await 表达式的运算结果
9、async/await的优势
9.1、Promise 通过 then 链来解决多层回调的问题,而 async/await 来进一步优化promise的then()方法的多层调用
9.2、async/await对比Promise/then()的优势
a、代码读起来更加同步,Promise虽然摆脱了回调地狱,但是then的链式调⽤也会带来额外的阅读负担
b、Promise传递中间值非常麻烦,而async/await几乎是同步的写法,非常优雅
c、错误处理友好,async/await可以用成熟的try/catch,Promise的错误捕获非常冗余
d、调试友好,Promise的调试很差,由于没有代码块,你不能在一个返回表达式的箭头函数中设置断点,如果你在⼀个.then代码块中使用调试器的步进(step-over)功能,调试器并不会进行后续的.then代码块,因为调试器只能跟踪同步代码的每一步
e、捕获异常
try...catch
10、setTimeout、Promise、Async/Await 的区别
10.1、setTimeout
定时器是异步任务,会将定时器中的代码放到异步任务中,待页面中所有同步任务执行完毕之后再执行异步任务队列
10.2、Promise
Promise本身是同步的立即执行函数, 当在executor中执行resolve或者reject的时候, 此时是异步操作,会先执行promise中的同步任务,然后执行promise之外的同步操作(按照书写代码的先后顺序),而promise.then( )视为异步任务的方法,会加入到任务队列中,等待全部同步任务执行完毕再按顺序执行异步任务队列中的任务,promise后面的定时器也是异步函数,也要加入到异步函数队列中,即使定时器是0s,而且按照代码书写先后顺序,在任务队列中会排到then后面
10.3、async/await
async函数为异步函数,返回的也是promise对象,所以说async函数也是立即执行函数,他里面的代码会按照顺序相继执行;但当有异步任务,且异步任务前面有await时,这时await若未等到异步任务的结果,会阻碍async里面且在await下面的代码(await后面紧跟着的异步任务会正常执行),执行async函数下面的代码直至await等到结果之后再执行它下面在async函数中的代码
11、并发与并行的区别?
并发
并发是宏观概念,在一段时间内通过任务间的切换完成了这些任务,这种情况就可以称之为并发(指在同一时刻只能有一条指令执行,但多个进程指令被快速的轮换执行)
并行
并行是微观概念,指在同一时刻,有多条指令在多个处理器上同时执行。同时完成多个任务的情况就可以称之为并行
12、setTimeout、setInterval、requestAnimationFrame 各有什么特点?
异步编程当然少不了定时器了,常见的定时器函数有 setTimeout、setInterval、requestAnimationFrame。
12.1、最常用的是setTimeout,很多人认为 setTimeout 是延时多久,那就应该是多久后执行,其实这个观点是错误的,因为 JS 是单线程执行的,如果前面的代码影响了性能,就会导致 setTimeout 不会按期执行。当然了,可以通过代码去修正 setTimeout,从而使定时器相对准确
12.2、setInterval,其实这个函数作用和 setTimeout 基本一致,只是该函数是每隔一段时间执行一次回调函数,通常来说不建议使用 setInterval。第一,它和 setTimeout 一样,不能保证在预期的时间执行任务。第二,它存在执行累积的问题,如果定时器执行过程中出现了耗时操作,多个回调函数会在耗时操作结束以后同时执行,这样可能就会带来性能上的问题
12.3、如果有循环定时器的需求,其实完全可以通过 requestAnimationFrame 来实现,首先 requestAnimationFrame 自带函数节流功能,基本可以保证在 16.6 毫秒内只执行一次(不掉帧的情况下),并且该函数的延时效果是精确的,没有其他定时器时间不准的问题
posted on 2022-09-02 14:56 二月龙抬头之伏龙翔天 阅读(34) 评论(0) 编辑 收藏 举报
【推荐】国内首个AI IDE,深度理解中文开发场景,立即下载体验Trae
【推荐】编程新体验,更懂你的AI,立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包,你的智能百科全书,全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell:AI 加持,快人一步
· 阿里最新开源QwQ-32B,效果媲美deepseek-r1满血版,部署成本又又又降低了!
· 开源Multi-agent AI智能体框架aevatar.ai,欢迎大家贡献代码
· Manus重磅发布:全球首款通用AI代理技术深度解析与实战指南
· 被坑几百块钱后,我竟然真的恢复了删除的微信聊天记录!
· AI技术革命,工作效率10个最佳AI工具