项目的网络请求层使用了axios，axios是一个及其好用的库，但是在业务使用上出现了一些问题
出现原因
众所周知，前端一般通过ajax向后端请求数据然后处理后显示在网页/app上，当然人都是懒得，总是希望有一些自动完成的事，比如这一次，如果不是需要特殊处理的特定错误，直接弹toast结束。
错误处理还是很容易，axios增加拦截器，如果是指定的错误，直接throw new Error('错误') 剩下的交给promise.catch干就好了，问题集中在如何兜底这个catch，如果不处理，会变成unhandledrejection错误
解决方案
最原始的方案
高阶函数 throwMessage，自动在promise之后增加catch函数，问题是这个要记得手动引入，和自动这个理念还是有点区别的.
export function throwMessage<T = any>(responsePromise: Promise<T>) {
return responsePromise.catch((e: Error) => {
console.error(`error`, e)
message.error(e.message)
})
}
每次使用都要throwMessage(promise)容易忘，如果有必要，还要写lint规则防止忘记
webpack方案
既然打包的是webpack，那么使用webpack在转译原始代码的时候注入就好了嘛. 推荐一个promise-catch-loader自动处理好这一系列问题 具体因为没有太研究，不做展开
事件监听方案
上文提到了，如果promise没有捕获错误，会自动变成unhandlered rejection错误，这个是可以全局监听的，具体在MDN上可以看
那么 我们在window上直接监听就好了
window.addEventListener('unhandledrejection', event => {
event.preventDefault()
});
问题是，太全局了
处理Promise链方案
这种是最终处理的方案，当然也是最魔改的方案，考虑到只运行在前端，内存溢出情况不多，方能实现
axios返回的是promise，promise是遵循PromiseA+方案，内部其实是有一条promise链的，我们的目的就在于，在promise链条的最后一个promise上挂上catch,反正预先被处理了最后一个也不会触发
问题来了
如果你直接看promise的话，是只能看到，then，catch，finally这些方法的，并没办法看到promise链，也没办法顺着链访问到最后
如何解决
我们的目标是将其变为链式结构，简单来说，只要每个then和catch都能记下他的后继即可。
所以最终我选择注入promise的两个方法
实现代码
/**
* 继承然后注入两个方法
*/
export class ChainedPromise<T> extends Promise<T> {
nextPromise?: Promise<any>
then<TResult1 = T, TResult2 = never>(
onfulfilled?: ((value: T) => TResult1 | PromiseLike<TResult1>) | undefined | null,
onrejected?: ((reason: any) => TResult2 | PromiseLike<TResult2>) | undefined | null,
): Promise<TResult1 | TResult2> {
const promise = super.then(onfulfilled, onrejected)
this.nextPromise = promise
return promise
}
catch<TResult = never>(
onrejected?: ((reason: any) => TResult | PromiseLike<TResult>) | undefined | null,
): Promise<T | TResult> {
const promise = super.catch(onrejected)
this.nextPromise = promise
return promise
}
}
/**
* 暴露给外面的方法，axios通过拦截器，通过封装service都能调用它来在入口处自动注入
*/
function autoTravel<T>(promise: Promise<T>): Promise<T> {
const getLastPromise = function(promise: ChainedPromise<any>): Promise<any> {
if (promise.nextPromise) {
return getLastPromise(promise.nextPromise)
}
return promise
}
/**
* Promise内部的自动形成链条，就能顺着链条找到最后一个了
*/
const autoTravelPromise = new ChainedPromise<T>((resolve, reject) => {
promise.then(resolve).catch(responseError => {
// throwMessage为之前定义的，promise上自动加catch的方法
throwMessage(getLastPromise(autoTravelPromise))
reject(responseError)
})
})
return autoTravelPromise
}