├── .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 | 这种形式在浏览器里比较常见，比如，我们可以对一个 `<button>` 的用户点击行为增加侦听，在点击事件触发后调用函数进行处理。
51 | 
52 | ```javascript
53 | document.getElementById('#button').addEventListener('click', function (event) {
54 |   // do something
55 | }, false);
56 | ```
57 | 
58 | 也可以使用 DOM 节点的 `onclick` 属性绑定侦听函数：
59 | 
60 | ```javascript
61 | document.getElementById('#button').onclick = function (event) {
62 |   // do something
63 | }
64 | ```
65 | 
66 | ### 回调
67 | 
68 | 到了 Node.js（以及其它 Hybrid 环境），由于要和引擎外部的环境进行交互，大部分操作都变成回调。比如用 `fs.readFile()` 读取文件内容：
69 | 
70 | ```javascript
71 | const fs = require('fs');
72 | 
73 | fs.readFile('path/to/file.txt', 'utf8', (err, content) => {
74 |   if (err) {
75 |     throw err;
76 |   }
77 |   console.log(content);
78 | });
79 | ```
80 | 
81 | 如果你不熟悉 Node.js 也没关系，jQuery 里也有类似的操作，最常见的就是侦听页面加载状态，加载完成后启动回调函数：
82 | 
83 | ```javascript
84 | $(function () {
85 |   // 绑定事件
86 |   // 创建组件
87 |   // 以及其它操作
88 | });
89 | ```


--------------------------------------------------------------------------------
/01-2-issue.md:
--------------------------------------------------------------------------------
  1 | 异步的问题
  2 | ========
  3 | 
  4 | ## 回调陷阱
  5 | 
  6 | 这个问题其实是最直观的问题，也是大家谈的最多的问题。比如下面这段代码：
  7 | 
  8 | ```javascript
  9 | a(function (resultA) {
 10 |   b(resultA, function (resultB) {
 11 |     c(resultB, function (resultC) {
 12 |       d(resultC, function (resultD) {
 13 |         e(resultD, function (resultE) {
 14 |           f(resultE, function (resultF) {
 15 |             // 子子孙孙无穷尽也
 16 |             console.log(resultF);
 17 |           });
 18 |         });
 19 |       });
 20 |     });
 21 |   });
 22 | });
 23 | ```
 24 | 
 25 | 嵌套层次之深令人发指。这种代码很难维护，有人称之为“回调地狱”，有人称之为“回调陷阱”，还有人称之为“回调金字塔”，其实都无所谓，带来的问题很明显：
 26 | 
 27 | 1. **难以维护。** 上面这段只是为演示写的示范代码，还算好懂；实际开发中，混杂了业务逻辑的代码更多更长，更难判定函数范围，再加上闭包导致的变量使用，那真的难以维护。
 28 | 2. **难以复用。** 回调的顺序确定下来之后，想对其中的某些环节进行复用也很困难，牵一发而动全局，可能只有全靠手写，结果就会越搞越长。
 29 | 
 30 | ## 更严重的问题
 31 | 
 32 | 面试的时候，问到回调的问题，如果候选人只能答出“回调地狱，难以维护”，在我这里顶多算不功不过，不加分。要想得到满分必须能答出更深层次的问题。
 33 | 
 34 | 为了说明这些问题，我们先来看一段代码。假设有这样一个需求：
 35 | 
 36 | > 遍历目录，找出最大的一个文件。
 37 | 
 38 | ```javascript
 39 | // 这段代码来自于 https://medium.com/@wavded/managing-node-js-callback-hell-1fe03ba8baf 我加入了一些自己的理解
 40 | /**
 41 |  * @param dir 目标文件夹
 42 |  * @param callback 完成后的回调
 43 |  */
 44 | function findLargest(dir, callback) {
 45 |   fs.readdir(dir, function (err, files) {  // [1]
 46 |     if (err) return callback(err); // {1}
 47 |     let count = files.length; // {2}
 48 |     let errored = false; // {2}
 49 |     let stats = []; // {2}
 50 |     files.forEach( file => { // [2]
 51 |       fs.stat(path.join(dir, file), (err, stat) => { // [3]
 52 |         if (errored) return; // {1}
 53 |         if (err) {
 54 |           errored = true;
 55 |           return callback(err);
 56 |         }
 57 |         stats.push(stat); // [4] {2}
 58 | 
 59 |         if (--count === 0) { // [5] {2}
 60 |           let largest = stats
 61 |             .filter(function (stat) { return stat.isFile(); })
 62 |             .reduce(function (prev, next) {
 63 |               if (prev.size > next.size) return prev;
 64 |               return next;
 65 |             });
 66 |           callback(null, files[stats.indexOf(largest)]); // [6]
 67 |         }
 68 |       });
 69 |     });
 70 |   });
 71 | }
 72 | 
 73 | findLargest('./path/to/dir', function (err, filename) { // [7]
 74 |   if (err) return console.error(err);
 75 |   console.log('largest file was:', filename);
 76 | });
 77 | ```
 78 | 
 79 | 这里我声明了一个函数 `findLargest()`，用来查找某一个目录下体积最大的文件。它的工作流程如下（参见代码中的标记“[n]”)：
 80 | 
 81 | 1. 使用 `fs.readdir` 读取一个目录下的所有文件
 82 | 2. 对其结果 `files` 进行遍历
 83 | 3. 使用 `fs.readFile` 读取每一个文件的属性
 84 | 4. 将其属性存入 `stats` 数组
 85 | 5. 每完成一个文件，就将计数器减一，直至为0，再开始查找体积最大的文件
 86 | 6. 通过回调传出结果
 87 | 7. 调用此函数的时候，需传入目标文件夹和回调函数；回调函数遵守 Node.js 风格，第一个参数为可能发生的错误，第二个参数为实际结果
 88 | 
 89 | ## 断开的栈与 `try/catch`
 90 | 
 91 | 我们再来看标记为“{1}”的地方。在 Node.js 中，几乎所有异步方法的回调函数都是这种风格：
 92 | 
 93 | ```javascript
 94 | /**
 95 |  * @param err 可能发生的错误
 96 |  * @param result 正确的结果
 97 |  */
 98 | function (err, result) {
 99 |   if (err) { // 如果发生错误
100 |     return callback(err);
101 |   }
102 | 
103 |   // 如果一切正常
104 |   callback(null, result);
105 | }
106 | ```
107 | 
108 | 通常来说，错误处理的一般机制是“捕获” -> “处理”，即 `try/catch`，但是这里我们都没有用，而是作为参数调用回调函数，甚至要一层一层的通过回调函数传出去。为什么呢？
109 | 
110 | 无论是事件还是回调，基本原理是一致的：
111 | 
112 | > 把当前语句执行完；把不确定完成时间的计算交给系统；等待系统唤起回调。
113 | 
114 | 于是**栈被破坏了，无法进行常规的 `try/catch`**。
115 | 
116 | 我们知道，函数执行是一个“入栈/出栈”的过程。当我们在 A 函数里调用 B 函数的时候，JS 引擎就会先把 A 压到栈里，然后再把 B 压到栈里；B 运行结束后，出栈，然后继续执行 A；A 也运行完毕后，出栈，栈已清空，这次运行结束。
117 | 
118 | 这个时候，我们如果中断代码执行，可以检索完整的堆栈，完整的作用域链（闭包），获取任何我们想获取的信息。
119 | 
120 | 可是异步回调函数（包括事件处理函数，下同）不完全如此，比如上面的代码，无论是 `fs.readdir` 还是 `fs.readFile`，都不会直接调用回调函数，而是继续执行其它代码，直至完成，出栈。真正调用回到函数的是引擎，并且是启用一个新栈，压入栈成为第一个函数。所以如果回调报错，一方面，我们无法获取之前启动异步计算时栈里的信息，不容易判定什么导致了错误；另一方面，套在 `fs.readdir` 外面的 `try/catch`，也根本捕获不到这个错误。
121 | 
122 | 结论：回调函数的栈与启动异步操作的栈断开了，无法正常使用 `try/catch`。
123 | 
124 | ## 迫不得已使用外层变量
125 | 
126 | 我们再来看代码中标记为“{2}”的地方。我在这里声明了3个变量，`count` 用来记录待处理文件的数量；`errored` 用来记录有没有发生错误；`stats` 用来记录文件状态。
127 | 
128 | 这3个变量会在 `fs.stat()` 的回调函数中使用。因为我们没法确定这些异步操作的完成顺序，所以只能用这种方式判断是否所有文件都已读取完毕。虽然基于闭包的设计，这样做一定行得通，但是，操作外层作用域的变量，还是存在一些隐患。比如，这些变量同样也可以被其它同一作用域的函数访问并且修改。
129 | 
130 | 我们平时说“关注点集中”，哪里的变量就在哪里声明哪里使用哪里释放，就是为了避免这种情况。
131 | 
132 | 同样的原理，在第二个“{1}”这里，因为遍历已经执行完，触发回调的时候已经无力回天，所以只能根据外层作用域的记录，逐个判断。
133 | 
134 | 结论：同时执行多个异步回调时，因为没法预期它们的完成顺序，所以必须借助外层作用域的变量。
135 | 
136 | ## 小结
137 | 
138 | 我们回来总结一下，异步回调的传统做法有四个问题：
139 | 
140 | 1. 嵌套层次很深，难以维护
141 | 2. 代码难以复用
142 | 3. 堆栈被破坏，无法正常检索，也无法正常使用 `try/catch/throw`
143 | 4. 多个异步计算同时进行，无法预期完成顺序，必须借助外层作用域的变量，有误操作风险


--------------------------------------------------------------------------------
/01-3-growing.md:
--------------------------------------------------------------------------------
 1 | 异步的发展
 2 | ========
 3 | 
 4 | 最初，在浏览器环境下，大家遭遇的异步导致的问题还不是很严重。因为那会儿以事件侦听为主，大部分处理函数不需要嵌套很多层，也就是 Ajax 批量加载资源的时候可能有些头大，平时不怎么能听到这方面的抱怨。（所以大家都跑去做模组解决方案了，并没有在这方面很上心。）
 5 | 
 6 | 但是当 Node.js 问世之后，对异步的依赖一下子加剧了。
 7 | 
 8 | 因为那个时候，后端语言无论是 PHP、Java、Python 都已经相当成熟，Node.js 想要在服务器端站稳脚跟，必须有独到之处。于是，异步运算带来的无阻塞高并发就成了 Node.js 的镇店之宝、主打功能。
 9 | 
10 | 然而写了才知道，虽然能无阻塞高并发，但是无数层嵌套的回调函数也使得代码维护与重构变得异常困难，抱怨之声四起，大家方开始更努力的探索解决方案。
11 | 
12 | 最终，Promise/A+ 被摸索出来。


--------------------------------------------------------------------------------
/01-issues-of-async.md:
--------------------------------------------------------------------------------
1 | 异步的问题
2 | ========
3 | 
4 | 之所以会出现这样那样的解决方案，我之所以写这样的文章介绍这些解决方案，肯定是异步本身有问题。
5 | 
6 | 是的，异步就是那样让人难以割舍，又那样让人不易亲近。


