Promise 快完成了

Author: meathill

02-04-promise-advanced.md

@@ -0,0 +1,2 @@
+Promise 进阶
+========

02-1-promise-basic.md

@@ -129,4 +129,29 @@ Promise.resolve()
 
 ### 继续 `.then()` 的话题
 
-结合上一小节关于 Promise.resolve() 的讲解，我们应该可以推断出 `.then()` 里的状态响应函数不同返回结果对进程的影响了吧。
+结合上一小节关于 Promise.resolve() 的讲解，我们应该可以推断出 `.then()` 里的状态响应函数返回不同结果对进程的影响了吧。
+
+好的，那我们换一个思路，假如一个 Promise 已经完成了，再给它加一个 `.then()`，会是什么效果呢？我们来试一下。
+
+```javascript
+let promise = new Promise(resolve => {
+  setTimeout(() => {
+    console.log('the promise fulfilled');
+    resolve('hello, world');
+  }, 1000);
+});
+
+setTimeout(() => {
+  promise.then( value => {
+    console.log(value);
+  });
+}, 3000);
+
+// 输出
+// （1秒后）the promise fulfilled
+// （3秒后）hello, world
+```
+
+1秒后，Promise 完成；3秒后，给它续上一个 `.then()`，因为它已经处于 `fulfilled` 状态，所以立刻执行响应函数，输出“hello, world”。
+
+这一点很值得我们关注。Promise 从队列操作中脱胎而成，带有很强的队列属性。异步回调开始执行后，我们无法追加操作，也无法判定结束时间。而使用 Promise 的话，我们就可以不关心它什么时候开始什么时候结束，只需要在队列后面追加操作即可。

02-2-promise-advanced.md

