javascript面试必备知识(4)单线程和异步

雨点打透心脏的1/2处 2022-11-27 15:57 135阅读 0赞

js面试必备知识,关注作者查看系列js知识体系

导语:JavaScript是一门单线程的语言,那么他要是在某一步卡死了,或者是请求资源等待响应,那是不是整个项目都停止了?答案是不是的,因为他有异步操作。

本文的目录

    • 1,什么是同步和异步
    • 2,异步和它造成的问题
    • 三,对js单线程的知识点进行了补充,满满干货。

1,什么是同步和异步

我们先来看一段代码,你觉得他会输出什么?

  1. console.log(100)
  2. setTimeout(() => {
  3. console.log(200)
  4. }, 1000)
  5. setTimeout(() => {
  6. console.log(300)
  7. }, 0)
  8. console.log(400)
  9. // 答案 100 400 300 200

我们先明确一个定义,JavaScript是一个单线程的语言,就是它只能同时做一件事,js和dom渲染共用一个线程,这就会导致在做一些需要响应的操作时,就会停住无法继续执行后面的代码。那为什么不给他变成多线程的呢?这是因为要是变成多线程,要是一个线程给dom文档添加东西,一个给删东西,那到底要以哪个为标准呢?所以导致JavaScript是一门单线程的语言。那怎么解决这些问题呢,就需要用到异步操作。

这里的setTimeout就是一个设置计时器的东西,然后设置一个回调函数,就是异步操作,JavaScript的异步不会阻塞后面代码的执行,等到时间到了就会执行这个异步操作。

2,异步和它造成的问题

相信大家都会遇到一个问题,去请求一个后台接口,然后在把请求到的东西加载到页面上,但是还没请求到资源,就已经把那些后续的操作执行完了,导致页面异常,很多的undefined。异步就能够把这个问题解决,通过回调函数将数据加载到页面上。

  1. $.get(url, (res) => {
  2. this.data = res.data
  3. })

但是又会出现另外一个问题,要是你要将请求到的数据中的某个数据再去请求,以此往复,就会形成一个回调地狱(callback hell)。

  1. $.get(url1, (res1) => {
  2. this.data = res1.data
  3. $.get(url2, (res2) => {
  4. this.data = res2.data
  5. $.get(url3, (res3) => {
  6. this.data = res3.data
  7. })
  8. })
  9. })

这种嵌套的方式几个还好,要是出现十多个,迟早会把程序员给绕晕,同时代码也不易维护。那么这个异步回调函数造成的回调地狱怎么解决呢?就要用到promise来解决。他能把这个嵌套的模式改写成一个链式的模式,从而比较容易写和看懂,方便维护。

  1. function getData(url) {
  2. return new Promise(
  3. (resolve, reject) => {
  4. $.ajax({
  5. url,
  6. success(data) {
  7. resolve(data)
  8. },
  9. error(err) {
  10. reject(err)
  11. }
  12. })
  13. }
  14. )
  15. }
  16. getData(url1).then(res => {
  17. console.log(res.url2)
  18. return getData(res.url2)
  19. }).then(res => {
  20. console.log(res.url3)
  21. return getData(res.url3)
  22. }).then(res => {
  23. console.log(res)
  24. }).catch(err => {
  25. console.error(err)
  26. })

这样就完美解决了这个嵌套的问题了,变成一条链式的形状。

三,对js单线程的知识点进行了补充,满满干货。

篇幅有点长,所以把它放在了另外的一篇博客中,超级详细,看完就能完全理解js的单线程。

https://blog.csdn.net/gitchatxiaomi/article/details/108054585

发表评论

表情:
评论列表 (有 0 条评论,135人围观)

还没有评论,来说两句吧...

相关阅读