基础回顾
Promise 是一个类或构造函数,通过对它进行实例化后,来完成预期的异步任务处理。
Promise 接受异步任务并立即执行,然后等待任务完成后,将状态标注成最终结果(成功或失败)。
Promise 有三种状态:最开始执行任务时状态是pending(等待中),等到任务执行完成,根据任务返回结果【成功或失败,分别对应状态 fulfilled(成功)和 rejected(失败)】
这时的状态就固定无法被改变, Promise 状态是不可逆的。
使用方法
Promise.all
Promise.all接收一个Promise数组作为入参。等待所有异步任务接收到结果后,进行then回调处理。 如果有一个异步任务失败,则立即catch处理。
- Promise.all与map结合
Promise.all入参是需要Promise数组。但一般情况下,有时候我们需要先定义数组,再进行Promise.all调用
数组中的map方法就很友好的和Promise处理。它会将Pending状态的Promise存储起来,等待所有Promise执行完毕后继续执行。
案例场景:orc文件识别,需等待所有文件都上传成功后处理
const uploadPromise = this.tempFile.map(item => {
return new Promise((resolve, reject) => {
....
})
})
Promise.all(uploadPromise)
.then(results => {
// 全部文件上传完成的逻辑
....
})
.catch(error => {
....
})
.finally(() => {
this.loading = false
})
const result = [1,2,3]
const result1 = result.map(item => {
return new Promise(resolve => {
setTimeout(() => {
resolve(item)
}, 2000)
})
})
Promise.all(result1)
.then(res => {
console.log(res)
})
.catch(err =>{})
.finally(() => {})
Promise.all当然也存在一个问题,若执行任务中某项任务异常场景,Promise将直接进入catch回调处理。
但有时候业务场景需要针对某项任务异常,超时或者错误场景就行逻辑处理。因此在ES11(2020年),提出Promise.allSettled填补该问题
Promise.allSettled
Promise.allSettled会将所有的回调任务的结果状态返回。
返回的格式是数组,每个数组元素中存在status【结果状态】和value【结果值】。
业务场景:订单收退款功能,需要调用数字字典。若调用失败可获取当前缓存值
const apiList = [a(), b()), c())]
Promise.allSettled(apiList).then(res => {
const [
{ status: aStatus, value: aVal, reason: aReason},
{ status: bStatus, value: bVal, reason: bReason},
{ status: cStatus, value: cVal, reason: cReason}
] = res || []
if (aStatus=== 'fulfilled') {
.....
} else {
.....
}
if (bStatus=== 'fulfilled') {
.....
} else {
.....
}
if (cStatus === 'fulfilled') {
.....
}
.....
})
const result = [1,2,3].map(item => {
return new Promise(resolve => {
setTimeout(() => {
resolve(item)
}, 100)
})
})
Promise.allSettled(result)
.then(res => {
console.log(res)
})
注意事项:
- Promise.allSettled已经满足异常场景,所有不需要额外的使用catch和finally。放在then同时处理即可
- Promise.allSettled是ES11(2020)提出,所以存在一定的浏览器版本兼容问题
【解决方法:需要在Promise原型对象定义Promise.allSettled方法】
Promise链式调用
业务办理经常会存在表单校验、特殊字段校验等。那结合当下实践场景,一般业务办理流程如下:
1)正常场景:业务办理 -> 校验 -> 业务办理成功
2)特殊场景:业务办理 -> 校验 -> 成功 -> 成功逻辑处理
-> 失败 -> 失败逻辑处理
-> 无论成功/失败都需执行逻辑
那遇到特殊场景时,易出现下列问题:
- 回调地狱,变量命名重复
- 多层函数嵌套,代码可阅读性差,可维护性性低
案例场景:预收单转正式单业务场景下,若业务办理失败,也包含额度不足场景。额度不足的失败需提供其他措施。
apiForm(this.form)
.then((res) => {
......
return new Promise(() => {})
})
.catch(err => {
if (err.code === '400') {
....
} else {
....
}
})
.then((result) => {
if (result?.body) {
.....
} else {
return Promise.reject( ....)
}
})
.catch(err => {
....
})
从代码结构来看,有点Jquery链式调用味道。Promise也跟Jquery链式调用操作一致。
每一个then,finally回调函数场景,会默认返回一个新的Promise对象。【catch场景不会默认返回】
若下一个链路存在then属性,将会再次执行【由于返回新的Promise对象,默认Promise.resolve()处理】
优点:层次分明,逻辑清晰,可阅读性和可维护性高
// then
Promise.resolve().then(() => console.log(1)).then(() => {console.log(2)})
// catch
Promise.reject().catch(() => console.log(1)).then(() => {console.log(2)})
// finally
Promise.resolve().then(() => console.log(1)).finally(() =>{}).then(() => {console.log(2)})
注意事项:
- 每一项then处理或者catch处理,可以直接返回Promise对象,然后由下一项then处理执行结果。
new Promise((resolve, reject) => {
resolve(1)
})
.then(res => {
console.log(res)
return Promise.resolve(2)
})
.then(res => {
console.log(res)
})
- 多项then处理的时候,如果不需要执行下一个then,需要主动中断。
return new Promise((resolve) => {})
那我们可以利用Promise给我们提供的这份机制,将成功场景按照链式场景,分步骤进行,异常场景使用catch收集。
async await语法糖
实际使用中,我们一般通过 async await 来搭配 Promise 使用,这样可以让代码可读性更强,彻底没有回调痕迹。
但async await 注意几个非常重要的点:
- async和await是一起使用
- await 同一行后面的内容对应 Promise 主体内容
- await 下一行的内容对应 then()里面的内容
- await 同一行后面应该跟着一个 Promise 对象。
- async 函数的返回值还是一个 Promise 对象
const fn = (item) => {
return new Promise(resolve => {
setTimeout(() => {
resolve(item)
}, 1000)
})
}
const getData = async () => {
const data = await fn(1);
console.log(data)
}
const getData = () => {
fn(1).then(res => console.log(res))
}
getData()
高级进阶
重复请求问题
业务场景:涉及到登录信息、数据字典等基本信息请求。一般情况下,这种基础信息请求在进入业务页面时,数据已经请求储备完毕。但当这些基础信息超时,当前页面此时未获取到数据,会立刻再发起请求查询。
业务目标:尽量减少多次请求,若发现相同接口请求,等待上次接口请求结束获取数据
state.currencyPromise = null
currencyAll({ state, commit }) {
return new Promise((resolve, reject) => {
if (Object.keys(state.localCurrencyInfo).length) {
resolve(state.allCurrencyInfo)
} else if (state.currencyPromise) {
state.currencyPromise.then((res) => {
const currencyInfo = res.body || {}
commit('LOCALCURRENCY_INFO', currencyInfo)
resolve(currencyInfo)
})
.catch((err) => {
reject(err)
})
.finally(() => {
state.currencyPromise = null
})
} else {
state.currencyPromise = getCurrencyAllInfo()
}
})
}
Promise中断
实际业务中存在冗余操作,带来一些不必要的接口开销,或者一些特定的超时场景。那这些特殊场景可以通过Promise中断来实现取消正在进行中的操作。
此时我们需结合Promise.race进行Promise中断。
Promise.race又称竞速,支持接收一个Promise数组,参数 promise 数组中的任何一个promise对象如果变为resolve或者reject的话, 该函数就会返回,并使用这个promise对象的值进行resolve或者reject。
const result = [1,2,3].map((item, index) => {
return new Promise(resolve => {
setTimeout(() => {
resolve(item)
}, index === 0 ? 100 : 200)
})
})
Promise.race(result)
.then(res => {
console.log(res)
})
接下来就是如何进行中断操作,这时候我们可以思考下Promise的特性,只有成功和失败结果会处理,那是不是只要我把其他接口请求处在等待状态那就可以了。
所以我们只需要把其他多余接口,状态保持在Pending就可以达成中断的效果。
function getPromiseWithCancel(originPromise) {
let cancel = () => {}
let isCancel = false
const cancelPromise = new Promise((resolve, reject) => {
cancel = e => {
isCancel = true
reject(e)
}
})
const groupPromise = Promise.race([originPromise, cancelPromise])
.catch(e => {
if (isCancel) {
return new Promise(() => {})
} else {
return Promise.reject(e)
}
});
return Object.assign(groupPromise, { cancel })
}
const originPromise = axios.get(url)
const promiseWithCancel = getPromiseWithCancel(originPromise)
promiseWithCancel.then((data) => {
console.log('渲染数据', data)
})
promiseWithCancel.cancel()
Promise控制反转
Promise 和 传统callback【回调函数】 还有个本质区别,就是控制权反转。
控制权:函数方法分为定义+执行步骤。谁执行函数,谁具备这个函数的控制权【可以理解为this】
callback 模式下,回调函数是由业务层传递给封装层的,封装层在任务结束时执行了回调函数。
Promise 模式下,Promise封装层只是通过resolve或reject来通知到 业务层,从而由业务层自己在then或catch去控制自己的回调执行。
总结概括
Promise能非常灵活的进行处理流程的控制,为了充分发挥它的能力,我们需要注意不要将一个函数写的过于庞大冗长,而是应该将其分割成更小更简单的处理,结合当前业务,使业务流程更加清晰明了,简单便捷。