一文搞懂 Promise、Genarator、 Async 三者的区别和联系

非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()

我们只需要关注 await 后面跟的内容就 ok 了。

它们的联系

对于这三者之间的联系，其实很好理解。我们可以认为它们是每一次版本升级的产物。

也就是说，generator 其实是 promise 的升级版，但它的逻辑和理解却要比 promise 复杂。因此，程序员们在上面要花费一些学习成本，所以我个人不推荐大家使用generator。

而 async 是 generator 的升级版，外界都称它为 generator 的语法糖，那就意味着 async 就是一个小甜点，人人喜欢，因为它简单易懂还好用，顺理成章成为开发者们解决异步方案的不二之选！

其实，对于我们这些 1-3 年工作经历的前端，如何才能在面试时中脱颖而出呢？

踏实的基本功，加上丰富的实战经验，技术栈也不要给自己设限，React、Vue,、客户端开发、Node、Canvas ... 撸起袖子就是干，同时对于目前紧迫的业务涉及的技术也需要深入了解，看学习视频，多多投资自己。

因此，对于开发人员来说，技术一定得跟业务并进，那么怎样提升呢？

说到这，我真诚的给你推荐拉勾教育的课程了，大家知道，拉勾深耕招聘领域多年，在“人岗匹配”的过程中，发现很多人才的知识能力体系与企业的用人需求存在偏差。为了解决这个问题，拉勾教育团队历经 12 个月的精心打磨，推出《大前端高薪训练营》。