1 :如何改变 promise
的状态
基本方法有以下三种
-
resolve(value)
: 当前是pending
状态时会变成resolved
-
reject(reason)
: 当前是pending
状态时会变成rejected
- 抛出异常(主动抛出或者系统抛出): 当前是
pending
状态时会变成rejected
const p = new Promise((resolve, reject) => {
// resolve(1) // promise改变为resolved状态
// reject(2) // promise改变为 rejected状态
throw new Error('3') // promise 改变为 rejected 状态 reason 为3
// throw 4 // // promise 改变为 rejected 状态 reason 为4
})
2: 一个 promise
被指定多个成功/失败回调函数,都会调用么?
- 当
promise
改变为对应状态时都会被调用
p.then(v => {
console.log('value1', v)
}).catch(err => {
console.log('reason1', err)
})
p.then(v => {
console.log('value2', v)
}).catch(err => {
console.log('reason2', err)
})
p2 被制定了两个成功和失败的回调,实际上两个都会被调用
3: 改变 promise
状态和指定回调函数谁先谁后呢?
- 都有可能,正常情况下是先指定回调再改变状态,但是也可以先改变状态再指定回调
- 正常情况:先指定回调函数再改变状态
new Promise((resolve, reject) => { setTimeout(() => { resolve('然后再改变状态,再异步执行回调函数') }) }).then(v => { console.log('then的时候先指定回调函数,先保存当前指定的回调函数') }).catch(err => { console.log('then的时候先指定回调函数,先保存当前指定的回调函数') })
- 那如何先改变转改在指定回调呢?
// 方法1: // 上面代码做下修改, 同步改变状态,同步指定回调函数,(.then()是同步执行) new Promise((resolve, reject) => { resolve('先改变状态,存起来') }).then(v => { console.log('后指定回调函数,然后异步调用回调函数') }).catch(err => { console.log('后指定回调函数,然后异步调用回调函数') }) // 方法2: 不常用 const p1 = new Promise((resolve, reject) => { setTimeout(() => { resolve('1秒后返回数据') },1000) }) setTimeout(() => { p1.then(v => { console.log('1.5秒后.then()') }).catch(err => { console.log('1.5秒后.then()') }) } , 1500)
4: promise.then()
返回的新 promise
结果状态由什么决定?
-
简单说: 由
then()
指定的回调函数执行的结果决定 -
详细点说:
- 如果抛出异常, 则新的
promise
变为rejected
,reason
为抛出的异常 - 如果返回是非
promise
的任意值,新promise
变为resolved
,value
为返回值 - 如果返回是一个新的
promise
, 此promise
返回值就是新的promise
的结果
- 如果抛出异常, 则新的
new Promise((resolve, reject) => {
resolve('1')
}).then(v => {
console.log('v1',v)
}).then(v => {
console.log('v2',v)
})
// v1, 1
// v2, undefined
5: promise
如何串联多个操作任务
-
promise
的then()
返回一个新的promise
,可以看成then()
的链式调用 - 通过
then
的链式调用串联过个同步或者异步任务
new Promise((resolve, reject) => {
setTimeout(() => { // setTimeout 模拟异步任务
resolve('1')
},1000)
}).then(v => {
console.log('任务1结果,',v) // 直接 resolve 执行同步任务
return 2
}).then(v => {
console.log('任务2',v)
setTimeout(() => {
console.log('执行异步任务3')
return new Promise((resolve, reject) => {
resolve('3')
})
},1000)
}).then(v => {
console.log('任务3的结果: ',v)
})
6: promise
的异常穿透
- 当使用
then
链式调用时,可以在最后使用失败的回调 - 前面任何操作出现了异常,都会传到最后的失败回调函数中
new Promise((resolve, reject) => {
// resolve('1')
reject(1)
}).then(v => {
console.log(v)
}).then(v => {
console.log(v)
}).then(v => {
console.log(v)
}).catch(err => {
console.log('失败的原因:',err)
})
// 失败的原因: 1
上面代码在第一个promis出错后并不是直接到.catch 方法中, 还是逐级处理最后到达的.catch 方法, 其实相当于:
new Promise((resolve, reject) => {
// resolve('1')
reject(1)
}).then(v => {console.log(v)}, r => {throw r})
.then(v => {console.log(v)}, r => Promise.reject(r))
.then(v => {console.log(v)}, r => {throw r})
.catch(err => {
console.log('失败的原因:',err)
})
7: 如何终端一个 promise
链
- 当使用
then
链式调用时,在中间中断,不再调用之后的回调函数 - 如何中断: 在回调函数中返回一个
pendding
状态的promise
new Promise((resolve, reject) => {
// resolve('1')
reject(1)
}).then(v => {
console.log(v)
}).then(v => {
console.log(v)
return new Promise(() => {}) // 返回一个 pending 状态的 promise
}).then(v => {
console.log(v)
}).catch(err => {
console.log('失败的原因:',err)
})