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

背景

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

功能

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

使用

0. 安装

   npm install bdjf_http -s
   

1. 初始化

• 引入 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 传参说明

  字段	类型	说明
  codeName	string	用于匹配接口返回字段中的'code'	msgName	string	用于匹配接口返回字段中的'msg'	dataName	string	用于匹配接口返回字段中的'data'	successCode	number	回复正常时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----');
     }
  })
  

2. 设置 HEADER

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

HttpUtil.setAxiosHeader('token','123456');

3. 简单封装

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

   参数	类型	说明	必填
   url	string	接口的url	是	requestOpt	RequestOption	用于配置接口调用	否	cacheOpt	CacheOption	用于配置缓存功能	否

   RequestOption 详细信息

   属性	类型	说明	必填	默认值
   method	string	接口请求的方法，可选值与axios支持的相同	否	POST	attributeMapping	AttributeMapping	用于配置单独的数据映射	否	null	showLoading	boolean	用于配置缓存功能	否	true	catchErrorToast	boolean	用于配置缓存功能	否	true

   AttributeMapping 详细信息

   属性	类型	说明	必填
   code	string	映射接口数据中的code	是	msg	string	映射接口数据中的msg	是	data	string	映射接口数据中的data	是

   CacheOption 详细信息

   属性	类型	说明	必填	默认值
   needCache	boolean	是否需要缓存	是	true	bindCacheKey	string[]	缓存数据时所依据的字段	[]		conflictCacheUrl	RequestBean[]	配置调用哪些接口要清空缓存当前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 类型的对象

4. 正式使用

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

// 假设你将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);
   }
})

5. 结语 别看上面的字多，其实需要自己写的代码是很少的，而且需要配置也很少，单看这个请求工具类的话，其实功能并不多，下一篇博文，我会介绍轻松撘配骨架屏使用，让你几行代码便可以完成一个请求处理，无需烦心再处理loading，error和空数据