es6-async await 手写 前端进阶必备(包懂)

释放双眼,带上耳机,听听看~!

文章目录[隐藏]

虽然上次的表白计划不了了之了,但我依然每天对她嘘寒问暖,我总相信,只要我对她好,总有一天我会感动她的。我也开始了所谓的舔狗之路……

一次和她的聊天中知道她喜欢吃大后街的一家早餐,但每天都起不来。然后我提出帮她带早餐,起初她还觉得有点不好意思稍稍有拒绝的意思,后来在我一系列劝说下答应了,她答应的那一刻,我高兴的像个孩子,那是我们除同学之外的第一个交集,也给我无限的遐想和期望。

大后街还是有点远的,为了防止面条软了,我也特意去买了辆自行车,还记得第一次买早餐的时候,我给自己定了6点的闹钟,兴奋、期待、紧张的我4点多就醒了,然后就毫无睡意了,脑子里一直在想等会应该和她说些啥,在哪里等她下来…..

给她带早餐的第六天,她说她来那个了,下来不了了,她的室友帮她下来拿的,那时候的我对这方面真的不懂,我们那的人感觉都太保守了,对这种东西比较隐晦,于是我百度了一下,然后叮嘱她多喝红糖水,多休息之类的话。聊着聊着我就怀着好奇问了一下她:“这大姨妈一个月来几次哇?”。这句话也让我成为了大学班上四年的笑话,至今还被他们提起…..

前言提示

各位掘友们,此篇文章需要从头认真往下阅读,不然无法理解下文我通过生成器*函数和yield实现的async awit。认真阅读包你搞透async 生成器 迭代器这些知识点。

整理知识点不易,如果大家学到了,帮我点赞关注,后续我会继续写进阶知识点。

迭代器、生成器、async

迭代器:迭代器是一种特殊对象,它具有一些专门为迭代过程设计的专有接口,所有的迭代器对象都有一个next()方法,每次调用都返回一个结果对象。结果对象有两个属性:一个是value,表示下一个将要返回的值;另一个是done,它是一个布尔类型的值,当没有更多可返回数据时返回true。迭代器还会保存一个内部指针,用来指向当前集合中值的位置,每调用一次next()方法,都会返回下一个可用的值

如何区分是否能迭代

打印结果如下图

说明:对象是不可迭代的

可以从原型去看一个类型是否支持迭代,以字符串为例

展开字符串的原型,会发现它存在Symbol(Symbol.iterator)这个属性,说明它是可以迭代的。

把这个属性用起来,再结合迭代器的描述,你或许能进一步理解迭代器。
以 let str1='舔狗的泪' 为例

 
手动实现一个迭代器效果   以对象为例

测试下,同时会发现这个对象是能支持for of 的

 
遍历和迭代的区别

迭代:从目标源依次逐个抽取的方式来提取数据。目标源是有序,连续 
遍历:只要能够循环数据,并不需要有序。
因为对象循环不是有序的,所有它无法迭代,但是Map是可以支持迭代的。

 
生成器

函数前带 * 表示生成器  用yield去产出它的值

注意:每次调用next,他都会走到一个yield,下面代码不会打印log

基于yield去改造刚才让对象能够迭代的方法

对next方法传参,看看yield丑陋的一面,async前世

结果分析:next里面的值会赋给上一次yield 的值 。
站在开发者角度更期望 value1 打印的值就是1。async await它来了

async await基本操作

async await常见用法:let x=await 异步请求
看看它的其他用法,直接看图说话:

基于* yield实现一个async

以下面例子去实现

个人理解及总结

迭代器:它的原型上面存在Symbol(Symbol.iterator),它可以被for of 循环
生成器:* 配合yield 的一个函数
如果你搞懂了生成器函数,基于它实现async await就变得很容易了。
目前把es6里面的class Map Set Promise底层实现都写完了

 

给TA买糖
共{{data.count}}人
人已赞赏
前端技术

25个 CSS 案例演示和 DEMO

2021-12-22 21:24:27

前端技术

纯 CSS 自定义多行省略:从原理到实现

2021-12-22 21:29:52

0 条回复 A文章作者 M管理员
    暂无讨论,说说你的看法吧
个人中心
购物车
优惠劵
今日签到
有新私信 私信列表
搜索