[vben] 2024/7/9 14:17:31
vben原有的asiox是有自己的固定数据格式,但是我的后台接口没有按照那个数据格式统一,是按照httpcode来返回。比如200就算成功,返回的值可能是字符串或者json数据;400会返回错误信息字符串。
然后有些接口需要做缓存,需要缓存接口返回值,下次再获取的时候不再请求接口了。
基于这些点,需要基于vben现有功能做扩展,我不想调整他现有文件,所以需要新建对应文件来实现功能。
首先梳理下vben中axios的思路:
src\utils\http\axios\Axios.ts 是axios的基础实现
src\utils\http\axios\index.ts 提供给业务调用,里面针对请求有不同的处理。
src\utils\http\axios\checkStatus.ts 相当于一个工具方法,用来处理异常的httpcode所需要的提示信息,基本不需要改动。
其他的文件可以不用管,我们只需要扩展axios.ts和index.ts两个文件即可。其实是基于原有的扩展,所以直接先复制两个文件在里面去改动。后续系统的api接口就直接用这个扩展的indexExt.ts就行了。
首先改动axiosExt.ts,这里的需求比较简单明确,就是需要增加缓存实现。这里我的想法是在此文件额外增加几个方法表示用于缓存来实现;如果要在选项中增加是否缓存选项的话,有需要改动另一个文件types\axios.d.ts了。
根据需求增加 getOnCache、postOnCache、requestOnCache三个方法,其实最终实现处理还是在requestOnCache中,暂时不在requestOnCache考虑method为其他的情况
主要增加如下代码:
然后再处理indexExt,此处主要需要处理的是返回数据的处理。
首先需要改引用:AxiosExt。
然后主要改动transform中的transformResponseHook和responseInterceptorsCatch。一个是处理返回数据,一个是处理异常状态码。
先改动responseInterceptorsCatch:
首先获取错误信息由:
改成
然后设置isTransformResponse=false,不对返回数据做处理。
设置authenticationScheme=Bearer,后台使用的jwt验证。
其他的代码保持不动(虽然有些用不到)。
到这一步基本调整完毕