创建Promise实例
promise是一个内置构造函数,接收一个执行函数(executor)作为参数
const promise = new Promise(() => {
})
console.log(promise) // Promise {<pending>}
参数函数接收两个形参:resolve,reject
这两个形参也是函数,resolve()调用表示成功,reject()调用表示失败
const promise = new Promise((resolve,reject) => {
resolve('yes');
})
console.log(promise) // Promise {<fulfilled>: 'yes'}
而resolve和reject函数就是我们在之后要做的事
这时需要使用promise实例上的then方法,then有两个参数,分别对应ersolve和reject
在上面我们执行的是resolve,就会调用then中的第一个函数,并将实参 yes' 传给形参data
// promise.then(f1, f2)
promise.then(
(data) => {
console.log(data);
},
(reason) => {
console.log(reason);
}
)
promise的三个状态
promise有三个状态:默认状态/等待态(pending)、成功态(fulfilled)、失败态(rejected)
new Promise之后,是等待态,调用resolve()之后,是成功态,调用reject()之后,是失败态
这个状态决定了then执行then中的哪个回调函数,等待态时,then不执行任何函数
失败了就不再会执行then中resolve()对应的回调函数
成功了就不再会执行then中reject()对应的回调函数
也就是说,resolve和reject只会执行其中一个,并且状态为成功或失败时不会再次改变
下面的示例中,只会打印 'yes'
因为当调用resolve(1)之后,promise的状态被确定为成功,后续的resolve或reject将不再执行
const promise = new Promise((resolve,reject) => {
resolve('yes')
reject('no')
})
promise.then(
data => {
console.log(data)
},
reason => {
console.log(reason)
}
)
then的链式调用
可以继续在then后面.then,因为then有返回值,而且是一个promise实例对象
const promise = new Promise((resolve,reject) => {
resolve('yes')
})
const promise1 = promise.then(
data => {
console.log(data)
}
)
console.log(promise1) // Promise {<pending>}
在then中的回调函数可以有返回值,返回值决定下个then执行哪个回调函数
当返回值为new Promise时,还是这个promise实例的resolve和reject来决定
当返回值为基本类型或复杂类型数据时,调用成功的回调,也就是第一个,参数就是该数据
当返回值为报错信息时,调用失败的回调,也就是第二个,参数为报错内容
在下面的示例中,返回了一个promise实例并执行了resolve,所以后面的then会调用第一个回调
const promise = new Promise((resolve,reject) => {
resolve('yes');
})
promise.then(
data => {
return new Promise(resolve,reject){
resolve('成功');
}
}
).then(
data => console.log(data),
reason => console.log(reason)
)