├── .gitignore ├── .zhijia ├── config ├── hash └── map ├── 01-1-start.md ├── 01-2-issue.md ├── 01-3-growing.md ├── 01-issues-of-async.md ├── 02-04-promise-advanced.md ├── 02-1-promise-basic.md ├── 02-2-promise-test.md ├── 02-3-promise-error.md ├── 02-promise-intro.md ├── 03-1-async-function-vs-promise.md ├── 03-2-async-test.md ├── 03-async-function.md ├── 04-1-downgrade.md ├── 04-2-xiaochengxu.md ├── 04-3-other.md ├── 04-4-vuex.md ├── 04-lets-do-it.md ├── 10-review.md ├── CHANGELOG.md ├── README.md ├── SUMMARY.md ├── TODO.md ├── book.json ├── code ├── 2-3-1-catch.js └── 2-3-2-catch.js ├── gulpfile.js ├── package-lock.json ├── package.json └── qa.md /.gitignore: -------------------------------------------------------------------------------- 1 | # IDE 2 | 3 | # repo 4 | node_modules 5 | 6 | # test 7 | test 8 | 9 | # build 10 | build -------------------------------------------------------------------------------- /.zhijia/config: -------------------------------------------------------------------------------- 1 | {"anthId":"102426","author":{"id":"117186","username":"肉山"}} -------------------------------------------------------------------------------- /.zhijia/hash: -------------------------------------------------------------------------------- 1 | {"README.md":"5e36cae2c39983107176bd7844508af4","01-issues-of-async.md":"f0556afee315ae3703b355e4c17145f1","01-1-start.md":"832e971e63810ea25aaf6014e727ae50","01-2-issue.md":"839750f494dfd0382dbfe0fa36725e94","01-3-growing.md":"7316c02bb9fddfb50ea69abb662d10c7","02-promise-intro.md":"d66533b7b37468fb44b6a5c0cf76bb25","02-1-promise-basic.md":"666c5f3bcb68de3831f323756c33fd9d","02-2-promise-test.md":"454c6f32bc335cdc5be0ed1581f819b4","02-04-promise-advanced.md":"bf39fb41b9fde55d122eb810c41d8512","03-1-async-function-vs-promise.md":"c0ed44f1a4ecfe808350567f7b6cc0b4","04-lets-do-it.md":"be986ab915c48f2ec408a4bab8680d85","04-1-downgrade.md":"84b2a959f217b5915839c36057ca6dff","04-2-xiaochengxu.md":"4e77a290643ee1097126293022590da6","04-3-other.md":"6231f24b9b0ddd9a4993d535ff409582","10-review.md":"392e878c3d88d9a4be18b35a47f3c256","02-3-promise-error.md":"65a08dacc5b3436c014985889459d705","03-async-function.md":"0a3c5ba1c676df553f41ec95794ffe68"} -------------------------------------------------------------------------------- /.zhijia/map: -------------------------------------------------------------------------------- 1 | {"README.md":"106207","01-issues-of-async.md":"106208","01-1-start.md":"106209","01-2-issue.md":"106210","01-3-growing.md":"106211","02-promise-intro.md":"106212","02-1-promise-basic.md":"106213","02-2-promise-test.md":"106214","02-04-promise-advanced.md":"106215","03-1-async-function-vs-promise.md":"106216","04-lets-do-it.md":"106217","04-1-downgrade.md":"106218","04-2-xiaochengxu.md":"106219","04-3-other.md":"106220","10-review.md":"106221","02-3-promise-error.md":"106222","03-async-function.md":"106223"} -------------------------------------------------------------------------------- /01-1-start.md: -------------------------------------------------------------------------------- 1 | 异步的起源 2 | ======== 3 | 4 | 故事必须从头说起,在很久很久以前…… 5 | 6 | ## 为校验表单,JavaScript 诞生了 7 | 8 | 在那个拨号上网的洪荒年代,浏览器还非常初级,与服务器进行数据交互的唯一方式就是提交表单。用户填写完成之后,交给服务器处理,如果内容合规当然好,如果不合规就麻烦了,必须打回来重填。那会儿网速还是论 Kb 的,比如我刚上网那会儿开始升级到 33.6Kb,主流还是 22.4Kb…… 9 | 10 | 所以很容易想象:当用户填完100+选项,按下提交按钮,等待几十秒甚至几分钟之后,反馈回来的信息却是:“您的用户名不能包含大写字母”,他会有多么的崩溃多么的想杀人。为了提升用户体验,网景公司的[布兰登·艾克](https://zh.wikipedia.org/wiki/%E5%B8%83%E8%98%AD%E7%99%BB%C2%B7%E8%89%BE%E5%85%8B)大约用10天时间,开发出 JavaScript 的原型,从此,这门注定改变世界的语言就诞生了。 11 | 12 | 只是当时大家都还没有认识到这一点,发明它的目的,只是为校验表单。 13 | 14 | ## JavaScript 中存在大量异步计算 15 | 16 | 同样为了提升用户体验,HTML DOM 也选择了边加载、边生成、边渲染的策略。再加上要等待用户操作,大量交互都以事件来驱动。于是,JavaScript 里很早就存在着大量的异步计算。 17 | 18 | 这也带来一个好处,作为一门 UI 语言,异步操作帮 JavaScript 避免了页面冻结。 19 | 20 | 为什么异步操作可以避免界面冻结呢? 21 | 22 | ### 同步的利弊 23 | 24 | > 假设你去到一家饭店,自己找座坐下了,然后招呼服务员拿菜单来。 25 | 26 | > 服务员说:“对不起,我是‘同步’服务员,我要服务完这张桌子才能招呼你。” 27 | 28 | > 那一桌人明明已经吃上了,你只是想要菜单,这么小的一个动作,服务员却要你等待别人的一个大动作完成。你是不是很想抽ta? 29 | 30 | 这就是“同步”的问题:**顺序交付的工作1234,必须按照1234的顺序完成。** 31 | 32 | 不过“同步”也有“同步”的好处:逻辑非常简单。你不用担心每步操作会消耗多少时间,反正每一步操作都会在上一步完成之后才进行,只管往后写就是了。 33 | 34 | ### 异步的利弊 35 | 36 | 与之相反,异步,则是将耗时很长的 A 交付的工作交给系统之后,就去继续做 B 交付的工作。等到系统完成之后,再通过回调或者事件,继续做 A 剩下的工作。 37 | 38 | 从观察者的角度,看起来 AB 工作的完成顺序,和交付他们的时间顺序无关,所以叫“异步”。 39 | 40 | 那些需要大量计算(比如 Service Worker),或者复杂查询(比如 Ajax)的工作,JS 引擎把它们交给系统之后,就立刻返回继续待机了,于是再进行什么操作,浏览器也能第一时间响应,这让用户的感觉非常好。 41 | 42 | 有利必有弊,异步的缺点就是:必须通过特殊的语法才能实现,而这些语法就不如同步那样简单、清晰、明了。 43 | 44 | ## 异步计算的实现 45 | 46 | 异步计算有两种常见的实现形式。 47 | 48 | ### 事件侦听 49 | 50 | 这种形式在浏览器里比较常见,比如,我们可以对一个 `