JavaScript Guidebook

JavaScript 完全知识体系

Promise.prototype.then

Promise.prototype.then() 用于 Promise 实例添加状态改变时执行的函数。

语法

语法:

promiseInstance.then(onfulfilled, onrejected);

类型声明:

interface Promise<T> {
then<TResult1 = T, TResult2 = never>(
onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null
): Promise<TResult1 | TResult2>;
}

参数说明:

参数说明
onfulfilled当 Promise 变成 Fulfilled 状态时,该参数作为回调函数被调用。
该函数有一个参数,即接受的最终结果。如果传入 onfulfilled 作为参数的参数类型不是函数,则会被内部转换为 (x) => x,即原样返回 Promise 最终结果的函数。
onrejected当 Promise 变成 Rejected 状态时,该参数作为回调函数被调用。
该函数有一个参数,即拒绝的原因。

代码示例

基本用法

const promise = new Promise((resolve, reject) => {
resolve('Fulfilled');
});
promise.then(
(res) => console.log(res), // Output: 'Fulfilled'
(rej) => console.log(rej)
);

链式调用

采用链式调用的 .then(),可以指定一组按照次序调用的回调函数。这时,前一个回调函数,有可能返回的还是一个 Promise 对象(即有异步操作),这时后面紧跟的回调函数,就会等待该 Promise 对象的状态发生变化,才会被调用。

getJSON('/post/1.json')
.then((post) => getJSON(post.commentURL))
.then(
(comments) => console.log('resolved: ', comments),
(err) => console.log('rejected: ', err)
);

参数传递

链式调用中,一个 .then() 执行完成后返回新创建的 Promise 对象,并继续执行下一个 .then() 方法,当上一个 .then() 需要传递参数到下一个参数时,可以这样操作。

// Example
function foo(value) {
return value * 2;
}
function bar(value) {
return value + 5;
}
function baz(value) {
console.log(value);
}
const promise = Promise.resolve(1);
promise
.then(foo)
.then(bar)
.then(baz)
.catch((error) => console.log(err));

执行流程分析:

  1. 这段代码的入口函数是 Promise.resolve(1)
  2. Promise.resolve(1) 传递参数 1foo 函数
  3. 函数 foo 对接收的参数进行操作并返回
  4. 这时参数为 2 传递给函数 bar
  5. 最后在函数 baz 中打印结果 7

每个方法中 return 的值不仅只局限于字符串或者数值类型,也可以是对象或者 Promise 对象等复杂类型。

return 的值会由 Promise.resolve 进行相应的包装处理,因此不管回调函数中会返回一个什么样的值,最终 .then() 的结果都是返回一个新创建的 Promise 对象。