阅读 119

小团队编写一个带缓存的 axios 请求工具类

背景

公司小项目尤其多,每次新建项目都要封装一次axios,每个人封装方法也不一样,有的时候也会用到uniapp写小程序,所以为了统一使用体验,封装了一个符合公司风格的小框架。

项目地址

功能

  • 警告和错误回调
  • Loading回调
  • 返回结果格式化
  • 请求缓存

使用

  1. 安装

    npm install bdjf_http -s
    复制代码
  2. 初始化

  • 引入 HttpUtil 和 axios

    import {HttpUtil} from "bdjf_http";
    import axios from "axios"
    复制代码
  • 初始化 HttpUtil 的 axios,你需要传入一个 axios 实例给 HttpUtil

    // 使用自己的baseUrl
    const baseUrl = process.env.VUE_APP_SERVER;
    const axiosInstance = axios.create({
    baseURL: baseUrl,
    timeout: 5000,
    headers: {'Content-Type': 'application/x-www-form-urlencoded'}
    });
    HttpUtil.setAxios(axiosInstance);
    复制代码
  • 设置HttpUtil,通过 initConfig 方法设置如何解析后端返回的数据和数据错误时如何弹出提示

    • initConfig 传参说明
    字段类型说明
    codeNamestring用于匹配接口返回字段中的'code'
    msgNamestring用于匹配接口返回字段中的'msg'
    dataNamestring用于匹配接口返回字段中的'data'
    successCodenumber回复正常时code的值
    showError(string)=>{}调用报错时的回调,一般为网络错误
    showWarn(string)=>{}接口抛出的错误,code不为0时会走此回调
    codeshowLoadingName()=>{}发送请求前回调
    hideLoading()=>{}请求结束后回调
    HttpUtil.initConfig({
       codeName:'code',
       msgName:'msg',
       dataName:'data',
       successCode:0,
       showError(error) {
          console.error(error);
       },
       showWarn(msg) {
          console.warn(msg);
       },
       showLoading() {
          console.log('----showLoading----');
       },
       hideLoading() {
          console.log('----loadComplete----');
       }
    })
    复制代码
  1. 设置 HEADER

你可以选择在初始化时通过给 axios 设置 header,但是很多时候还需要在登录完成后在header里添加自定义的token来鉴权

HttpUtil.setAxiosHeader('token','123456');
复制代码
  1. 简单封装

    完成上面的初始化设置,我们就可以正式使用了。为了方便使用,我们可以创建一个 API 清单,API类的每一个方法都会返回一个 RequestBean 对象 RequestBean 的构造函数接受三个参数:

    参数类型说明必填
    urlstring接口的url
    requestOptRequestOption用于配置接口调用
    cacheOptCacheOption用于配置缓存功能

    RequestOption 详细信息

    属性类型说明必填默认值
    methodstring接口请求的方法,可选值与axios支持的相同POST
    attributeMappingAttributeMapping用于配置单独的数据映射null
    showLoadingboolean用于配置缓存功能true
    catchErrorToastboolean用于配置缓存功能true

    AttributeMapping 详细信息

    属性类型说明必填
    codestring映射接口数据中的code
    msgstring映射接口数据中的msg
    datastring映射接口数据中的data

    CacheOption 详细信息

    属性类型说明必填默认值
    needCacheboolean是否需要缓存true
    bindCacheKeystring[]缓存数据时所依据的字段[]
    conflictCacheUrlRequestBean[]配置调用哪些接口要清空缓存当前url下面的[]

    一个简单的例子

    import { RequestBean } from 'bdjf_http'
    export class API{
       public static loginWithCode(): RequestBean{
          return new RequestBean('/wxapi/loginWithCode',{showLoading:true})
       }
    }
    复制代码

    如果你还需要再次封装 HttpUtil 的请求方法,比如你需要在每次请求时在数据中加上userId,可以这么做

    import {HttpUtil, ResponseBean} from 'bdjf_http'
    import Store from "../store";
    import qs from 'qs';
    
    export function post(requestBean: RequestBean,params:Record<string, unknown> = {}): Promise<ResponseBean>{
       // 在 store 中取出userid
       if(Store.state.isLogin){
          params['userid'] = Store.getters.getUser.userid;
       }
       return HttpUtil.request(requestBean,qs.stringify(params));
    }
    复制代码

    HttpUtil.request 会接收两个参数

    1. requestBean
    2. params 你需要发送的数据(可选)

    返回值是一个 Promise 对象,带的数据为 ResponseBean 类型的对象

  2. 正式使用

经过上面的准备工作,现在已经可以开始正式使用了

// 假设你将API类和post方法都在 src/http/index.ts 文件中暴露出来
import {API, post} from '@/http'
const params = {
   'userid': '123',
   'pwd': '123'
}
post(API.login(), params)
.then(res => {
   if(res.success){
      console.log(res);
   }
})
复制代码
  1. 结语 别看上面的字多,其实需要自己写的代码是很少的,而且需要配置也很少,单看这个请求工具类的话,其实功能并不多,下一篇博文,我会介绍轻松撘配骨架屏使用,让你几行代码便可以完成一个请求处理,无需烦心再处理loading,error和空数据
文章分类
前端
文章标签