浪歌 · 随笔 我的开发笔记

调整axios逻辑

[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为其他的情况

主要增加如下代码:


import {createLocalStorage} from '@/utils/cache';


  private getCacheKey(url:string,params:any){
    if(isString(params)){
      return `${url}:${params}`;
    }
    if(isObject(params)){
        let keyStr='';
        for(const pkey in params){
          keyStr +=`${pkey}:${params[pkey]}`;
        }
        return `${url}:${keyStr}`;
    }
    return url;
  }



  requestOnCache<T = any>(config: AxiosRequestConfig, options?: RequestOptions): Promise<T> {
      const cache=   createLocalStorage({timeout:60*60*3.5});
      const cacheKey=this.getCacheKey(config?.url??'',config.params);
      if(cacheKey){
        const cacheVal = cache.get(cacheKey);
        if(cacheVal){
          return Promise.resolve(cacheVal);
        }
        return this.request(config, options).then(val => {
          cache.set(cacheKey, val);
          return val;
        }).catch(error => {
          return Promise.reject(error);
        });
      }
      return  this.request(config,options);
  }



然后再处理indexExt,此处主要需要处理的是返回数据的处理。

首先需要改引用:AxiosExt。

然后主要改动transform中的transformResponseHook和responseInterceptorsCatch。一个是处理返回数据,一个是处理异常状态码。

先改动responseInterceptorsCatch:
首先获取错误信息由:

const msg: string = response?.data?.error?.message ?? '';


改成


const msg: string = response?.data ?? '';


然后设置isTransformResponse=false,不对返回数据做处理。

设置authenticationScheme=Bearer,后台使用的jwt验证。

其他的代码保持不动(虽然有些用不到)。

到这一步基本调整完毕