一道阿里/字节真题理解前端异步编程

Posted 2021-05-03 前端复习课

tags:

篇首语：本文由小常识网(cha138.com)小编为大家整理，主要介绍了一道阿里/字节真题理解前端异步编程相关的知识，希望对你有一定的参考价值。

非985/211大学毕业，软件工程专业，前端，坐标：北京

工作三年多，第一家人数 30 多人的创业公司，1 年多。

第二家属于前端技术不错的公司，2 年多。

我是一个喜欢在技术领域“折腾”的人，技术能力勉强合格，随着工作经验的积累，逐渐从一个“填坑”的锻炼为可以负责复杂的前端项目。

本想着可以在“金九银十”的时候跳槽成功的，没想到直到年末才拿到自己想要的大厂offer，也算是功夫不负有心人吧，一轮轮面试下来，也是深深感受到了高级前端的面试套路，今天我们一起来探讨一下。

跳槽目标：

虽然，我迫切想要换工作，但是也明白裸辞是不明智的，所以“骑驴找马”成为找工作的方式，对于想要换一份怎样的工作，综合考虑以后，我觉得自己的核心诉求是：

技术沉淀
视野+平台

所以，初创公司便不考虑在自己的范围之内了，我当然也是很想进入互联网大厂了，奈何明白自己还是有差距的，但不试试怎么知道自己究竟差在哪里呢？找到差距，才能快速提升，对吧？

面试的公司：

阿里、网易、滴滴、百度、字节、饿了么、携程、喜马拉雅

有的结果不理想，但是也算是是检测了一下自己，查缺补漏，以此督促自己加强学习。

具体面试题

这道面试题是你去任何一家大厂面试几乎都会被问到的问题。如果这道题答不好，那么最后的结果很有可能是凉凉：

请你分析一下，promise，generator，async 三者之间的关系？

下面有个计时器任务，请用这三种方法依次解决它代码中出现回调地狱的问题。

  
    
    
  
   
     
     
   let t = setTimeout(()=>{
   
     
     
    console.log(1111)
   
     
     
    let t1 = setTimeout(()=>{
   
     
     
    console.log(2222)
   
     
     
    let t2 = setTimeout(()=>{
   
     
     
    console.log(3333)
   
     
     
    },3000)
   
     
     
    },2000)
   
     
     
   },1000)

答案奉上~

promise

promise 是一个类函数。当它执行完毕后，会开启异步任务，这个异步任务还得看 promise 本身的状态。通俗来说，它的异步任务就是 then 中的回调函数。

那么问题来了。promise 诞生的目的不是为了开启异步任务，而是为了解决异步代码的书写格式，尽量实现函数回调的扁平化，所以我们需要把异步代码写在 promise 中进行封装。

  
    
    
  
   
     
     
   const fnasync = function(value){
   
     
     
    return new Promise(function(resolve,reject){
   
     
     
    setTimeout(()=>{
   
     
     
    console.log(value)
   
     
     
    resolve()
   
     
     
    })
   
     
     
    })
   
     
     
   }
   
     
     
   fnasync(1111, 1000)
   
     
     
   .then(() => {
   
     
     
    return fnasync(2222, 2000)
   
     
     
   })
   
     
     
   .then(() => {
   
     
     
    return fnasync(3333, 3000)
   
     
     
   }).catch(err => {console.log(err})

async

async 可以算是异步解决的终结者。虽然 promise 效果出来了，但还是会给开发者们带来逻辑上的问题。相反，async 的书写格式简单明了。

  
    
    
  
   
     
     
   let asyncfn = function (num,timecount) {
   
     
     
    return new Promise((resolve,reject)=>{
   
     
     
    setTimeout(function(){
   
     
     
    console.log(num)
   
     
     
    resolve();
   
     
     
    },timecount)
   
     
     
    })
   
     
     
   

   
     
     
   }
   
     
     
   let fn = async function(){
   
     
     
    await asyncfn(1111,1000)
   
     
     
    await asyncfn(2222,1000)
   
     
     
    await asyncfn(3333,1000)
   
     
     
   }
   
     
     
   fn()