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()
需要传递参数到下一个参数时,可以这样操作。
// Examplefunction 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));
执行流程分析:
Promise.resolve(1)
Promise.resolve(1)
传递参数 1
给 foo
函数foo
对接收的参数进行操作并返回2
传递给函数 bar
baz
中打印结果 7
每个方法中 return
的值不仅只局限于字符串或者数值类型,也可以是对象或者 Promise 对象等复杂类型。
return
的值会由 Promise.resolve 进行相应的包装处理,因此不管回调函数中会返回一个什么样的值,最终 .then()
的结果都是返回一个新创建的 Promise 对象。