开发者社区> 问答> 正文

(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点 #前端面试

(滴滴、挖财、微医、海康)JS 异步解决方案的发展历程以及优缺点。

展开
收起
Bill 2020-05-23 13:50:17 2725 0
1 条回答
写回答
取消 提交回答
  • 领取2折优惠劵,有几率免单哦!http://www.weilai.info/tool/326.html

    1. 回调函数(callback)

    setTimeout(() => {
        // callback 函数体
    }, 1000)
    
    

    缺点:回调地狱,不能用 try catch 捕获错误,不能 return

    回调地狱的根本问题在于:

    • 缺乏顺序性: 回调地狱导致的调试困难,和大脑的思维方式不符
    • 嵌套函数存在耦合性,一旦有所改动,就会牵一发而动全身,即(控制反转)
    • 嵌套函数过多的多话,很难处理错误
    ajax('XXX1', () => {
        // callback 函数体
        ajax('XXX2', () => {
            // callback 函数体
            ajax('XXX3', () => {
                // callback 函数体
            })
        })
    })
    

    优点:解决了同步的问题(只要有一个任务耗时很长,后面的任务都必须排队等着,会拖延整个程序的执行。)

    2. Promise

    Promise就是为了解决callback的问题而产生的。 Promise 实现了链式调用,也就是说每次 then 后返回的都是一个全新 Promise,如果我们在 then 中 return ,return 的结果会被 Promise.resolve() 包装

    优点:解决了回调地狱的问题

    ajax('XXX1')
      .then(res => {
          // 操作逻辑
          return ajax('XXX2')
      }).then(res => {
          // 操作逻辑
          return ajax('XXX3')
      }).then(res => {
          // 操作逻辑
      })
    
    

    缺点:无法取消 Promise ,错误需要通过回调函数来捕获

    3. Generator

    特点:可以控制函数的执行,可以配合 co 函数库使用

     function *fetch() {
       yield ajax('XXX1', () => {})
       yield ajax('XXX2', () => {})
       yield ajax('XXX3', () => {})
    }
    let it = fetch()
    let result1 = it.next()
    let result2 = it.next()
    let result3 = it.next()
    

    4. Async/await

    async、await 是异步的终极解决方案

    优点是:代码清晰,不用像 Promise 写一大堆 then 链,处理了回调地狱的问题

    缺点:await 将异步代码改造成同步代码,如果多个异步操作没有依赖性而使用 await 会导致性能上的降低。

    async function test() {
      // 以下代码没有依赖性的话,完全可以使用 Promise.all 的方式
      // 如果有依赖性的话,其实就是解决回调地狱的例子了
      await fetch('XXX1')
      await fetch('XXX2')
      await fetch('XXX3')
    }
    

    下面来看一个使用 await 的例子:

    let a = 0
    let b = async () => {
      a = a + await 10
      console.log('2', a) // -> '2' 10
    }
    b()
    a++
    console.log('1', a) // -> '1' 1
    

    对于以上代码你可能会有疑惑,让我来解释下原因 - 首先函数 b 先执行,在执行到 await 10 之前变量 a 还是 0,因为 await 内部实现了 generator ,generator 会保留堆栈中东西,所以这时候 a = 0 被保存了下来 - 因为 await 是异步操作,后来的表达式不返回 Promise 的话,就会包装成 Promise.reslove(返回值),然后会去执行函数外的同步代码 - 同步代码执行完毕后开始执行异步代码,将保存下来的值拿出来使用,这时候 a = 0 + 10

    上述解释中提到了 await 内部实现了 generator,其实 await 就是 generator 加上 Promise的语法糖,且内部实现了自动执行 generator。如果你熟悉 co 的话,其实自己就可以实现这样的语法糖。

    2020-05-24 22:21:06
    赞同 展开评论 打赏
问答排行榜
最热
最新

相关电子书

更多
阿里云技术面试红宝书 立即下载
超全算法笔试-模拟题精解合集 立即下载
程序员面试宝典 立即下载