2.4. Promise#then
最后更新于：2022-04-01 21:10:35
在前面的章节里我们对Promise基本的实例方法 `then` 和 `catch` 的使用方法进行了说明。
这其中，我想大家已经认识了 `.then().catch()` 这种链式方法的写法了，其实在Promise里可以将任意个方法连在一起作为一个方法链（method chain）。
promise可以写成方法链的形式
~~~
aPromise.then(function taskA(value){
// task A
}).then(function taskB(vaue){
// task B
}).catch(function onRejected(error){
console.log(error);
});
~~~
如果把在 `then` 中注册的每个回调函数称为task的话，那么我们就可以通过Promise方法链方式来编写能以taskA → task B 这种流程进行处理的逻辑了。
Promise方法链这种叫法有点长（其实是在日语里有点长，中文还可以 --译者注），因此后面我们会简化为 [promise chain](http://liubin.github.io/promises-book/#promise-chain) 这种叫法。
Promise之所以适合编写异步处理较多的应用，promise chain可以算得上是其中的一个原因吧。
在本小节，我们将主要针对使用 `then` 的promise chain的行为和流程进行学习。
## 2.4.1\. promise chain
在第一章 [promise chain](http://liubin.github.io/promises-book/#promise-chain) 里我们看到了一个很简单的 then → catch 的例子，如果我们将方法链的长度变得更长的话，那在每个promise对象中注册的onFulfilled和onRejected将会怎样执行呢？
> promise chain - 即方法链越短越好。 在这个例子里我们是为了方便说明才选择了较长的方法链。
我们先来看看下面这样的promise chain。
promise-then-catch-flow.js
~~~
function taskA() {
console.log("Task A");
}
function taskB() {
console.log("Task B");
}
function onRejected(error) {
console.log("Catch Error: A or B", error);
}
function finalTask() {
console.log("Final Task");
}
var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected)
.then(finalTask);
~~~
上面代码中的promise chain的执行流程，如果用一张图来描述一下的话，像下面的图那样。
Figure 3\. promise-then-catch-flow.js附图
在 [上述代码](http://liubin.github.io/promises-book/#promise-then-catch-flow.js) 中，我们没有为 `then` 方法指定第二个参数(onRejected)，也可以像下面这样来理解。
`then`
注册onFulfilled时的回调函数
`catch`
注册onRejected时的回调函数
再看一下 [上面的流程图](http://liubin.github.io/promises-book/#promise-then-catch-flow.png) 的话，我们会发现 _Task A_ 和 _Task B_ 都有指向 _onRejected_ 的线出来。
这些线的意思是在 _Task A_ 或 _Task B_ 的处理中，在下面的情况下就会调用 _onRejected_ 方法。
* 发生异常的时候
* 返回了一个Rejected状态的promise对象
在 [第一章](http://liubin.github.io/promises-book/#how-to-write-promise) 中我们已经看到，Promise中的处理习惯上都会采用 `try-catch` 的风格，当发生异常的时候，会被 `catch` 捕获并被由在此函数注册的回调函数进行错误处理。
另一种异常处理策略是通过 _返回一个Rejected状态的promise对象_ 来实现的，这种方法不通过使用 `throw` 就能在promise chain中对 `onRejected` 进行调用。
关于这种方法由于和本小节关系不大就不在这里详述了，大家可以参考一下第4章 [使用reject而不是throw](http://liubin.github.io/promises-book/#not-throw-use-reject) 中的内容。
此外在promise chain中，由于在 _onRejected_ 和 _Final Task_ 后面没有 `catch` 处理了，因此在这两个Task中如果出现异常的话将不会被捕获，这点需要注意一下。
下面我们再来看一个具体的关于 _Task A_ → _onRejected_ 的例子。
### Task A产生异常的例子
_Task A_ 处理中发生异常的话，会按照TaskA → onRejected → FinalTask 这个流程来进行处理。
Figure 4\. Task A产生异常时的示意图
将上面流程写成代码的话如下所示。
promise-then-taska-throw.js
~~~
function taskA() {
console.log("Task A");
throw new Error("throw Error @ Task A")
}
function taskB() {
console.log("Task B");// 不会被调用
}
function onRejected(error) {
console.log(error);// => "throw Error @ Task A"
}
function finalTask() {
console.log("Final Task");
}
var promise = Promise.resolve();
promise
.then(taskA)
.then(taskB)
.catch(onRejected)
.then(finalTask);
~~~
执行这段代码我们会发现 _Task B_ 是不会被调用的。
> 在本例中我们在taskA中使用了 `throw` 方法故意制造了一个异常。但在实际中想主动进行onRejected调用的时候，应该返回一个Rejected状态的promise对象。关于这种两种方法的异同，请参考 [使用reject而不是throw](http://liubin.github.io/promises-book/#not-throw-use-reject) 中的讲解。
## 2.4.2\. promise chain 中如何传递参数
前面例子中的Task都是相互独立的，只是被简单调用而已。
这时候如果 Task A 想给 Task B 传递一个参数该怎么办呢？
答案非常简单，那就是在 Task A 中 `return` 的返回值，会在 Task B 执行时传给它。
我们还是先来看一个具体例子吧。
promise-then-passing-value.js
~~~
function doubleUp(value) {
return value * 2;
}
function increment(value) {
return value + 1;
}
function output(value) {
console.log(value);// => (1 + 1) * 2
}
var promise = Promise.resolve(1);
promise
.then(increment)
.then(doubleUp)
.then(output)
.catch(function(error){
// promise chain中出现异常的时候会被调用
console.error(error);
});
~~~
这段代码的入口函数是 `Promise.resolve(1);` ，整体的promise chain执行流程如下所示。
1. `Promise.resolve(1);` 传递 1 给 `increment` 函数
2. 函数 `increment` 对接收的参数进行 +1 操作并返回（通过`return`）
3. 这时参数变为2，并再次传给 `doubleUp` 函数
4. 最后在函数 `output` 中打印结果
Figure 5\. promise-then-passing-value.js示意图
每个方法中 `return` 的值不仅只局限于字符串或者数值类型，也可以是对象或者promise对象等复杂类型。
return的值会由 `Promise.resolve(return的返回值);` 进行相应的包装处理，因此不管回调函数中会返回一个什么样的值，最终 `then` 的结果都是返回一个新创建的promise对象。
> 关于这部分内容可以参考 [专栏: 每次调用then都会返回一个新创建的promise对象](http://liubin.github.io/promises-book/#then-return-new-promise) ，那里也对一些常见错误进行了介绍。
也就是说， `Promise#then` 不仅仅是注册一个回调函数那么简单，它还会将回调函数的返回值进行变换，创建并返回一个promise对象。
';