1 Promise是什么
- 抽象:是js中进行异步编程的新方案(旧方案就是纯回调)
- 具体:
从语法上说: 是一个构造函数;
从功能上来说:promise对象用来封装异步操作并可以获取其结果;
2 为什么用Promise
1.指定回调函数的方式更加灵活;
旧的:必须在启动异步任务前
promise:启动异步任务 =>返回promise对象 =>给promise对象绑定回调函数(甚至可以在异步任务结束后指定)
2.支持链式调用,可以解决回调地狱问题
回调地狱:回调函数嵌套调用,外部回调函数异步执行结果是嵌套的回调函数执行的条件,
缺点:不便于阅读,不便于异常处理
解决方案:promise链式调用
终极解决方案:async/await
//回调地狱
dosomething(function(result)) {}
// 使用promise的链式调用解决回调地狱
// async/await 解决回调地狱的终极方案
3 怎么用Promise
见官方文档
4 promise关键问题
- 如何改变状态:
- (1) resolve(value):如果当前是pending就会变为resolve;
- (2) reject(reason): 如果当前是pending就会变为rejected;
- (3) 抛出异常:如果当前是pending就会变为rejected;
- 一个promise指定多个成功/回调函数,都会调用么?
当promise改变为对应状态时都会调用
const p = new Promise((resolve, reject) => {
resolve(1) // promise变为resolved状态
reject(2) // promise变为rejected失败状态
throw new Error("出错了") // 抛出异常,promise变为rejected失败状态,reason为抛出的error
throw 3 // 抛出异常, promise变为rejected失败装填,reason为抛出3
})
p.then(
value => {},
reason => {console.log('reason', reason)}
)
p.then(
value => {},
reason => {console.log('reason2', reason)} // 和上一个一起调用,先输出reason,再输出reason2
)
- 改变promise状态和指定回调函数谁先谁后?
(1)都有可能,正常情况下是先指定回调在改变状态, 但也可以先改状态再指定回调
// 常规:先指定回调函数,后改变状态
new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变状态(同时指定数据),异步执行回调
}, 1000)}).then( // 先指定回调函数,保存当前指定的回调函数
value => {},
reason => {console.log('reason1', reason)}
)
(2) 如何先改状态再指定回调?
- 在执行器中直接调用resolve()/reject()
- 延迟更长时间才调用then()
// 如何先改变状态,后指定回调函数(1)
new Promise((resolve, reject) => {
resolve(1) / 先改变状态(同时指定数据
}).then( // 后指定回调函数,异步执行回调函数
value => {console.log('value2',value2)},
reason => {console.log('reason2', reason)}
)
// 如何先改变状态,后指定回调函数(2)
const p =new Promise((resolve, reject) => {
setTimeout(() => {
resolve(1) // 后改变状态(同时指定数据),异步执行回调
}, 1000)})
setTimeout(p.then( // 后指定回调函数,异步执行回调函数
value => {console.log('value2',value2)},
reason => {console.log('reason2', reason)}
), 1100)
(3) 什么时候才能得到数据?
- 如果先指定的回调,那当状态发生改变时,回调函数就会调用,得到数据
- 如果先改变的状态,那当指定回调时,回调函数就会调用,得到数据
- promise.then()返回的新promise的结果状态由什么决定?
- 简单表达:由then()指定的回调函数执行的结果决定
- 详细表达:
如果抛出异常,新promise变为rejected,reason为抛出的异常;
如果返回的是非promise的任意值,新promise变为resolved,value为返回的值;
如果返回的是另一个新promise,此promise的结果就会成为新promise的结果
- promise如何串连多个操作任务?
- promise的then()返回一个新的promise,可以开成then()的链式调用
- 通过then的链式调用串连多个同步/异步任务
new Promise((resolve, reject) => {
setTimeout(() > {
console.log(‘执行任务1(异步)')
resolve(1)
}, 1000)
}).then(
value => {
console.log('任务1结果:’, value)
console.log('执行任务2(同步)’)
return 2
}
).then(
value => {
console.log('任务2结果:’, value)
return new Promise((resolve, reject) => {
setTimeout(() => {
console.log('执行任务3(异步)’)
resolve(3)
}, 1000)
})
}
).then(
value => {
console.log('任务3的结果:', value)
}
)
// 结果
执行任务1(异步)'
任务1结果:1
执行任务2(同步)
任务2结果:2
执行任务3(异步)
任务3的结果: 3
- promise异常穿透?
- 当使用promise的then链式调用时,可以在最后指定失败的回调;
- 前面任何操作出了异常,都会到最后失败的回调中处理;
new Promise((resolve, reject) => {
resolve(1)
}).then(
value => {
console.log('onResolved1()', value)
return 2
}
// 没写失败回调,相当于 reason => { throw error }
).then(
value => {
console.log('onResolved2()', value)
}
// 没写失败回调,相当于 reason => { throw error }
).then(
value => {
console.log('onResolved3(), value)
}
// 没写失败回调,相当于 reason => { throw error }
).catch(() => {
// 一层一层,最终会走到这里,如果中间有异常处理,就不会走到这里
console.log('onRejected(), value)
})
- 中断promise链?
- 当使用promise的then链式调用时,在中间中断,不再调用后面的回调函数
- 办法:在回调函数中返回一个pending状态的promise对象
new Promise((resolve, reject) => {
resolve(1)
}).then(
value => {
console.log('onResolved1()', value)
return 2
}
// 没写失败回调,相当于 reason => { throw error }
).then(
value => {
console.log('onResolved3(), value)
}
return new Promise(() => {}) // 一直没有结果,promise状态一直为pending,就会中断后 面的回调了
).then(() => {
console.log('onResolve(), value)
})