Promise是什么
理解
1.抽象表达:
promise是一门新的技术(ES规范)
Promise是JS中进行异步编程的新解决方案
注:旧方案是单纯的使用回调函数
2.具体表达:
从语法上来说:Promise是一个构造函数
从功能上来说:Promise对象用来封装一个异步操作并可以获取其成功/失败的结果
promise的状态改变
Promise变为resolved
Promise变为rejected
且一个Promise对象只能改变一次
无论是成功(value)还是失败(reason),都会有一个结果数据
promise基本流程
为什么要用Promise
指定回调函数的方式更加灵活
旧的:必须在启动异步任务前指定
promise:启动异步任务 => 返回promise对象 => 给promise对象绑定回调函数(深只可以在异步任务结束洪湖指定多个)
支持链式调用,可以解决回调地狱问题
1.什么是回调地狱?
回调函数嵌套函数,外部函数异步执行的结果是嵌套的回调执行的条件
2.回调地狱的缺点?
不便于阅读
不便于异常处理
3.解决方案?
promise链式调用
4.终极解决方案
async/await
如何使用Promise
使用1:基本编码流程
运行结果:
使用2:promise封装基于定时器的异步
API
.then方法 : (onResolved, onRejected)=> {}
onResolved函数:成功的回调函数 (value)=> {}
onRejected函数: 失败的回调函数 (reason)=> {}
.catch方法:(onRejected)=> {}
onRejected函数: 失败的函数回调(reason)=>{} ------只能接收失败的数据
.resolve方法:(value)=> {}
value: 成功的数据或promise对象
如果传入的参数时非promise对象 则返回的结果为成功的promise对象
如果传入的参数是promise对象,则 参数的结果决定了 resolve 的结果
.reject方法:(reason) => {}
reason: 失败的原因 (不管传入什么都会返回一个失败的promise)
.all方法:(promise) => {}
promise: 包含n个promise的数组 (返回一个新的promise,只有所有的promise都成功才成功,只要有一个失败了就直接失败)
.race 方法: (promise) => {}
promise: 包含 n 个 promise 的数组 (返回一个新的 promise, 第一个完成的 promise 的结果状态就是最终的结果状态)
promise关键问题
如何改变promise的状态
一个 promise 指定多个成功/失败回调函数, 都会调用吗?
当promise改变为对应状态时都会调用
promise如何串联多个操作任务
then()的链式调用
promise 异常传透?
(1) 当使用 promise 的 then 链式调用时, 可以在最后指定失败的回调,
(2) 前面任何操作出了异常, 都会传到最后失败的回调中处理
中断 promise 链?
(1) 当使用 promise 的 then 链式调用时, 在中间中断, 不再调用后面的回调函数
(2) 办法: 在回调函数中返回一个 pendding 状态的 promise 对象
async与await
asayc函数
函数的返回值为promise对象
promise对象的结果由async函数执行的返回值决定
await表达式
awiat右侧的表达式一般为promise对象 但也可以是其他的值
如果表达式是promise对象 await返回的是promise成功的值
如果表达式是其它值 直接将此值作为await的返回值
注意:
await必须写在async函数中 但async函数中可以没有await
如果await的promise失败了 就会抛出异常 需要通过try...catch捕获处理
<script>
function fn1() {
return Promise.resolve(13)
}
function fn2(){
return 2
}
function fn3() {
// return Promise.reject(3)
return fn3.test() //程序运行会抛出异常
}
function fn4(){
return fn3.test() //程序运行会抛出异常
}
async function fn(){
// await右侧是一个成功的promise
const result = await fn1() // 13
// await右侧是一个非promose的数据
// const result = await fn2() // 2
// await右侧是一个失败promose的数据
// const result = await fn3() // error 3
// await右侧抛出异常
// const result = await fn4()
console.log('result:',result);
return result+10
}
async function test() {
try {
const result2 = await fn ()
console.log('result',result2); //23
}
catch (error) {
// console.log('error', error);
}
const result3 = await fn4()
console.log('result4',result3);
}
test()
</script>