@@ -0,0 +1,132 @@
+Promise 小测验
+========
+
+好的，我们已经初步了解了 Promise 的使用方式，了解了 `.then()` 怎么处理响应函数，返回新的 Promise 实例。接下来我们看一个小测验，看看大家的掌握程度。
+
+> 下面这道题出自 [We have a problem with promises](https://pouchdb.com/2015/05/18/we-have-a-problem-with-promises.html)
+
+**问题：下面的四种 promises 的区别是什么？**
+
+我们假定 `doSomething()` 和 `doSomethingElse()` 都会返回 Promise 对象。
+
+```javascript
+// #1
+doSomething().then(function () {
+  return doSomethingElse();
+});
+
+// #2
+doSomething().then(function () {
+  doSomethingElse();
+});
+
+// #3
+doSomething().then(doSomethingElse());
+
+// #4
+doSomething().then(doSomethingElse);
+```
+
+仔细看一看，默想一下答案，不要着急往下翻。
+
+好，准备好了么？我们继续了哟。
+
+3...
+
+2..
+
+1.
+
+## 答案揭晓
+
+### 第一题
+
+```javascript
+doSomething()
+  .then(function () {
+    return doSomethingElse();
+  })
+  .then(finalHandler);
+```
+
+答案：
+
+```
+doSomething
+|-----------|
+            doSomethingElse(undefined)
+            |------------|
+                         finalHandler(resultOfDoSomethingElse)
+                         |------------|
+```
+
+这道题比较简单，几乎和前面的例子一样，我就不多说了。
+
+### 第二题
+
+```javascript
+doSomething()
+  .then(function () {
+    doSomethingElse();
+  })
+  .then(finalHandler);
+```
+
+答案：
+
+```
+doSomething
+|-----------------|
+                  doSomethingElse(undefined)
+                  |------------------|
+                  finalHandler(undefined)
+                  |------------------|
+```
+
+这道题就有一定难度了。虽然 `doSomethingElse` 会返回 Promise 对象，但是因为 `.then()` 的响应函数并没有把它 `return` 出来，所以这里其实相当于 `return null`。我们知道，`Promise.resolve()` 在参数为空的时候会返回一个状态为 `fulfilled` 的 Promise，所以这里两步是一起执行的。
+
+### 第三题
+
+```javascript
+doSomething()
+  .then(doSomethingElse())
+  .then(finalHandler);
+```
+
+答案：
+
+```
+doSomething
+|-----------------|
+doSomethingElse(undefined)
+|---------------------------------|
+                  finalHandler(resultOfDoSomething)
+                  |------------------|
+```
+
+这一题的语法陷阱也不小。首先，`doSomethingElse` 和 `doSomethingElse()` 的区别在于，前者是一个变量，引用一个函数；而后者是则是直接执行了函数，并返回其返回值。所以这里 `doSomethingElse` 立刻就开始执行了，和前面 `doSomething` 的启动时间相差无几，可以忽略不计。然后，按照 Promise 的设计，当 `.then()` 的参数不是函数的时候，这一步会被忽略不计，所以 `doSomething` 完成后就跳去执行 `finalHandler` 了。
+
+### 第四题
+
+```javascript
+doSomething()
+  .then(doSomethingElse)
+  .then(finalHandler);
+```
+
+答案：
+
+```
+doSomething
+|-----------|
+            doSomethingElse(resultOfDoSomething)
+            |------------|
+                         finalHandler(resultOfDoSomethingElse)
+                         |------------------|
+```
+
+这一题比较简单，就不解释了。
+
+--------
+
+怎么样？都答对了么？还是有点小难度的，对吧？

02-2-promise-test.md

@@ -0,0 +1,93 @@
+Promise 进阶
+========
+
+我们继续学习 Promise。
+
+## 错误处理
+
+Promise 会自动捕获内部异常，并交给 `rejected` 响应函数处理。比如下面这段代码：
+
+```javascript
+new Promise( resolve => {
+  setTimeout( () => {
+    throw new Error('bye');
+  }, 2000);
+})
+  .then( value => {
+    console.log( value + ' world');
+  })
+  .catch( error => {
+    console.log( 'Error: ', error.message);
+
+// 输出：
+// （2秒后）Error: bye
+//     at Timeout.setTimeout [as _onTimeout] (/path/to/error.js:7:11)
+//     at ontimeout (timers.js:488:11)
+//     at tryOnTimeout (timers.js:323:5)
+//     at Timer.listOnTimeout (timers.js:283:5)
+```
+
+可以看到，2秒之后，因为在 Promise 的执行器里抛出了错误，所以跳过了 `.then()`，进入 `.catch()` 处理异常。
+
+正如我们前面所说，`.then(fulfilled, reject)` 其实接收两个参数，分别作为成功与失败的回调。不过在实践中，我更推荐上面的做法，即不传入第二个参数，而是把它放在后面的 `.catch()` 里面。这样有两个好处：
+
+1. 更加清晰，更加好读
+2. 可以捕获前面所有 `.then()` 的错误，而不仅是这一步的错误
+
+> 在小程序里需要注意，抛出的错误会被全局捕获，而 `.catch` 反而不执行，所以该用两个参数还是要用。
+
+## 更复杂的情况
+
+当队列很长的时候，情况又如何呢？我们看一段代码：
+
+```javascript
+new Promise(resolve => {
+  setTimeout(() => {
+    resolve();
+  }, 1000);
+})
+  .then( () => {
+    console.log('start');
+    throw new Error('test error');
+  })
+  .catch( err => {
+    console.log('I catch: ', err);
+
+    // 下面这一行的注释将引发不同的走向
+    // throw new Error('another error');
+  })
+  .then( () => {
+    console.log('arrive here');
+  })
+  .then( () => {
+    console.log('... and here');
+  })
+  .catch( err => {
+    console.log('No, I catch: ', err);
+  });
+
+// 输出：
+// start
+// I catch: test err
+// arrive here
+// ... and here
+```
+
+实际上，`.catch()` 仍然会使用 `Promise.resolve()` 返回其中的响应函数的执行结果，与 `.then()` 并无不同。所以 `.catch()` 之后的 `.then()` 仍然会执行，如果想彻底跳出执行，就必须继续抛出错误，比如把上面代码中的 `another error` 那行注释掉。这也需要大家注意。
+
+## 总结
+
+简单总结一下 Promise 的错误处理。与异步回调相比，它的作用略强，可以抛出和捕获，基本可以按照预期的状态执行。然而它仍然不是真正的 `try/catch/throw`，在队列很长的时候，捕获错误也很容易出错，所以还要小心。
+
+另外，所有执行器和响应函数里的错误都不会真正进入全局环境，所以我们有必要在所有队列的最后一步增加一个 `.catch()`，防止遗漏错误造成意想不到的问题。
+
+```javascript
+doSomething()
+  .doAnotherThing()
+  .doMoreThing()
+  .catch( err => {
+    console.log(err);
+  });
+```
+
+在 Node.js7 之后，没有捕获的 Promise 错误会触发一个 Warning，虽然不是很强，但也足够大家发现错误了。

02-3-promise-error.md

@@ -25,6 +25,8 @@
 
 范例代码中会使用 ES6 的一些语法，也会混用 ES6 Modules/CommonJS，请大家不要见怪。
 
+本文中所有代码均在 Node.js 8.1 上测试通过。
+
 ## 作者介绍
 
 大家好，我叫翟路佳，花名“肉山”，这个名字跟 Dota 没关系，从高中起伴随我到现在。

README.md

@@ -6,8 +6,10 @@
     * [异步的问题](01-2-issue.md)
     * [异步的发展](01-3-growing.md)
 * [Promise 方案](02-promise-intro.md)
-    * [Promise 详解](02-1-promise-basic.md)
-    * [Promise 进阶](02-2-promise-advanced.md)
+    * [Promise 入门](02-1-promise-basic.md)
+    * [Promise 小测验](02-2-promise-test.md)
+    * [Promise 错误处理](02-2-promise-error.md)
+    * [Promise 进阶](02-04-promise-advanced.md)
 * [Async Functions 方案](03-await-async.md)
     * [Async Functions 和 Promise 的异同](03-1-difference-between-await-async-and-promise.md)
 * [一起实战吧](04-lets-do-it.md)