--------------------------------------------------------------------------------
/02-04-promise-advanced.md:
--------------------------------------------------------------------------------
  1 | Promise 进阶
  2 | ========
  3 | 
  4 | 接下来的时间，我会继续把 Promise 的知识补完。
  5 | 
  6 | ## `Promise.reject(reason)`
  7 | 
  8 | 这个方法比较简单，就返回一个状态为 `rejected` 的 Promise 实例。
  9 | 
 10 | 它接受一个参数 `reason`，作为状态说明，交由后面的 `.catch()` 捕获。为了与其它异常处理共用一个`.catch()`，我们可以用 `Error` 实例作为  `reason`。
 11 | 
 12 | 另外，`Promise.reject()` 也不认 `thenable`。
 13 | 
 14 | ```javascript
 15 | let error = new Error('something wrong');
 16 | Promise.reject(error)
 17 |   .then( value => {
 18 |     console.log('it\'s ok');
 19 |     console.log(value);
 20 |   })
 21 |   .catch( err => {
 22 |     console.log('no, it\'s not ok');
 23 |     console.log(err);
 24 | 
 25 |     return Promise.reject({
 26 |       then() {
 27 |         console.log('it will be ok');
 28 |       },
 29 |       catch() {
 30 |         console.log('not yet');
 31 |       }
 32 |     });
 33 |   });
 34 | ```
 35 | 
 36 | ## `Promise.all([p1, p2, p3, ....])`
 37 | 
 38 | `Promise.all([p1, p2, p3, ....])` 用于将多个 Promise 实例，包装成一个新的 Promise 实例。
 39 | 
 40 | 它接受一个数组（其实是 [`iterable`](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Iteration_protocols#The_iterable_protocol)，不过我觉得暂时不要引入更多概念了……）作为参数，数组里可以是 Promise 对象，也可以是别的值，这些值都会交给 `Promise.resolve()` 处理。当所有子 Promise 都完成，该 Promise 完成，返回值是包含全部返回值的数组。有任何一个失败，该 Promise 失败，`.catch()` 得到的是第一个失败的子 Promise 的错误。
 41 | 
 42 | ```javascript
 43 | Promise.all([1, 2, 3])
 44 |   .then( all => {
 45 |     console.log('1: ', all);
 46 |     return Promise.all([ function () {
 47 |       console.log('ooxx');
 48 |     }, 'xxoo', false]);
 49 |   })
 50 |   .then( all => {
 51 |     console.log('2: ', all);
 52 |     let p1 = new Promise( resolve => {
 53 |       setTimeout(() => {
 54 |         resolve('I\'m P1');
 55 |       }, 1500);
 56 |     });
 57 |     let p2 = new Promise( resolve => {
 58 |       setTimeout(() => {
 59 |         resolve('I\'m P2');
 60 |       }, 1450)
 61 |     });
 62 |     return Promise.all([p1, p2]);
 63 |   })
 64 |   .then( all => {
 65 |     console.log('3: ', all);
 66 |     let p1 = new Promise( resolve => {
 67 |       setTimeout(() => {
 68 |         resolve('I\'m P1');
 69 |       }, 1500);
 70 |     });
 71 |     let p2 = new Promise( (resolve, reject) => {
 72 |       setTimeout(() => {
 73 |         reject('I\'m P2');
 74 |       }, 1000);
 75 |     });
 76 |     let p3 = new Promise( (resolve , reject) => {
 77 |       setTimeout(() => {
 78 |         reject('I\'m P3');
 79 |       }, 3000);
 80 |     });
 81 |     return Promise.all([p1, p2, p3]);
 82 |   })
 83 |   .then( all => {
 84 |     console.log('all', all);
 85 |   })
 86 |   .catch( err => {
 87 |     console.log('Catch: ', err);
 88 |   });
 89 | 
 90 | // 输出：
 91 | // 1:  [ 1, 2, 3 ]
 92 | // 2:  [ [Function], 'xxoo', false ]
 93 | // 3:  [ 'I\'m P1', 'I\'m P2' ]
 94 | // Catch:  I'm P2
 95 | ```
 96 | 
 97 | 这里很容易懂，就不一一解释了。
 98 | 
 99 | ### 常见用法
100 | 
101 | `Promise.all()` 最常见就是和 `.map()` 连用。
102 | 
103 | 我们改造一下前面的例子。
104 | 
105 | ```javascript
106 | // FileSystem.js
107 | const fs = require('fs');
108 | 
109 | module.exports = {
110 |   readDir: function (path, options) {
111 |     return new Promise( resolve => {
112 |       fs.readdir(path, options, (err, files) => {
113 |         if (err) {
114 |           throw err;
115 |         }
116 |         resolve(files);
117 |       });
118 |     });
119 |   },
120 |   stat: function (path, options) {
121 |     return new Promise( resolve => {
122 |       fs.stat(path, options, (err, stat) => {
123 |         if (err) {
124 |           throw err;
125 |         }
126 |         resolve(stat);
127 |       });
128 |     });
129 |   }
130 | };
131 | 
132 | // main.js
133 | const fs = require('./FileSystem');
134 | 
135 | function findLargest(dir) {
136 |   return fs.readDir(dir, 'utf-8')
137 |     .then( files => {
138 |       return Promise.all( files.map( file => fs.stat(file) ));
139 |     })
140 |     .then( stats => {
141 |       let biggest = stats.reduce( (memo, stat) => {
142 |         if (stat.isDirectory()) {
143 |           return memo;
144 |         }
145 |         if (memo.size < stat.size) {
146 |           return stat;
147 |         }
148 |         return memo;
149 |       });
150 |       return biggest.file;
151 |     })
152 |     .catch(console.log.bind(console));
153 | }
154 | 
155 | findLargest('some/path/')
156 |   .then( file => {
157 |     console.log(file);
158 |   })
159 |   .catch( err => {
160 |     console.log(err);
161 |   });
162 | ```
163 | 
164 | 在这个例子当中，我使用 Promise 将 `fs.stat` 和 `fs.readdir` 进行了封装，让其返回 Promise 对象。然后使用 `Promise.all()` + `Array.prototype.map()` 方法，就可以进行遍历，还可以避免使用外层作用域的变量。
165 | 
166 | ## `Promise.race([p1, p2, p3, ....])`
167 | 
168 | `Promise.race()` 的功能和用法与 `Promise.all()` 十分类似，也接受一个数组作为参数，然后把数组里的值都用 `Promise.resolve()` 处理成 Promise 对象，然后再返回一个新的 Promise 实例。只不过这些子 Promise 有任意一个完成，`Promise.race()` 返回的 Promise 实例就算完成，并且返回完成的子实例的返回值。
169 | 
170 | 它最常见的用法，是作超时检查。我们可以把异步操作和定时器放在一个 `Promise.race()` 里，如果定时器触发时异步操作还没返回，就可以认为超时了，然后就可以给用户一些提示。
171 | 
172 | ```javascript
173 | let p1 = new Promise(resolve => {
174 |   // 这是一个长时间的调用，我们假装它就是正常要跑的异步操作
175 |   setTimeout(() => {
176 |     resolve('I\'m P1');
177 |   }, 10000);
178 | });
179 | let p2 = new Promise(resolve => {
180 |   // 这是个稍短的调用，假装是一个定时器
181 |   setTimeout(() => {
182 |     resolve(false);
183 |   }, 2000)
184 | });
185 | Promise.race([p1, p2])
186 |   .then(value => {
187 |     if (value) {
188 |       console.log(value);
189 |     } else {
190 |       console.log('Timeout, Yellow flower is cold');
191 |     }
192 |   });
193 | 
194 | // 输出：
195 | // Timeout, Yellow flower is cold
196 | ```
197 | 
198 | 注意，这里 `p1` 也就是原本就要执行的异步操作并没有被中止，它只是没有在预期的时间内返回而已。所以一方面可以继续等待它的返回值，另一方面也要考虑服务器端是否需要做回滚处理。
199 | 
200 | ## Promise 嵌套
201 | 
202 | 这种情况在初涉 Promise 的同学的代码中很常见，大概是这么个意思：
203 | 
204 | ```javascript
205 | new Promise( resolve => {
206 |   console.log('Step 1');
207 |   setTimeout(() => {
208 |     resolve(100);
209 |   }, 1000);
210 | })
211 |   .then( value => {
212 |     return new Promise(resolve => {
213 |       console.log('Step 1-1');
214 |       setTimeout(() => {
215 |         resolve(110);
216 |       }, 1000);
217 |     })
218 |       .then( value => {
219 |         console.log('Step 1-2');
220 |         return value;
221 |       })
222 |       .then( value => {
223 |         console.log('Step 1-3');
224 |         return value;
225 |       });
226 |   })
227 |   .then(value => {
228 |     console.log(value);
229 |     console.log('Step 2');
230 |   });
231 | ```
232 | 
233 | 因为 `.then()` 返回的也是 Promise 实例，所以外层的 Promise 会等里面的 `.then()` 执行完再继续执行，所以这里的执行顺序稳定为从上之下，左右无关，“1 > 1-1 > 1-2 > 1-3 > 2”。但是从阅读体验和维护效率的角度来看，最好把它展开：
234 | 
235 | ```javascript
236 | new Promise( resolve => {
237 |   console.log('Step 1');
238 |   setTimeout(() => {
239 |     resolve(100);
240 |   }, 1000);
241 | })
242 |   .then( value => {
243 |     return new Promise(resolve => {
244 |       console.log('Step 1-1');
245 |       setTimeout(() => {
246 |         resolve(110);
247 |       }, 1000);
248 |     });
249 |   })
250 |   .then( value => {
251 |     console.log('Step 1-2');
252 |     return value;
253 |   })
254 |   .then( value => {
255 |     console.log('Step 1-3');
256 |     return value;
257 |   })
258 |   .then(value => {
259 |     console.log(value);
260 |     console.log('Step 2');
261 |   });
262 | ```
263 | 
264 | 二者是完全等价的，后者更容易阅读。
265 | 
266 | ## 队列
267 | 
268 | 有时候我们不希望所有动作一起发生，而是按照一定顺序，逐个进行。这样的形式，就是队列。在我看来，队列是 Promise 的核心价值，即使是异步函数在大部分浏览器和 Node.js 里实装的今天，队列也仍有其独特的价值。
269 | 
270 | 用 Promise 实现队列的方式很多，这里兹举两例：
271 | 
272 | ```javascript
273 | // 使用 Array.prototype.forEach
274 | function queue(things) {
275 |   let promise = Promise.resolve();
276 |   things.forEach( thing => {
277 |     // 这里很容易出错，如果不把 `.then()` 返回的新实例赋给 `promise` 的话，就不是队列，而是批量执行
278 |     promise = promise.then( () => {
279 |       return new Promise( resolve => {
280 |         doThing(thing, () => {
281 |           resolve();
282 |         });
283 |       });
284 |     });
285 |   });
286 |   return promise;
287 | }
288 | 
289 | queue(['lots', 'of', 'things', ....]);
290 | 
291 | // 使用 Array.prototype.reduce
292 | function queue(things) {
293 |   return things.reduce( (promise, thing) => {
294 |     return promise.then( () => {
295 |       return new Promise( resolve => {
296 |         doThing(thing, () => {
297 |           resolve();
298 |         });
299 |       });
300 |     });
301 |   }, Promise.resolve());
302 | }
303 | 
304 | queue(['lots', 'of', 'things', ....]);
305 | ```
306 | 
307 | 这个例子如此直接我就不再详细解释了。下面我们看一个相对复杂的例子，假设需求：
308 | 
309 | > 开发一个爬虫，抓取某网站。
310 | 
311 | ```javascript
312 | const spider = require('spider');
313 | 
314 | function fetchAll(urls) {
315 |   return urls.reduce((promise, url) => {
316 |     return promise.then( () => {
317 |       return fetch(url);
318 |     });
319 |   }, Promise.resolve());
320 | }
321 | function fetch(url) {
322 |   return spider.fetch(url)
323 |     .then( content => {
324 |       return saveOrOther(content);
325 |     })
326 |     .then( content => {
327 |       let links = spider.findLinks(content);
328 |       return fetchAll(links);
329 |     });
330 | }
331 | let url = ['http://blog.meathill.com/'];
332 | fetchAll(url);
333 | ```
334 | 
335 | 这段代码，我假设有一个蜘蛛工具（spider）包含基本的抓取和分析功能，然后循环使用 `fetch` 和 `fetchAll` 方法，不断分析抓取的页面，然后把页面当中所有的链接都加入到抓取队列当中。通过递归循环的方式，完成网站抓取。
336 | 
337 | ### Generator
338 | 
339 | 如果你了解 Generator，你应该知道 Generator 可以在执行时中断，并等待被唤醒。如果能把它们连到一起使用应该不错。
340 | 
341 | ```javascript
342 | let generator = function* (urls) {
343 |   let loaded = [];
344 |   while (urls.length > 0) {
345 |     let url = urls.unshift();
346 |     yield spider.fetch(url)
347 |       .then( content => {
348 |         loaded.push(url);
349 |         return saveOrOther(content);
350 |       })
351 |       .then( content => {
352 |         let links = spider.findLinks(content);
353 |         links = _.without(links, loaded);
354 |         urls = urls.concat(links);
355 |       });
356 |   }
357 |   return 'over';
358 | };
359 | 
360 | function fetch(urls) {
361 |   let iterator = generator();
362 | 
363 |   function next() {
364 |     let result = iterator.next();
365 |     if (result.done) {
366 |       return result.value;
367 |     }
368 |     let promise = iterator.next().value;
369 |     promise.then(next);
370 |   }
371 | 
372 |   next();
373 | }
374 | 
375 | let urls = ['http://blog.meathill.com'];
376 | fetch(urls);
377 | ```
378 | 
379 | Generator 可以把所有待抓取的 URL 都放到一个数组里，然后慢慢加载。从整体来看，暴露给外界的 `fetch` 函数其实变简单了很多。但是实现 Generator 本身有点费工夫，其中的利弊大家自己权衡吧。
380 | 
381 | ## 小结
382 | 
383 | 关于 Promise 的内容到此告一段落。这里我介绍了大部分的功能、函数和常见用法，有一些特殊情况会在后面继续说明。


--------------------------------------------------------------------------------
/02-1-promise-basic.md:
--------------------------------------------------------------------------------
  1 | Promise 详解
  2 | ========
  3 | 
  4 | 我们先来看 Promise 的用法。
  5 | 
  6 | ```javascript
  7 | new Promise(
  8 |   /* 执行器 executor */
  9 |   function (resolve, reject) {
 10 |     // 一段可能耗时很长的异步操作
 11 |     doAsyncAction(function callback(err, result) {
 12 |       if (err) {
 13 |         return reject(err);
 14 |       }
 15 |       resolve(result);
 16 |     });
 17 |   }
 18 | )
 19 |   .then(function resolve() {
 20 |     // 成功，下一步
 21 |   }, function reject() {
 22 |     // 失败，做相应处理
 23 |   });
 24 | ```
 25 | 
 26 | Promise 是一个**代理对象**，它和原先的异步操作并无关系。它接受一个“执行器 executor”作为参数，我们把原先要执行的异步（并非一定要异步，以后会说明，这里你可以先不深究）操作放进去。
 27 | 
 28 | 执行器在 Promise 实例创建后立刻开始执行。执行器自带两个参数：`resolve` 和 `reject`，这二位都是函数，执行它们会改变 Promise 实例的状态。
 29 | 
 30 | Promise 实例有三个状态：
 31 | 
 32 | 1. `pending` [待定] 初始状态，新创建的实例处于这个状态
 33 | 2. `fulfilled` [实现] 操作成功，在执行器里调用 `resolve()` 之后，实例切换到这个状态
 34 | 3. `rejected` [被否决] 操作失败，在执行器里调用 `reject()` 之后，实例切换到这个状态
 35 | 
 36 | Promise 实例状态改变之后，就会触发后面对应的 `.then()` 参数里的函数，继续执行后续步骤。另外，Promise 的实例状态只会改变一次，确定为 `fulfilled` 或 `rejected` 之一后就不会再变。
 37 | 
 38 | ## 一个简单的例子
 39 | 
 40 | ```javascript
 41 | new Promise( resolve => {
 42 |   setTimeout( () => {
 43 |     resolve('hello');
 44 |   }, 2000);
 45 | })
 46 |   .then( value => {
 47 |     console.log( value + ' world');
 48 |   });
 49 | 
 50 | // 输出：
 51 | // hello world
 52 | ```
 53 | 
 54 | 这是最简单的一种情况。执行器里面是一个定时器，2秒种之后，它会执行 `resolve('hello')`，将 Promise 实例的状态置为 `fulfilled`，并传出返回值`'hello'`。接下来 `.then()` 里面的 `resolve` 响应函数就会被触发，它接受前面 Promise 返回的值 `'hello'`，将其与 `' world'` 连接起来，输出“hello world”。
 55 | 
 56 | ## 再来一个稍复杂的例子
 57 | 
 58 | ```javascript
 59 | new Promise( resolve => {
 60 |   setTimeout( () => {
 61 |     resolve('hello');
 62 |   }, 2000);
 63 | })
 64 |   .then( value => {
 65 |     return new Promise( resolve => {
 66 |       setTimeout( () => {
 67 |         resolve('world')
 68 |       }, 2000);
 69 |     });
 70 |   })
 71 |   .then( value => {
 72 |     console.log( value + ' world');
 73 |   });
 74 | 
 75 | // 输出：
 76 | // world world
 77 | ```
 78 | 
 79 | 这个例子与上一个例子的不同之处在于，我在 `.then()` 的后面又跟了一个 `.then()`。并且在第一个 `.then()` 里又返回了一个 Promise 实例。于是，第二个 `.then()` 就又等了2秒才执行，并且接收到的参数是第一个 `.then()` 返回的 Promise 返回的 `'world'`(好拗口)，而不是起始 Promise 返回的 `'hello'`。
 80 | 
 81 | 这就必须说明 Promise 里 `.then()` 的设计。
 82 | 
 83 | ## `.then()`
 84 | 
 85 | `.then()` 其实接受两个函数作为参数，分别代表 `fulfilled` 状态时的处理函数和 `rejected` 状态时的处理函数。只不过通常情况下，我会建议大家使用 `.catch()` 捕获 `rejected` 状态。这个后面还会说到，暂时按下不表。
 86 | 
 87 | `.then()` 会返回一个新的 Promise 实例，所以它可以链式调用，如前面的例子所示。当前面的 Promise 状态改变时，`.then()` 会执行特定的状态响应函数，并将其结果，调用自己的 Promise 的 `resolve()` 返回。
 88 | 
 89 | ### Promise.resolve()
 90 | 
 91 | 这里必须插入介绍一下 Promise.resolve()。它是 Promise 的静态方法，可以返回一个状态为 `fulfilled` 的 Promise 实例。这个方法非常重要，其它方法都需要用它处理参数。
 92 | 
 93 | 它可以接受四种不同类型的参数，并且返回不同的值：
 94 | 
 95 | 1. 参数为空，返回一个 `fulfilled` 实例，响应函数的参数也为空
 96 | 2. 参数不为空、也不是 Promise 实例，返回 `fulfilled` 实例，只不过响应函数能得到这个参数
 97 | 3. 参数为 Promise 实例，直接原样返回
 98 | 4. 参数为 thenable 对象，立刻执行它的 `.then()`
 99 | 
100 | 用一段代码作为示范吧，比较简单，就不一一解释了。
101 | 
102 | ```javascript
103 | Promise.resolve()
104 |   .then( () => {
105 |     console.log('Step 1');
106 |     return Promise.resolve('Hello');
107 |   })
108 |   .then( value => {
109 |     console.log(value, 'World');
110 |     let p = new Promise( resolve => {
111 |       setTimeout(() => {
112 |         resolve('Good');
113 |       }, 2000);
114 |     });
115 |     return Promise.resolve(p);
116 |   })
117 |   .then( value => {
118 |     console.log(value, ' evening');
119 |     return Promise.resolve({
120 |       then() {
121 |         console.log(', everyone');
122 |       }
123 |     })
124 |   });
125 | 
126 | // 输出：
127 | // Step 1
128 | // Hello World
129 | // （2秒之后） Good evening
130 | // , everyone
131 | ```
132 | 
133 | 提醒大家一下，标准定义的 Promise 不能被外界改变状态，只能在执行器里执行 `resolve` 或者 `reject` 来改变。
134 | 
135 | ### 继续 `.then()` 的话题
136 | 
137 | 结合上一小节关于 Promise.resolve() 的讲解，我们应该可以推断出 `.then()` 里的状态响应函数返回不同结果对进程的影响了吧。所以在连续 `.then()` 的例子中，第一个 `.then()` 返回了新的 Promise 实例，第二个就会等待其完成后才会触发。
138 | 
139 | 好的，接下来我们换一个思路，假如一个 Promise 已经完成了，再给它加一个 `.then()`，会有什么效果呢？我们来试一下。
140 | 
141 | ```javascript
142 | let promise = new Promise(resolve => {
143 |   setTimeout(() => {
144 |     console.log('the promise fulfilled');
145 |     resolve('hello, world');
146 |   }, 1000);
147 | });
148 | 
149 | setTimeout(() => {
150 |   promise.then( value => {
151 |     console.log(value);
152 |   });
153 | }, 3000);
154 | 
155 | // 输出
156 | // （1秒后）the promise fulfilled
157 | // （3秒后）hello, world
158 | ```
159 | 
160 | 1秒后，Promise 完成；3秒后，给它续上一个 `.then()`，因为它已经处于 `fulfilled` 状态，所以立刻执行响应函数，输出“hello, world”。
161 | 
162 | 这一点很值得我们关注。Promise 从队列操作中脱胎而成，带有很强的队列属性。异步回调开始执行后，我们无法追加操作，也无法判定结束时间。而使用 Promise 的话，我们不需要关心它什么时候开始什么时候结束，只需要在后面追加操作，即可。另外，Promise 是一个普通对象，我们也可以像对待别的对象那样将它进行传递。这为它带来了独特的价值。


--------------------------------------------------------------------------------
/02-2-promise-test.md:
--------------------------------------------------------------------------------
  1 | Promise 小测验
  2 | ========
  3 | 
  4 | 好的，我们已经初步了解了 Promise 的使用方式；了解了 `.then()` 怎么处理响应函数；知道 `.then()` 会返回新的 Promise 实例，所以可以链式调用；还知道 `Promise.resolve()` 是怎么转化普通类型到 Promise 类型的。可能有些同学看到这里，自我感觉良好，觉得已经学完了。所以接下来我们来做一个小测验，看看大家的掌握程度。
  5 | 
  6 | > 下面这道题出自 [We have a problem with promises](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
  7 | 
  8 | **问题：下面的四种 promises 的区别是什么？**
  9 | 
 10 | （假定 `doSomething()` 和 `doSomethingElse()` 都会返回 Promise 对象。另外请尽量在足够宽的屏幕上观看，不然换行可能会影响视觉效果。）
 11 | 
 12 | ```javascript
 13 | // #1
 14 | doSomething().then(function () {
 15 |   return doSomethingElse();
 16 | });
 17 | 
 18 | // #2
 19 | doSomething().then(function () {
 20 |   doSomethingElse();
 21 | });
 22 | 
 23 | // #3
 24 | doSomething().then(doSomethingElse());
 25 | 
 26 | // #4
 27 | doSomething().then(doSomethingElse);
 28 | ```
 29 | 
 30 | 仔细看一看，默想一下答案，不要着急往下翻。
 31 | 
 32 | 好，准备好了么？我们继续了哟。
 33 | 
 34 | 3...
 35 | 
 36 | 2..
 37 | 
 38 | 1.
 39 | 
 40 | ## 答案揭晓
 41 | 
 42 | ### 第一题
 43 | 
 44 | ```javascript
 45 | doSomething()
 46 |   .then(function () {
 47 |     return doSomethingElse();
 48 |   })
 49 |   .then(finalHandler);
 50 | ```
 51 | 
 52 | 答案：
 53 | 
 54 | ```
 55 | doSomething
 56 | |-----------|
 57 |             doSomethingElse(undefined)
 58 |             |------------|
 59 |                          finalHandler(resultOfDoSomethingElse)
 60 |                          |------------|
 61 | ```
 62 | 
 63 | 这道题比较简单，几乎和前面的例子一样，我就不多说了。
 64 | 
 65 | ### 第二题
 66 | 
 67 | ```javascript
 68 | doSomething()
 69 |   .then(function () {
 70 |     doSomethingElse();
 71 |   })
 72 |   .then(finalHandler);
 73 | ```
 74 | 
 75 | 答案：
 76 | 
 77 | ```
 78 | doSomething
 79 | |-----------------|
 80 |                   doSomethingElse(undefined)
 81 |                   |------------------|
 82 |                   finalHandler(undefined)
 83 |                   |------------------|
 84 | ```
 85 | 
 86 | 这道题就有一定难度了。虽然 `doSomethingElse` 会返回 Promise 对象，但是因为 `.then()` 的响应函数并没有把它 `return` 出来，所以这里其实相当于 `return null`。我们知道，`Promise.resolve()` 在参数为空的时候会返回一个状态为 `fulfilled` 的 Promise，所以这里两步是几乎一起执行的。
 87 | 
 88 | ### 第三题
 89 | 
 90 | ```javascript
 91 | doSomething()
 92 |   .then(doSomethingElse())
 93 |   .then(finalHandler);
 94 | ```
 95 | 
 96 | 答案：
 97 | 
 98 | ```
 99 | doSomething
100 | |-----------------|
101 | doSomethingElse(undefined)
102 | |---------------------------------|
103 |                   finalHandler(resultOfDoSomething)
104 |                   |------------------|
105 | ```
106 | 
107 | 这一题的语法陷阱也不小。首先，`doSomethingElse` 和 `doSomethingElse()` 的区别在于，前者是变量，指向一个函数；而后者是则是直接执行了函数，并返回其返回值。所以这里 `doSomethingElse` 立刻就开始执行了，和前面 `doSomething` 的启动时间相差无几，可以忽略不计。然后，按照 Promise 的设计，当 `.then()` 的参数不是函数的时候，这一步会被忽略不计，所以 `doSomething` 完成后就跳去执行 `finalHandler` 了。
108 | 
109 | ### 第四题
110 | 
111 | ```javascript
112 | doSomething()
113 |   .then(doSomethingElse)
114 |   .then(finalHandler);
115 | ```
116 | 
117 | 答案：
118 | 
119 | ```
120 | doSomething
121 | |-----------|
122 |             doSomethingElse(resultOfDoSomething)
123 |             |------------|
124 |                          finalHandler(resultOfDoSomethingElse)
125 |                          |------------------|
126 | ```
127 | 
128 | 这一题比较简单，就不解释了。
129 | 
130 | --------
131 | 
132 | 怎么样？都答对了么？还是有点小难度的，对吧？


--------------------------------------------------------------------------------
/02-3-promise-error.md:
--------------------------------------------------------------------------------
  1 | Promise 进阶
  2 | ========
  3 | 
  4 | 我们继续学习 Promise。
  5 | 
  6 | ## 错误处理
  7 | 
  8 | Promise 会自动捕获内部异常，并交给 `rejected` 响应函数处理。比如下面这段代码：
  9 | 
 10 | ```javascript
 11 | new Promise( resolve => {
 12 |   setTimeout( () => {
 13 |     resolve();
 14 |   }, 2000);
 15 |   throw new Error('bye');
 16 | })
 17 |   .then( value => {
 18 |     console.log( value + ' world');
 19 |   })
 20 |   .catch( error => {
 21 |     console.log( 'Error: ', error.message);
 22 |   });
 23 | 
 24 | // 立刻输出：
 25 | // Error: bye
 26 | ```
 27 | 
 28 | 可以看到，原定2s之后 `resolve()` 并没有出现，因为在 Promise 的执行器里抛出了错误，所以立刻跳过了 `.then()`，进入 `.catch()` 处理异常。
 29 | 
 30 | 这里需要注意，如果把抛出错误的语句放到回调函数里，则是另外一副光景：
 31 | 
 32 | ```javascript
 33 | new Promise( resolve => {
 34 |   setTimeout( () => {
 35 |     throw new Error('bye');
 36 |   }, 2000);
 37 | })
 38 |   .then( value => {
 39 |     console.log( value + ' world');
 40 |   })
 41 |   .catch( error => {
 42 |     console.log( 'It\'s an Error: ', error.message);
 43 |   });
 44 | 
 45 | // (2s之后)输出：
 46 | // ./code/2-3-catch-error.js:3
 47 | //     throw new Error('bye');
 48 | //     ^
 49 | 
 50 | // Error: bye
 51 | //     at Timeout.setTimeout [as _onTimeout] (/Users/meathill/Documents/Book/javascript-async-tutorial/code/2-3-catch-error.js:3:11)
 52 | //     at ontimeout (timers.js:488:11)
 53 | //     at tryOnTimeout (timers.js:323:5)
 54 | //     at Timer.listOnTimeout (timers.js:283:5)
 55 | ```
 56 | 
 57 | 正如[异步的问题](./01-2-issue.md)分析的那样，异步回调中，异步函数的栈，和回调函数的栈，**不是**一个栈。所以 Promise 的执行器只能捕获到异步函数抛出的错误，无法捕获回调函数抛出的错误。
 58 | 
 59 | 回到上面这段代码，当回调函数抛出错误时，我们没有捕获处理，运行时就出面捕获了，于是报错、回调栈被终结。此时，Promise 对象的状态并未被改变，所以下面的 `.then()` 响应函数和 `.catch()` 响应函数都没有触发，我们看到的，只是默认的错误输出。（2017-07-19 更新）
 60 | 
 61 | 这也印证了 Promise 的问题：它没有引入新的语法元素，所以无法摆脱栈断裂带来的问题。在错误处理方面，它只是“能用”，并不好用，无法达到之前的开发体验。
 62 | 
 63 | ### `reject`
 64 | 
 65 | 正如我们前面所说，`.then(fulfilled, reject)` 其实接收两个参数，分别作为成功与失败的回调。不过在实践中，我更推荐上面的做法，即不传入第二个参数，而是把它放在后面的 `.catch()` 里面。这样有两个好处：
 66 | 
 67 | 1. 更加清晰，更加好读
 68 | 2. 可以捕获前面所有 `.then()` 的错误，而不仅是这一步的错误
 69 | 
 70 | > 在小程序里需要注意，抛出的错误会被全局捕获，而 `.catch` 反而不执行，所以该用两个参数还是要用。
 71 | 
 72 | ## 更复杂的情况
 73 | 
 74 | 当队列很长的时候，情况又如何呢？我们看一段代码：
 75 | 
 76 | ```javascript
 77 | new Promise(resolve => {
 78 |   setTimeout(() => {
 79 |     resolve();
 80 |   }, 1000);
 81 | })
 82 |   .then( () => {
 83 |     console.log('start');
 84 |     throw new Error('test error');
 85 |   })
 86 |   .catch( err => {
 87 |     console.log('I catch: ', err);
 88 | 
 89 |     // 下面这一行的注释将引发不同的走向
 90 |     // throw new Error('another error');
 91 |   })
 92 |   .then( () => {
 93 |     console.log('arrive here');
 94 |   })
 95 |   .then( () => {
 96 |     console.log('... and here');
 97 |   })
 98 |   .catch( err => {
 99 |     console.log('No, I catch: ', err);
100 |   });
101 | 
102 | // 输出：
103 | // start
104 | // I catch: test err
105 | // arrive here
106 | // ... and here
107 | ```
108 | 
109 | 实际上，`.catch()` 仍然会使用 `Promise.resolve()` 返回其中的响应函数的执行结果，与 `.then()` 并无不同。所以 `.catch()` 之后的 `.then()` 仍然会执行，如果想彻底跳出执行，就必须继续抛出错误，比如把上面代码中的 `another error` 那行注释掉。这也需要大家注意。
110 | 
111 | 所以，我们也可以下结论，Promise 并没有真正请回 `try/catch/throw`，它只是模拟了一个 `.catch()` 出来，可以在一定程度上解决回调错误的问题，但是距离真正还原栈关系，正常使用 `try/catch/throw` 其实还很远。
112 | 
113 | ## 小结
114 | 
115 | 简单总结一下 Promise 的错误处理。与异步回调相比，它的作用略强，可以抛出和捕获错误，基本可以按照预期的状态执行。然而它仍然不是真正的 `try/catch/throw`。
116 | 
117 | `.catch()` 也使用 `Promise.resolve()` 返回 `fulfilled` 状态的 Promise 实例，所以它后面的 `.then()` 会继续执行，在队列很长的时候，也容易出错，请大家务必小心。
118 | 
119 | 另外，所有执行器和响应函数里的错误都不会真正进入全局环境，所以我们有必要在所有队列的最后一步增加一个 `.catch()`，防止遗漏错误造成意想不到的问题。
120 | 
121 | ```javascript
122 | doSomething()
123 |   .doAnotherThing()
124 |   .doMoreThing()
125 |   .catch( err => {
126 |     console.log(err);
127 |   });
128 | ```
129 | 
130 | 在 Node.js v7 之后，没有捕获的内部错误会触发一个 Warning，大家可以用来发现错误。


--------------------------------------------------------------------------------
/02-promise-intro.md:
--------------------------------------------------------------------------------
 1 | Promise 方案
 2 | ========
 3 | 
 4 | > 有没有一种方案，既能保留异步在无阻塞上的优势，又能让我们写代码写的更舒服呢？
 5 | 
 6 | 社区经过长时间探索，最终总结出 Promise/A+ 方案，并且纳入 ES2015 规范，如今，大部分运行环境都已经原生支持它。
 7 | 
 8 | [![Promise 的普及率](http://zhijia-10060660.file.myqcloud.com/article/images/20170624003412_474.jpg)](http://caniuse.com/#search=promise)
 9 | _Promise 的支持情况_
10 | 
11 | 这套方案有以下好处：
12 | 
13 | 1. 可以很好的解决回调嵌套问题
14 | 2. 代码阅读体验很好
15 | 3. 不需要新的语言元素
16 | 
17 | 这套方案由众多开发者共同探索得来，不同类库的实现略有不同，但日后都会支持 ES2015 标准。本文也以其为准。


--------------------------------------------------------------------------------
/03-1-async-function-vs-promise.md:
--------------------------------------------------------------------------------
 1 | Async Function VS Promise
 2 | =======
 3 | 
 4 | ## 异步函数的优势
 5 | 
 6 | 异步函数对异步编程来说，有非常很大的提升。尤其在 `try/catch/throw` 方面，异步函数可以延续以前的标准写法，还能正常检索堆栈信息，优势非常大。
 7 | 
 8 | ## Promise 的价值
 9 | 
10 | 不过就目前来看，Promise （暂时）并不会被完全取代。
11 | 
12 | ### 异步函数依赖 Promise
13 | 
14 | 异步函数返回的是一个 Promise 对象；`await` 关键字只能等待 Promise 对象完成操作。
15 | 
16 | 所以 Promise 的知识都还有效，大家也必须学习 Promise，才能更好的使用异步函数。
17 | 
18 | ### Promise 能更好的提供队列操作，并且在对象之间传递
19 | 
20 | Promise 本身是一个对象，所以可以在代码中任意传递。这意味着我们可以在程序的任何位置使用和维护队列，非常方便。
21 | 
22 | 比如我们做一些办公产品，用户可能先做了 A，然后又做了 B。A 和 B 之间存在很强的先后顺序，不能乱。这个时候，队列的价值就能充分提现出来。
23 | 
24 | ### 异步函数的支持率还不够
25 | 
26 | 从上一节最后的截图可以看到，虽然异步函数的支持率已经很高了，但是在 iOS 10.2、Android 4 等关键平台上，还没有原生实现。这就需要我们进行降级兼容。
27 | 
28 | 然而异步函数的降级代码很难写，Babel 转译后至少要增加3000行，对于一些轻量级应用来说代价不小。如果应用本身不大，或者异步操作并不复杂，用 Promise 可能是更好的选择。
29 | 
30 | ## 小结
31 | 
32 | Promise 和异步函数之间不存在替代关系，根据需求和场景选择合适的技术，永远不会错。


--------------------------------------------------------------------------------
/03-2-async-test.md:
--------------------------------------------------------------------------------
 1 | Async 小测验
 2 | ========
 3 | 
 4 | Async Function 同样会有一些令人困惑的地方，我收集了一些，放在这里方便大家学习。
 5 | 
 6 | 1. 执行顺序
 7 | 
 8 | > 来自 [Axel Rauschmayer](https://twitter.com/rauschma/status/1188927319685120001)
 9 | 
10 | 下面两行代码的执行顺序一致么？不一致的话，差别在哪里？
11 | 
12 | ```js
13 | /* 1 */ [one, two] = [await fn(1), await fn(2)];
14 | /* 2 */ [one, two] = await Promise.all([fn(1), fn(2)]);
15 | ```
16 | 
17 | **答案：**
18 | 
19 | 不一致。(1) 是顺序执行，因为构建数组时，会先等待 `fn(1)`、`fn(2)` 执行完；(2) 是并发执行，`fn(2)` 会在 `fn(1)` 执行完但是没有返回结果时立即执行。
20 | 
21 | --------
22 | 
23 | 总结
24 | --------
25 | 
26 | 其实说起来是 Async 问题，其实都是语法问题。
27 | 


--------------------------------------------------------------------------------
/03-async-function.md:
--------------------------------------------------------------------------------
  1 | Async Function
  2 | ========
  3 | 
  4 | Async Function，即异步函数，为异步编程带来了非常大的提升，瞬间把开发效率和维护效率提升了一个数量级。
  5 | 
  6 | 它的用法非常简单，只要用 `async` 关键字声明一个函数为“异步函数”，这个函数的内部就可以使用 await 关键字，让其中的语句等待异步执行的结果，然后再继续执行。我们还是用代码来说话吧：
  7 | 
  8 | ```javascript
  9 | function resolveAfter2Seconds(x) {
 10 |   return new Promise(resolve => {
 11 |     setTimeout(() => {
 12 |       resolve(x);
 13 |     }, 2000);
 14 |   });
 15 | }
 16 | 
 17 | async function f1() {
 18 |   var x = await resolveAfter2Seconds(10);
 19 |   console.log(x);
 20 | }
 21 | f1();
 22 | 
 23 | // 输出：
 24 | // （2秒后）10
 25 | ```
 26 | 
 27 | 这段代码来自 [MDN](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)。里面先声明了 `resolveAfter2Seconds` 函数，执行它会返回一个 Promise 对象，等待2秒钟之后完成。然后声明了异步函数 `f1`，里面只有两行代码，第一行用 `await` 表示要等后面的 Promise 完成，再进行下一步；于是2秒之后，输出了“10”。
 28 | 
 29 | 这段代码比较短，不太能体现异步函数的价值，我们改写一下查找最大文件的代码试试看：
 30 | 
 31 | ```javascript
 32 | const fs = require('./FileSystem');
 33 | 
 34 | async function findLargest(dir) {
 35 |   let files = await fs.readdir(dir);
 36 |   let stats = [];
 37 |   for (let i = 0, len = files.length; i < len; i++) {
 38 |     stats.push(await fs.stat(files[i]));
 39 |   }
 40 |   return stats
 41 |     .filter( stat => stat.isFile() )
 42 |     .reduce( (memo, stat) => {
 43 |       if (memo.size > stat.size) return memo;
 44 |       return stat;
 45 |     });
 46 | }
 47 | 
 48 | findLargest('path/to/dir')
 49 |   .then(file => {
 50 |     console.log(file);
 51 |   });
 52 | ```
 53 | 
 54 | 怎么样，是不是异常清晰明了，连代码量都减少了很多。而且，因为每次 `await` 都会等待后面的异步函数完成，所以我们还无意间写出了生成队列的代码。当然你可能不希望要队列，毕竟都异步了，队列的吸引力实在不大，那么我们只需要把 `for` 循环改成下面这个样子就行了：
 55 | 
 56 | ```javascript
 57 | let stats = await Promise.all(files.map( file => fs.stat(file) ));
 58 | ```
 59 | 
 60 | 酷不酷！想不想学？
 61 | 
 62 | ## 设计
 63 | 
 64 | 见识过异步函数的强大之后，我们来捋一捋一下它的具体设计。
 65 | 
 66 | 异步函数主要由两部分组成：
 67 | 
 68 | ### `async`
 69 | 
 70 | 声明一个函数是异步函数。执行异步函数会返回一个 Promise 实例。异步函数的返回值会继续向后传递。
 71 | 
 72 | `async` 的语法比较简单，就在普通函数前面加个 `async` 而已。它也支持箭头函数，也可以用作立刻执行函数。
 73 | 
 74 | ### `await`
 75 | 
 76 | `await` 操作符只能用在异步函数的内部。表示等待一个 Promise 完成，然后返回其返回值。语法是这样的：
 77 | 
 78 | ```javascript
 79 | [return_value] = await expression;
 80 | ```
 81 | 
 82 | * **return_value 返回值**：Promise 执行器的返回值
 83 | * **expression 表达式**：Promise 对象，其它类型会使用 `Promise.resolve()` 转换
 84 | 
 85 | 执行到 `await` 之后，异步函数会暂停执行，等待表达式里的 Promise 完成。`resolve` 之后，返回 Promise 执行器的返回值，然后继续执行。如果 Promise 被 `rejected`，就抛出异常。
 86 | 
 87 | ## 捕获错误
 88 | 
 89 | 异步函数最大的改进其实就在捕获错误这里。它可以直接使用 `try/catch/throw` 就像我们之前那样。
 90 | 
 91 | 比如，一款前后端分离的应用，论坛，需要用户登录。所以在初始化的时候就会向服务器请求用户信息，如果返回了，就继续加载用户关注列表等其它数据；如果返回 401 错误，就让用户登录。用 Promise 的话，我们可能会这样做：
 92 | 
 93 | ```javascript
 94 | function getMyProfile() {
 95 |   return fetch('api/me')
 96 |     .then(response => {
 97 |       if (response.ok) {
 98 |         return response.json();
 99 |       }
100 |     })
101 |     .then(profile => {
102 |       global.profile = profile
103 |     })
104 |     .catch( err => {
105 |       if (err.statusCode === 401) {
106 |         location.href = '#/login';
107 |       } else {
108 |         // 处理其它错误
109 |       }
110 |     });
111 | }
112 | ```
113 | 
114 | 这样做也不是不可以，但是如果业务逻辑越来越复杂，队列也会越来越长，也许每一步都需要处理错误，那么队列就会变得难以维护。
115 | 
116 | 如果用异步函数就会简单很多：
117 | 
118 | ```javascript
119 | async function getMyProfile() {
120 |   let profile;
121 |   try {
122 |     global.profile = await fetch('api/me');
123 |   } catch (e) {
124 |     if (e.statusCode === 401) {
125 |       location.href = '#/login';
126 |     } else {
127 |       // 处理其它错误
128 |     }
129 |   }
130 | }
131 | ```
132 | 
133 | 另外，如果你真的捕获到错误，你会发现，它的堆栈信息是连续的，甚至可以回溯到调用异步函数的语句，继而可以审查所有堆栈里的变量。这对调试程序带来的帮助非常巨大。（需要运行时支持，转译的不行。）
134 | 
135 | ## 普及率
136 | 
137 | [![Async Function 的普及率](http://zhijia-10060660.file.myqcloud.com/article/images/20170624003509_343.jpg)](http://caniuse.com/#search=async%20function)
138 | 截图于：2017-06-23
139 | 
140 | 可以看出，大部分主流浏览器都已经支持异步函数，值得关注的，只有 iOS 10.2 和 Android 4。当然在国内的话，IE 始终是老大难问题……


--------------------------------------------------------------------------------
/04-1-downgrade.md:
--------------------------------------------------------------------------------
  1 | 降级
  2 | ========
  3 | 
  4 | ## IE
  5 | 
  6 | 遗憾的是，除了 Edge 版本，IE 都不支持原生 Promise（更不要提异步函数了）。不过好在 Promise 不需要新的语言元素，所以我们完全可以用独立类库来补足。这里推荐 [Q](https://github.com/kriskowal/q) 和 [Bluebird](http://bluebirdjs.com/)，它们都完全兼容 ES 规范，也就是说，前面介绍的用法都能奏效。
  7 | 
  8 | 当然如果你不是非要 `new Promise()` 不可，用 jQuery 也完全可以。
  9 | 
 10 | ## jQuery
 11 | 
 12 | jQuery 早在 1.5 版本就开始这方面的探索，不过它起的名字不太一样，叫 [Deferred 对象](http://api.jquery.com/category/deferred-object/)。实现也不太一样，有一些特殊的 API，比如 [.done()](http://api.jquery.com/deferred.done/)。不过升级到 [3.0](http://blog.meathill.com/tech/js/jquery/jquery-3-0-beta-released.html) 之后，jQuery 就完全兼容 ES2015 的 Promise 规范，并且通过了相关测试。所以如果使用新版本，我们大可以按照前面的教程来操作，只是 jQuery 需要使用工厂方法来创建 Promise 实例，与标准做法略有区别：
 13 | 
 14 | ```javascript
 15 | $.deferred(function (resolve) {
 16 |   // 执行异步操作吧
 17 | })
 18 |   .then( response => {
 19 |     // 继续下一步
 20 |   });
 21 | ```
 22 | 
 23 | 至于那些独有 API，我们当它们不存在就好了。另外，jQuery 的 [jqXHR](http://api.jquery.com/jQuery.ajax/#jqXHR) 也是 Promise 对象，所以完全可以用 `.then()` 方法操作：
 24 | 
 25 | ```javascript
 26 | $.ajax(url, {
 27 |   dataType: 'json'
 28 | })
 29 |   .then(json => {
 30 |     // 做后续操作
 31 |   });
 32 | ```
 33 | 
 34 | ## 异步函数
 35 | 
 36 | 异步函数因为引入了新的语法元素，要想在比较古老的浏览器里使用，必须用 Babel 进行转译。
 37 | 
 38 | 转译的时候我们需要考虑目标平台。异步函数的转译通常分为两步：
 39 | 
 40 | 1. 转化为 generator
 41 | 2. 兼容实现 generator
 42 | 
 43 | ### 转译为 generator
 44 | 
 45 | 所以如果目标平台支持 generator，那么只需要用 [transform-async-to-generator](https://babeljs.io/docs/plugins/transform-async-to-generator) 插件就好：
 46 | 
 47 | ```bash
 48 | npm i --save-dev transform-async-to-generator
 49 | ```
 50 | 
 51 | 然后在 .babelrc 里启用
 52 | 
 53 | ```json
 54 | {
 55 |   "plugins": ["transform-async-to-generator"]
 56 | }
 57 | ```
 58 | 
 59 | ### 转译为 ES5
 60 | 
 61 | 不过考虑到现实因素，支持 generator 的浏览器多半可以自动升级，很可能已经支持异步函数，转译的需求可能并不大。国内最大的转译原因还是根深蒂固的 Windows + IE，于是我们需要彻底转译成 ES5。
 62 | 
 63 | 这时就需要同时多个插件共同工作了。包括 [Syntax async functions](http://babeljs.io/docs/plugins/syntax-async-functions/)、[Regenerator transform](http://babeljs.io/docs/plugins/transform-regenerator/)、[Async to generator transform](http://babeljs.io/docs/plugins/transform-async-to-generator/)、[Runtime transform](http://babeljs.io/docs/plugins/transform-runtime/)。这些插件会帮你把异步函数转译成 generator，然后转译成 regenerator，然后再引入 regenerator 库，最终实现在低版本浏览器里运行异步函数的效果。
 64 | 
 65 | ```bash
 66 | npm i --save-dev babel-plugin-transform-regenerator babel-plugin-syntax-async-functions babel-plugin-transform-runtime babel-plugin-transform-async-to-generator
 67 | ```
 68 | 
 69 | 然后在 .babelrc 里启用它们：
 70 | 
 71 | ```json
 72 | {
 73 |   "plugins": [
 74 |     "babel-plugin-transform-regenerator",
 75 |     "babel-plugin-syntax-async-functions",
 76 |     "babel-plugin-transform-async-to-generator",
 77 |     "babel-plugin-transform-runtime"
 78 |   ]
 79 | }
 80 | ```
 81 | 
 82 | > 需要注意的是，这样至少会引入3000多行代码（据说），对轻量应用影响很大。另外，编译之后的代码，也无法享受到栈和错误捕获方面的优势。
 83 | 
 84 | 还有一个偷懒的做法，就是索性把 ES2015、ES2017 通通转译成 ES5，这样代码量会增加很多，但配置相对简单：
 85 | 
 86 | ```bash
 87 | npm i babel-preset-es2015 babel-preset-es2017 babel-plugin-transform-runtime --save-dev
 88 | ```
 89 | 
 90 | ```json
 91 | {
 92 |   "presets": ["es2015", "es2017"],
 93 |   "plugins": ["transform-runtime]
 94 | }
 95 | ```
 96 | 
 97 | ### 还不会用 Babel？
 98 | 
 99 | Babel 转译，以及 Webpack 打包其实也包含不少的内容，这里我就不详细介绍了，尚不了解的同学请自行寻找资料学习。如果英文阅读能力尚可的话，直接看官网基本就够了。
100 | 
101 | * [Babel 官网](http://babeljs.io)
102 | * [Webpack 官网](https://webpack.js.org)
103 | * [Babel + Webpack 配置](http://babeljs.io/docs/setup/#installation)


--------------------------------------------------------------------------------
/04-2-xiaochengxu.md:
--------------------------------------------------------------------------------
 1 | 在小程序中使用 Promise
 2 | ========
 3 | 
 4 | 国内开发者尤其是前端，肯定不能避开“小程序”这个话题。
 5 | 
 6 | 从[小程序 API 文档](https://mp.weixin.qq.com/debug/wxadoc/dev/api/)可以看出，大部分交互都要藉由异步回调来完成（我猜测这多半是跟原生应用交互导致的）。所以自然而然的，我也想用更好的方式去操作。
 7 | 
 8 | 因为客户端的 WebView 中不支持原生 Promise，所以“微信 Web 开发工具”中也移除了对 Promise 的支持，需要我们自己处理。
 9 | 
10 | 好在正如之前所说，Promise 不需要引入新的语言元素，兼容性上佳，所以我们只要引用成熟的 Promise 类库就好。这里我选择 [Bluebird](http://bluebirdjs.com/)。
11 | 
12 | ## 安装
13 | 
14 | ```bash
15 | cd /path/to/my-xcx
16 | npm install bluebird --save-dev
17 | ```
18 | 
19 | 这样会把 Bluebird 安装在小程序目录的 `node_modules` 里。因为小程序并不支持从中加载，所以我们需要手工把 `node_modules/bluebird/browser/bluebird.js` 复制出来，放到小程序的 `utils` 目录内。
20 | 
21 | ## 使用
22 | 
23 | 使用时只需要 `import Promise from './utils/bluebird';`，就可以在开发环境中自由使用 `new Promise()` 了。这里拿 `wx.login` 作为例子：
24 | 
25 | ```javascript
26 | import Promise from './utils/bluebird';
27 | 
28 | return new Promise(resolve => {
29 |   wx.login({
30 |     success(result) {
31 |       resolve(result);
32 |     }
33 |   });
34 | })
35 |   .then(result => {
36 |     console.log(result);
37 |   });
38 | ```
39 | 
40 | ## 注意事项
41 | 
42 | 经过我的实际测试，在小程序里抛出错误并不会被 `.catch()` 捕获，而是直接进入全局错误处理。所以在小程序开发中，我们需要放弃前面说的，尽量抛出错误的做法，转用 `reject()`。
43 | 
44 | ```javascript
45 | // 不要这样做！
46 | new Promise( resolve => {
47 |   wx.checkSession({
48 |     success() {
49 |       resolve();
50 |     },
51 |     fail() {
52 |       throw new Error('Weixin session expired');
53 |     }
54 |   });
55 | });
56 | 
57 | // 推荐这样做
58 | new Promise( (resolve, reject) => {
59 |   wx.checkSession({
60 |     success() {
61 |       resolve();
62 |     },
63 |     fail() {
64 |       reject('Weixin session expired');
65 |     }
66 |   });
67 | });
68 | ```
69 | 
70 | ## Async Functions
71 | 
72 | “微信 Web 开发者工具”里面集成了 Babel 转译工具，可以将 ES6 编译成 ES5，不过 Async Functions 就不支持了。此时我们可以选择自行编译，或者只使用 Promise。
73 | 
74 | 自行编译时，请注意，小程序页面没有 `<script>`，只能引用同名 `.js`，所以要留神输出的文件名。这里建议把 JS 写在另一个文件夹，然后用 Babel 转译，把最终文件写过来。
75 | 
76 | ```bash
77 | babel /path/to/my-xcx-src -d /path/to/my-xcx --source-map --watch
78 | ```


--------------------------------------------------------------------------------
/04-3-other.md:
--------------------------------------------------------------------------------
  1 | 其它场景
  2 | ========
  3 | 
  4 | 现在越来越多的库与框架都开始返回 Promise 对象，这里暂列一二。
  5 | 
  6 | ## Fetch API
  7 | 
  8 | Fetch API 是 XMLHttpRequest 的现代化替代方案，它更强大，也更友好。它直接返回一个 Promise 实例，并分两步返回结果。
  9 | 
 10 | 第一次返回的 `response` 包含了请求的状态，接下来可以调用 `response.json()` 生成新的 Promise 对象，它会在加载完成后返回结果。
 11 | 
 12 | ```javascript
 13 | fetch('some.json')
 14 |   .then( response => {
 15 |     if (response.ok) {
 16 |       return response.json();
 17 |     }
 18 |     throw new Error(response.statusText);
 19 |   })
 20 |   .then( json => {
 21 |     // do something with the json
 22 |   })
 23 |   .catch( err => {
 24 |     console.log(err);
 25 |   });
 26 | ```
 27 | 
 28 | 除了 `response.json()` 之外，它还有 `.blob()`，`.text()` 等方法，具体可以参考 [MDN 上的文档](https://developer.mozilla.org/en-US/docs/Web/API/Fetch_API)。
 29 | 
 30 | 它的浏览器覆盖率请看[这里](http://caniuse.com/#search=fetch)，值得注意的是，iOS 10.2 还不支持，所以现在必须提供兼容方案。
 31 | 
 32 | ## Gulp
 33 | 
 34 | 我们知道，gulp 为了提速，默认采用并发异步的方式执行任务。如果一定要顺序执行，有三个方式：
 35 | 
 36 | 1. 任务完成后调用参数 callback
 37 | 2. 返回一个 stream 或者 vinyl file
 38 | 3. 返回一个 Promise 对象
 39 | 
 40 | 所以这个时候，应用异步函数再合适不过
 41 | 
 42 | ```javascript
 43 | gulp.task('task', async () => {
 44 |   let readFile = util.promisify(fs.readFile);
 45 |   let content = await readFile('sfbj.txt');
 46 |   content = content.replace('old', 'new');
 47 |   return content;
 48 | });
 49 | ```
 50 | 
 51 | ## H5
 52 | 
 53 | H5 项目中，动画的比重很大，有些动画有顺序要求，这个时候，用 Promise 来处理就非常合适。
 54 | 
 55 | 这里提供一个我写的函数供大家参考：
 56 | 
 57 | ```javascript
 58 | function isTransition(dom) {
 59 |   let style = getComputedStyle(dom).getPropertyValue('transition');
 60 |   return style !== 'all 0s ease 0s';
 61 | }
 62 | 
 63 | export function next(dom) {
 64 |   let eventName = isTransition(dom) ? 'transitionend' : 'animationend';
 65 |   return new Promise(resolve => {
 66 |     dom.addEventListener(eventName, function handler(event) {
 67 |       dom.removeEventListener(eventName, handler);
 68 |       resolve(event);
 69 |     }, false);
 70 |   });
 71 | }
 72 | ```
 73 | 
 74 | 这个函数会根据元素的样式判定是使用 `transition` 动画还是 `animation` 动画，然后侦听相应事件，在事件结束后，`resovle`。
 75 | 
 76 | 使用的时候，可以先把写好的动画样式绑上去，然后侦听，比如下面：
 77 | 
 78 | ```javascript
 79 | this.actions = next(loading)
 80 |   .then(() => {
 81 |     el.classList.remove('enter');
 82 |   })
 83 |   .then(() => {
 84 |     wukong.classList.add('in');
 85 |     wukong.style.transform = 'translate3d(0,0,0)';
 86 |     return next(wukong);
 87 |   })
 88 |   .then(() => {
 89 |     let bufu = this.queue.getResult('bufu');
 90 |     bufu.className = 'bufu fadeInUp animated';
 91 |     el.appendChild(bufu);
 92 |     return next(bufu);
 93 |   })
 94 |   .then(() => {
 95 |     let faxing = this.queue.getResult('faxing');
 96 |     faxing.className = 'faxing fadeInUp animated';
 97 |     el.appendChild(faxing);
 98 |     return next(faxing);
 99 |   })
100 |   .then(() => {
101 |     let bg = this.queue.getResult('homepage');
102 |     bg.className = 'bg fadeIn animated';
103 |     el.insertBefore(bg, el.firstChild);
104 |     return next(bg);
105 |   });
106 | ```
107 | 
108 | 在这种场景，使用 Promise 会比使用异步函数更方便维护。


--------------------------------------------------------------------------------
/04-4-vuex.md:
--------------------------------------------------------------------------------
 1 | Vuex
 2 | ========
 3 | 
 4 | Vue 从去年开始大热，越来越多同学借助其全家桶进行开发。其中，Vuex 负责状态管理，换言之，在复杂应用中，Vuex 通常作为全局的数据中心。
 5 | 
 6 | > 如果您还不熟悉 Vuex，可以阅读它的[官方文档](https://vuex.vuejs.org/zh-cn/intro.html)。
 7 | 
 8 | Vuex 要求开发者使用显式的方式修改数据。对立刻生效的修改，调用 `stat.commit(type, payload)` 提交；对需要异步数据交互之后才能生效的修改，通过 `stat.dispatch(type, payload)` 提交。
 9 | 
10 | 比如说，一个电商网站，有限量促销商品，库存很少，于是很容易发生用户下单时才发现被抢空的情况。这个时候，系统就需要帮助用户重新加载促销商品。同时，还要给出相应提示。换言之，我们不仅需要提交异步修改，还要知道异步修改是什么时候完成的。
11 | 
12 | 一方面，可以通过监测特定属性，也就是借助 `vm.$watch` 来进行。不过这种方式很难区分前置条件，比如我们可以 `.$watch` 商品列表，但是商品列表有好几种原因会刷新，如果都写在一起，逻辑就很分裂。另一种方法，利用 `stat.dispatch` 会返回对应 `action` 函数的返回值的特性，可以直接返回代理异步操作的 Promise，这样我们就可以给出适当的提示了。
13 | 
14 | ```javascript
15 | // buy.js
16 | api.checkProduct(productId) // 检查商品是否还在
17 |   .then( response => {
18 |     if (response.code === 0) {
19 |       return api.checkout(); // 正常，结账
20 |     }
21 |     throw new Error(response.code);
22 |   })
23 |   .catch( err => { // 没了
24 |     if (err.message === NO_MORE_PRODUCT) {
25 |       let popup = PopupManager.alert('您要购买的商品已售空，正为您查找其它的促销商品....');
26 |       this.$store.dispatch(ActionTypes.REFETCH_SALES)
27 |         .then(response => {
28 |           popup.msg = '已重新获取促销商品，请尽快选购';
29 |           popup.state = PopupManager.READY;
30 |         });
31 |     }
32 |   });
33 | 
34 | // action.js
35 | [ActionTypes.REFETCH_SALES] ({commit, state}) {
36 |   state.isFetching = true;
37 |   return api.fetch() // 要点：这里的 Promise 会返回给 dispatch 的地方
38 |     .then(json => {
39 |       commit(MutationTypes.RESET_PRODUCT_LIST, json);
40 |     });
41 | }
42 | ```


--------------------------------------------------------------------------------
/04-lets-do-it.md:
--------------------------------------------------------------------------------
  1 | 实战环节
  2 | ========
  3 | 
  4 | 学会新的异步代码书写方式之后，我们自然希望改造之前的异步回调代码。下面我就带领大家来试一试。
  5 | 
  6 | ## 将回调包装成 Promise
  7 | 
  8 | 这是最常见的应用。它有三个显而易见的好处：
  9 | 
 10 | 1. 可读性更好
 11 | 2. 返回的结果可以加入任何 Promise 队列
 12 | 3. 可以使用 Async Functions
 13 | 
 14 | 我们就拿读取文件来举个例子。
 15 | 
 16 | ```javascript
 17 | // FileSystem.js
 18 | const fs = require('fs');
 19 | 
 20 | module.exports = {
 21 |   readFile: function (path, options) {
 22 |     return new Promise( resolve => {
 23 |       fs.readFile(path, options, (err, content) => {
 24 |         if (err) {
 25 |           throw err;
 26 |         }
 27 |         resolve(content);
 28 |       });
 29 |     });
 30 |   }
 31 | };
 32 | 
 33 | // promise.js
 34 | const fs = require('./FileSystem');
 35 | 
 36 | fs.readFile('../README.md', 'utf-8')
 37 |   .then(content => {
 38 |     console.log(content);
 39 |   });
 40 | 
 41 | // async.js
 42 | const fs = require('.FileSystem');
 43 | 
 44 | async function read(path) {
 45 |   let content = await fs.readFile(path);
 46 |   console.log(content);
 47 | }
 48 | read();
 49 | ```
 50 | 
 51 | ## 将任何异步操作包装成 Promise
 52 | 
 53 | 不止回调，其实我们可以把任意异步操作都包装城 Promise。假设需求：
 54 | 
 55 | > 1. 弹出确认窗口，用户点击确认再继续，点击取消就中断
 56 | > 2. 由于样式有要求，不能使用 `window.confirm()`
 57 | 
 58 | 之前我们的处理方式通常是：
 59 | 
 60 | ```javascript
 61 | something.on('done', function () { // 先做一些处理
 62 |   popup = openConfirmPopup('确定么'); // 弹出确认窗口
 63 |   popup.on('confirm', function goOn () { // 用户确认后继续处理
 64 |     // 继续处理
 65 |     next();
 66 |   });
 67 | });
 68 | ```
 69 | 
 70 | 如今，借助 Promise 的力量，我们可以把弹窗封装成 Promise，然后就可以将其融入队列，或者简单的使用 Async 等待操作完成。
 71 | 
 72 | ```javascript
 73 | function openConfirmPopup(msg) {
 74 |   let popup = createPopup(msg);
 75 |   return new Promise( (resolve, reject) => {
 76 |     popup.confirmButton.onclick = resolve;
 77 |     popup.cancelButton.onclick = reject;
 78 |   });
 79 | }
 80 | 
 81 | // pure promise
 82 | doSomething()
 83 |   .then(() => {
 84 |     return openConfirmPopup('确定么')
 85 |   })
 86 |   .then( () => {
 87 |     // 继续处理
 88 |     next();
 89 |   });
 90 | 
 91 | // async functions
 92 | await doSomething();
 93 | if (await openConfirmPopup('确定么')) {
 94 |   // 继续处理
 95 |   next();
 96 | }
 97 | ```
 98 | 
 99 | ## Node.js 8 的新方法
100 | 
101 | Node.js 8 于今年5月底正式发布，带来了[很多新特性](https://github.com/nodejs/node/blob/master/doc/changelogs/CHANGELOG_V8.md#8.0.0)。其中，`util.promisify()`，尤其值得我们注意。
102 | 
103 | 为保证向下兼容，Node.js 里海量的异步回调函数自然都会保留，如果我们把每个函数都封装一遍，那真是齁麻烦齁麻烦，比齁还麻烦。
104 | 
105 | 所以 Node.js 8 就提供了 `util.promisify()` ——“Promise 化”方法，方便我们把原来的异步回调方法瞬间改造成支持 Promise 的方法。接下来，想继续 `.then().then().then()` 搞队列，还是 Await 就看实际需要了。
106 | 
107 | > [Bluebird](http://bluebirdjs.com/) 也提供了类似的方法，不妨看下它的[文档](http://bluebirdjs.com/docs/features.html#promisification-on-steroids)。
108 | 
109 | 我们看下官方范例。已知读取目录文件状态的 `fs.stat`，想得到支持 Promise 的版本，只需要这样做：
110 | 
111 | ```javascript
112 | const util = require('util');
113 | const fs = require('fs');
114 | 
115 | const stat = util.promisify(fs.stat);
116 | stat('.')
117 |   .then((stats) => {
118 |     // Do something with `stats`
119 |   })
120 |   .catch((error) => {
121 |     // Handle the error.
122 |   });
123 | ```
124 | 
125 | 怎么样，很简单吧？按照文档的说法，只要符合 Node.js 的回调风格，所有函数都可以这样转换。也就是说，只要满足下面两个条件，无论是不是原生方法，都可以：
126 | 
127 | 1. 最后一个参数是回调函数
128 | 2. 回调函数的参数为 `(err, result)`，前面是可能的错误，后面是正常的结果
129 | 
130 | ### 结合 Async Functions 使用
131 | 
132 | 同样是上面的例子，如果想要结合 Async Functions，可以这样使用：
133 | 
134 | ```javascript
135 | const util = require('util');
136 | const fs = require('fs');
137 | 
138 | const stat = util.promisify(fs.stat);
139 | async function readStats(dir) {
140 |   try {
141 |     let stats = await stat(dir);
142 |     // Do something with `stats`
143 |   } catch (err) { // Handle the error.
144 |     console.log(err);
145 |   }
146 | }
147 | readStats('.');
148 | ```
149 | 
150 | ### 自定义 Promise 化处理函数
151 | 
152 | 那如果现有的使用回调的函数不符合这个风格，还能用 `util.promisify()` 么？答案也是肯定的。我们只要给函数增加一个属性 `util.promisify.custom`，指定一个函数作为 Promise 化处理函数，即可。请看下面的代码：
153 | 
154 | ```javascript
155 | const util = require('util');
156 | 
157 | // 这就是要处理的使用回调的函数
158 | function doSomething(foo, callback) {
159 |   // ...
160 | }
161 | 
162 | // 给它增加一个方法，用来在 Promise 化时调用
163 | doSomething[util.promisify.custom] = function(foo) {
164 |   // 自定义生成 Promise 的逻辑
165 |   return getPromiseSomehow();
166 | };
167 | 
168 | const promisified = util.promisify(doSomething);
169 | console.log(promisified === doSomething[util.promisify.custom]);
170 | // prints 'true'
171 | ```
172 | 
173 | 如此一来，任何时候我们对目标函数 doSomething 进行 Promise 化处理，都会得到之前定义的函数。运行它，就会按照我们设计的特定逻辑返回 Promise 对象。
174 | 
175 | 有了 `util.promisify`，升级异步回到函数，使用 Promise 或者异步函数真的方便了很多。


--------------------------------------------------------------------------------
/10-review.md:
--------------------------------------------------------------------------------
 1 | 回顾
 2 | ========
 3 | 
 4 | ## Pormise
 5 | 
 6 | 相较于传统的回调模式，Promise 有着巨大的进步，值得我们学习和使用。
 7 | 
 8 | ### 优势
 9 | 
10 | 1. 可以很好地解决异步回调不好写、不好读的问题
11 | 2. 可以使用队列，并且在对象之间传递
12 | 3. 不引入新语言元素，大部分浏览器已经原生支持，可以放心使用；个别不支持的，也有完善的解决方案
13 | 
14 | ### 不足
15 | 
16 | 1. 引入了不少新概念、新写法，学习成本不低
17 | 2. 也会有嵌套，可能看起来还很复杂
18 | 3. 没有真正解决 `return/try/catch` 的问题
19 | 
20 | ## Async Functions
21 | 
22 | 异步函数是 ES2017 里非常有价值的新特性，可以极大的改善异步开发的环境。
23 | 
24 | 除了覆盖率，几乎找不出什么黑点。
25 | 
26 | 目前大部分主流浏览器都已经实现对它的支持，除了 IE 和 iOS 10.2。我们可以针对这两个系列的浏览器里进行降级，不过请注意，因为 Async Functions 引入了新的语法元素，所以必须用 Babel 转译的方式来处理。
27 | 
28 | ## 一些小 Tips
29 | 
30 | 这是我犯过的一些错误，希望成为大家前车之鉴。
31 | 
32 | * `.resolve()` `.reject()` 不会自动 `return`。
33 | * Promise 里必须 `.resolve()` `.reject()` `throw err` 才会改变状态，`.then()` 不需要。
34 | * `resolve()` 只会返回一个值，返回多个值请用数组或对象。
35 | 
36 | ## 参考阅读
37 | 
38 | * [MDN Promise](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise)
39 | * [MDN Promise 中文](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Promise)
40 | * [阮一峰：ECMAScript 6 入门 - Promise 对象](http://es6.ruanyifeng.com/#docs/promise)
41 | * [[翻译] We have a problem with promises](http://fex.baidu.com/blog/2015/07/we-have-a-problem-with-promises/)
42 | * [MDN Generator](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Global_Objects/Generator)
43 | * [Async Function](https://developer.mozilla.org/zh-CN/docs/Web/JavaScript/Reference/Statements/async_function)
44 | * [await](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Operators/await)
45 | * [让微信小程序支持 ES6 的 Promise 特性](https://haojen.github.io/2016/11/23/wechat-app-promise/)
46 | * [util.promisify() in Node.js v8](http://farzicoder.com/util-promisify-in-Node-js-v8/)
47 | * [util.promisify 官方文档](https://nodejs.org/dist/latest-v8.x/docs/api/util.html#util_util_promisify_original)


--------------------------------------------------------------------------------
/CHANGELOG.md:
--------------------------------------------------------------------------------
1 | 更新记录
2 | ========
3 | 
4 | 方便大家日后跟进阅读。
5 | 
6 | ## 2017-07-16
7 | 
8 | * 增加在 Vuex 的 action 中返回 Promise 对象，实现 `dispatch` 时处理异步的内容。


--------------------------------------------------------------------------------
/README.md:
--------------------------------------------------------------------------------
 1 | 前言
 2 | ========
 3 | 
 4 | 为解决异步函数的回调陷阱，开发社区不断摸索，终于折腾出 Promise/A+。它的优势非常显著：
 5 | 
 6 | 1. 不增加新的语法，可以立刻适配几乎所有浏览器
 7 | 2. 以队列的形式组织代码，易读好改
 8 | 3. 捕获异常方案也基本可用
 9 | 
10 | 这套方案在迭代中逐步完善，最终被吸收进 ES2015。不仅如此，ES2017 中还增加了 Await/Async，可以用顺序的方式书写异步代码，甚至可以正常抛出捕获错误，维护同一个栈。可以说彻底解决了异步回调的问题。
11 | 
12 | 现在大部分浏览器和 Node.js 都已原生支持 Promise，很多类库也开始返回 Promise 对象，更有各种降级适配策略。Node.js 7+ 则实装了 Await/Async。如果您现在还不会使用，那么我建议您尽快学习一下。本文我准备结合近期的开发经验，全面介绍现代化的 JavaScript 异步开发。
13 | 
14 | ## 关于这本书
15 | 
16 | 这本书最开始的内容源于我在 [SegmentFault](https://segmentfault.com/) 做的一场分享： [Promise 的 N 种用法](https://segmentfault.com/l/1500000008757392)。
17 | 
18 | 后来去 GitChat 分享时，选题比较犯难，就跟运营妹子商量要不再做一次同样题目，这样我也省事儿。结果挂出来后乏人问津，只好再跟运营开会讨论，然后决定更名为[《JavaScript 异步开发攻略》](http://gitbook.cn/books/594541981b8e4b4036720fc9/index.html)，并且增加非 Promise 的内容。改名后终于过了下限，然后我就动手写，于是便有了这本小书。
19 | 
20 | 我写这本书时就打算根据环境发展随时更新内容，没想到 GitChat 设计成后期不允许修改文章，要改只能把内容发给运营人工修改。因为我写的时候为了分章节好维护好管理，用的是 Git + Gitbook，索性脆放到 Gitbook 上好了。名字也改成现在这个样子，增加一个“全”字。
21 | 
22 | ## 目标读者要求
23 | 
24 | 1. 前端水平：初级、中级
25 | 2. 了解 JavaScript
26 | 3. 最好有异步开发经历，希望写出更好的代码
27 | 
28 | ## 名词及约定
29 | 
30 | * ES6 = ES2015
31 | * ES7 = ES2016 + ES2017
32 | * 异步函数 = Async Functions = Await/Async
33 | 
34 | 范例代码会使用 ES6 的语法，也会混用 ES6 Module 和 CommonJS，请大家不要见怪。我会在代码当中加注释，其中会有一些关键内容，请大家不要忽略。
35 | 
36 | 本文中所有代码均以 Node.js 7.0 为基础。
37 | 
38 | ## 作者介绍
39 | 
40 | 大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。
41 | 
42 | 我热爱编程，喜欢学习，喜欢分享，从业十余年，投入的比较多，学习积累到的也比较多，对前端方方面面都有所了解，希望能与大家分享。
43 | 
44 | 我兴趣爱好比较广泛，尤其喜欢旅游，欢迎大家相互交流。
45 | 
46 | 你可以在这里找到我：
47 | 
48 | * [博客](http://blog.meathill.com)
49 | * [微博](http://weibo.com/meathill)
50 | * [GitHub](https://github.com/meathill)
51 | 
52 | ## 版权许可
53 | 
54 | 本书采用[“保持署名—非商用”创意共享4.0许可证](https://creativecommons.org/licenses/by-nc/4.0/)。
55 | 
56 | 只要保持原作者署名和非商用，您可以自由地阅读、分享、修改本书。
57 | 
58 | ## 反馈
59 | 
60 | 如果您对于文中的内容有任何疑问，请在评论或 [Issue](https://github.com/meathill/javascript-async-tutorial/issues) 中告诉我。亦可发邮件给我：meathill[at]gmail.com。谢谢。


--------------------------------------------------------------------------------
/SUMMARY.md:
--------------------------------------------------------------------------------
 1 | # Summary
 2 | 
 3 | * [前言](README.md)
 4 | * [异步的问题](01-issues-of-async.md)
 5 |     * [异步的起源](01-1-start.md)
 6 |     * [异步的问题](01-2-issue.md)
 7 |     * [异步的发展](01-3-growing.md)
 8 | * [Promise 方案](02-promise-intro.md)
 9 |     * [Promise 入门](02-1-promise-basic.md)
10 |     * [Promise 小测验](02-2-promise-test.md)
11 |     * [Promise 错误处理](02-3-promise-error.md)
12 |     * [Promise 进阶](02-04-promise-advanced.md)
13 | * [Async Functions 方案](03-async-function.md)
14 |     * [Async Functions VS Promise](03-1-async-function-vs-promise.md)
15 |     * [Async 小测验](03-2-async-test.md)
16 | * [一起实战吧](04-lets-do-it.md)
17 |     * [降级](04-1-downgrade.md)
18 |     * [小程序](04-2-xiaochengxu.md)
19 |     * [其它场景](04-3-other.md)
20 |     * [Vuex](04-4-vuex.md)
21 | * [回顾](10-review.md)
22 | 
23 | ## 其它
24 | 
25 | * [反馈意见](https://github.com/meathill/javascript-async-tutorial/issues)
26 | * [更新记录](CHANGELOG.md)
27 | * [待增补内容](TODO.md)
28 | 


--------------------------------------------------------------------------------
/TODO.md:
--------------------------------------------------------------------------------
1 | 待增补内容
2 | ========
3 | 
4 | 这里主要放日常看到，但暂时写不进去的内容。
5 | 


--------------------------------------------------------------------------------
/book.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "plugins": ["disqus", "github"],
 3 |   "pluginsConfig": {
 4 |     "disqus": {
 5 |       "shortName": "js-async-tutorial"
 6 |     },
 7 |     "github": {
 8 |       "url": "https://github.com/meathill/javascript-async-tutorial"
 9 |     }
10 |   }
11 | }


--------------------------------------------------------------------------------
/code/2-3-1-catch.js:
--------------------------------------------------------------------------------
 1 | new Promise( resolve => {
 2 |   setTimeout( () => {
 3 |     resolve();
 4 |   }, 2000);
 5 |   throw new Error('bye');
 6 | })
 7 |   .then( value => {
 8 |     console.log( value + ' world');
 9 |   })
10 |   .catch( error => {
11 |     console.log( 'Error: ', error.message);
12 |   });


--------------------------------------------------------------------------------
/code/2-3-2-catch.js:
--------------------------------------------------------------------------------
 1 | new Promise( resolve => {
 2 |   setTimeout( () => {
 3 |     throw new Error('bye');
 4 |   }, 2000);
 5 | })
 6 |   .then( value => {
 7 |     console.log( value + ' world');
 8 |   })
 9 |   .catch( error => {
10 |     console.log( 'It\'s an Error: ', error.message);
11 |   });
12 | 
13 | // ./code/2-3-catch-error.js:3
14 | //     throw new Error('bye');
15 | //     ^
16 | 
17 | // Error: bye
18 | //     at Timeout.setTimeout [as _onTimeout] (/Users/meathill/Documents/Book/javascript-async-tutorial/code/2-3-catch-error.js:3:11)
19 | //     at ontimeout (timers.js:488:11)
20 | //     at tryOnTimeout (timers.js:323:5)
21 | //     at Timer.listOnTimeout (timers.js:283:5)


--------------------------------------------------------------------------------
/gulpfile.js:
--------------------------------------------------------------------------------
 1 | const fs = require('fs');
 2 | const util = require('util');
 3 | const gulp = require('gulp');
 4 | const del = require('del');
 5 | const sequence = require('run-sequence');
 6 | const concat = require('gulp-concat');
 7 | 
 8 | const TO = 'build/';
 9 | const readFile = util.promisify(fs.readFile);
10 | 
11 | gulp.task('clear', () => {
12 |   del(TO);
13 | });
14 | 
15 | gulp.task('gitchat', async () => {
16 |   let summary = await readFile('./SUMMARY.md');
17 |   let chapters = /\]\(([^)]+\.md)\)/g[Symbol.match](summary)
18 |     .map(chapter => chapter.slice(2, -1));
19 |   return gulp.src(chapters)
20 |     .pipe(concat('all.md', {
21 |       newLine: '\n\r'
22 |     }))
23 |     .pipe(gulp.dest(TO + 'gitchat/'));
24 | });
25 | 
26 | gulp.task('default', callback => {
27 |   sequence(
28 |     'clear',
29 |     'gitchat',
30 |     callback
31 |   );
32 | });


--------------------------------------------------------------------------------
/package-lock.json:
--------------------------------------------------------------------------------
1 | {
2 |   "name": "javascript-async-tutorial",
3 |   "version": "0.1.0",
4 |   "lockfileVersion": 1
5 | }
6 | 


--------------------------------------------------------------------------------
/package.json:
--------------------------------------------------------------------------------
 1 | {
 2 |   "name": "javascript-async-tutorial",
 3 |   "version": "0.1.0",
 4 |   "description": "a full tutorial for javascript async coding",
 5 |   "main": "index.js",
 6 |   "scripts": {
 7 |   },
 8 |   "repository": {
 9 |     "type": "git",
10 |     "url": "git+ssh://git@bitbucket.org/meathillbooks/javascript-async-tutorial.git"
11 |   },
12 |   "keywords": [],
13 |   "author": "Meathill <meathill@gmail.com> (http://meathill.com/)",
14 |   "license": "CC-NY-NC-4.0",
15 |   "homepage": "https://bitbucket.org/meathillbooks/javascript-async-tutorial#readme",
16 |   "devDependencies": {}
17 | }
18 | 


--------------------------------------------------------------------------------
/qa.md:
--------------------------------------------------------------------------------
  1 | 2017-07-05 GitChat 答疑交流
  2 | ========
  3 | 
  4 | ## 1. 异步函数在 gulp 里的应用？
  5 | 
  6 | **答：**
  7 | 
  8 | 我们知道，gulp 在需要顺序执行的时候，有三个方式：
  9 | 
 10 | 1. 调用 callback
 11 | 2. 返回一个 stream 或者 vinyl file
 12 | 3. 返回一个 Promise 对象
 13 | 
 14 | 所以这个时候，应用异步函数再合适不过
 15 | 
 16 | ```javascript
 17 | gulp.task('task', async () => {
 18 |   let readFile = util.promisify(fs.readFile);
 19 |   let content = await readFile('sfbj.txt');
 20 |   content = content.replace('old', 'new');
 21 |   return content;
 22 | });
 23 | ```
 24 | 
 25 | ## 2. 异步函数在 H5 项目中的应用？
 26 | 
 27 | **答：**
 28 | 
 29 | H5 项目中，动画的比重很大，有些动画有顺序要求，这个时候，用 Promise 来处理就非常合适。
 30 | 
 31 | 这里提供一个我写的函数供大家参考：
 32 | 
 33 | ```javascript
 34 | function isTransition(dom) {
 35 |   let style = getComputedStyle(dom).getPropertyValue('transition');
 36 |   return style !== 'all 0s ease 0s';
 37 | }
 38 | 
 39 | export function next(dom) {
 40 |   let eventName = isTransition(dom) ? 'transitionend' : 'animationend';
 41 |   return new Promise(resolve => {
 42 |     dom.addEventListener(eventName, function handler(event) {
 43 |       dom.removeEventListener(eventName, handler);
 44 |       resolve(event);
 45 |     }, false);
 46 |   });
 47 | }
 48 | ```
 49 | 
 50 | 这个函数会根据元素的样式判定是使用 `transition` 动画还是 `animation` 动画，然后侦听响应事件，在事件结束后，执行下一步。
 51 | 
 52 | 使用的时候，可以先把写好的动画样式绑上去，然后侦听：
 53 | 
 54 | ```javascript
 55 | this.actions = next(loading)
 56 |   .then(() => {
 57 |     el.classList.remove('enter');
 58 |   })
 59 |   .then(() => {
 60 |     wukong.classList.add('in');
 61 |     wukong.style.transform = 'translate3d(0,0,0)';
 62 |     return next(wukong);
 63 |   })
 64 |   .then(() => {
 65 |     let bufu = this.queue.getResult('bufu');
 66 |     bufu.className = 'bufu fadeInUp animated';
 67 |     el.appendChild(bufu);
 68 |     return next(bufu);
 69 |   })
 70 |   .then(() => {
 71 |     let faxing = this.queue.getResult('faxing');
 72 |     faxing.className = 'faxing fadeInUp animated';
 73 |     el.appendChild(faxing);
 74 |     return next(faxing);
 75 |   })
 76 |   .then(() => {
 77 |     let bg = this.queue.getResult('homepage');
 78 |     bg.className = 'bg fadeIn animated';
 79 |     el.insertBefore(bg, el.firstChild);
 80 |     return next(bg);
 81 |   });
 82 | ```
 83 | 
 84 | 在这种场景，使用 Promise 会比使用异步函数更方便维护。
 85 | 
 86 | ## 3. promise有什么缺陷，await是怎么解决的？
 87 | 
 88 | **答：**
 89 | 
 90 | Promise 的特性之一，便是：不增加新的语言元素，在现有语言框架下解决问题。
 91 | 
 92 | 所以，Promise 只能解决代码不好阅读，不易维护的问题，面对语言本身的问题，它也无能为力。
 93 | 
 94 | 这个问题，就是异步回调在执行的时候，会切断前后栈的联系。
 95 | 
 96 | 在文章的第一章，第二小节，对这个问题有很具体的描述。
 97 | 
 98 | (摘原文)
 99 | 
100 | 异步函数（await/async）是新的语法，改变了运行时，所以可以继续检索堆栈，完全不会有这方面的问题。
101 | 
102 | ## 4. 异步编程在前后端分离的场景下，主要有哪些作用？前后端分离下的API该如何管理才合理？
103 | 
104 | 这个问题我有点懵，在我看来，尤其是前后端分离的场景，几乎都必须要用异步编程来处理，Promise 和异步函数在这里都能发挥巨大的作用。
105 | 
106 | 比如，一个后台，用户打开后，应该判断用户的登录状态，然后取用户的设置、用户的消息、用户的代办事项等，写成伪代码就是：
107 | 
108 | ```javascript
109 | let user = new User();
110 | async function onLoad() {
111 |   let info = await checkUserStatus();
112 |   if (info) {
113 |     user.info = info;
114 |   } else {
115 |     router.go('/login');
116 |     user.info = await login();
117 |   }
118 |   user.settings = await getUserSettings();
119 |   user.messages = await getUserMessages();
120 |   user.todos = await getUserTodos();
121 |   ....
122 | }
123 | 
124 | onLoad();
125 | ```
126 | 
127 | ## 5. 有了Async还有无必要学习Generator？
128 | 
129 | 坦白说，我认为，没有。我还没遇到非用 Generator 才能解决的问题，也没有遇到过用 generator 能解决的更漂亮的问题
130 | 
131 | 如果你现在时间比较紧张，我建议先从 Promise -> 异步函数学起。将来有时间再学不迟。
132 | 
133 | ## 6. 初始化数据库时, 需要队列来保证代码按照步骤执行, 期间也需要捕获错误, 请问老师, 这个场景Async还是Promise较好呢？
134 | 
135 | 这个问题我觉得比较好，哈哈。
136 | 
137 | 不过回答这个问题比较困难，还是要看场景。我们不妨再对比一下 Promise 和异步函数的优劣（第3章第二节）：
138 | 
139 | Promise 的优势：**身为队列，可以向任何地方传递。**
140 | 
141 | 异步函数的优势：**好写好读，方便调试。**
142 | 
143 | 所以我认为这里是，如果你会有后续操作，比如在建立数据库连接的时候允许用户操作，那么 Promise 队列可能更合适，因为你可以把用户操作追加在队列后面，很方便，不需要你管理连接的状态；否则的话，可能异步函数更合适，少写就是力量。
144 | 
145 | ## 7. （问题3）请问老师，这里的“启用一个新栈”，可以理解为eventloop么？JS引擎返回的回调函数的结果，不会push到原程序运行的栈内么？
146 | 
147 | 很好的问题，切中本质。
148 | 
149 | 首先，不能理解成 eventloop，eventloop 其实是方便用户操作设计的，它是“等待消息，处理消息”两者的循环往复，和 Node.js 里的时间回调有很大不同。后者更接近的模型是 jQuery 的 jsonp。我们要把 Node.js 看成两部分：V8 和其它，所以这里的异步回调是把回调函数的引用丢给 V8，然后“其它”完成操作后，要求 V8 调用之前注册的回调函数。
150 | 
151 | 然后我们又要回归栈的本质：先进后出。比如下面这段代码：
152 | 
153 | ```javascript
154 | function b() {
155 |   doAsync(); // 异步函数
156 |   let abc = 123;
157 |   return abc;
158 | }
159 | function a() {
160 |   b();
161 |   return 123;
162 | }
163 | a();
164 | ```
165 | 
166 | 如果我们要保证异步的执行，即 `let abc = 123` 及之后的执行，就必须正常让函数 `doAsync` 出栈，然后 `b` 出栈，然后 `a` 出栈。所以回调函数的结果，是很难直接 push 到原先的栈中的。
167 | 
168 | 当然现在问题解决了，不过我没有去看里面的实现，将来有机会看了再分享一次。


--------------------------------------------------------------------------------