基础回顾
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能非常灵活的进行处理流程的控制，为了充分发挥它的能力，我们需要注意不要将一个函数写的过于庞大冗长，而是应该将其分割成更小更简单的处理，结合当前业务，使业务流程更加清晰明了，简单便捷。
