功能

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

起步

0. 安装

   npm install bdjf_http -s

1. 初始化

• 引入 BdjfHttp 和 axios

  import { BdjfHttp, BdjfRequest, HttpConfig,createRequest,CacheOption,RequestOption } from "bdjf_http";
  
  import axios from "axios"

• 初始化 BdjfHttp 的 axios，你需要传入一个 axios 实例和一个配置给 BdjfHttp

  // 使用自己的baseUrl
  const baseUrl = process.env.VUE_APP_SERVER;
  
  const axiosInstance = axios.create({
       baseURL: baseUrl,
       timeout: 15000
   });
  
   const bdjfConfig:HttpConfig = {
     attributeMapping:{
        code:'code',
        msg:'msg',
        data:'data'
     },
     successCode: 0,
     showError(res,request) {
        console.error('---error---',res.msg);
     },
     showWarn(res,request) {
        console.error('---warning---',res.msg);
     },
     showLoading(request) {
        console.log('---isLoading---',request.requestOption.loadingText || '加载中...');
     },
     hideLoading() {
        console.log('---hideLoading---);
     },
     openLog:false
  }
  
  const httpInstance = new BdjfHttp(axiosInstance,bdjfConfig);

  在生成 httpInstance 实例后，你就可以使用它发送数据了， 在此之前，你需要先声明一个 request 对象

  const request = createRequest({
     url:'pub/common/getDefinedStrings',
     method:'POST',
     loadingText:'获取文案...',
     data:{
        id:'1'
     }
  });
  
  httpInstance.sendRequest(request).then(res=>{
     if(res.success){
        console.log(res);
     }
  })

  以上，就完成了一个接口的请求工作。 在此期间，BdjfHttp 完成了loading方法的回调，warn或error的提醒，并将axios返回的response对象进行拆解，将axios中的response中的data转换为BdjfResponse对象，将繁杂的信息整理，将真正需要的数据传递给前台， 并附上success等快捷方法让你快速验证与更新数据。

API

BdjfHttp

BdjfHttp 是本库核心类，需要用 new BdjfHttp(axios,config) 的方式创建，构造函数接收两个参数， 1是 axios 实例，2就是 HttpConfig 配置对象。

HttpConfig

HttpConfig 是创建 BdjfHttp 需要传入的配置对象。

const bdjfConfig:HttpConfig = {
   attributeMapping:{
      code:'code',
      msg:'msg',
      data:'data'
   },
   successCode: 0,
   showError(res,request) {
      console.error('---error---',res.msg);
   },
   showWarn(res,request) {
      console.error('---warning---',res.msg);
   },
   showLoading(request) {
      console.log('---isLoading---',request.requestOption.loadingText || '加载中...');
   },
   hideLoading() {
      console.log('---hideLoading---);
   },
   openLog:false
}

HttpConfig 传参说明

| 字段 | 类型 | 说明 | | :--------------- | :--------------------------------------------------- | :----------------------------------------------- | | attributeMapping | AttributeMapping | 用于匹配接口返回字段中的 code，msg，data | | successCode | number or string | 请求成功时 code 的值 | | showError | (res:BdjfResponse<T>,request:BdjfRequest)=>void | 调用报错时的回调，一般为网络错误 | | showWarn | (res:BdjfResponse<T>,request:BdjfRequest)=>void | 接口抛出的错误，code!==successCode时会走此回调 | | showLoading | (request:BdjfRequest)=>void | 请求发送前回调 | | hideLoading | <T>(res:BdjfResponse<T>,request:BdjfRequest)=>void | 请求结束后回调 | | openLog | boolean | 是否打印日志，主要为缓存日志 |

BdjfRequest

BdjfRequest 是请求对象，需使用 createRequest(requestOption:RequestOption,cacheOption?:CacheOption) 方法创建，createRequest 是对 new 关键字的一次封装，它的代码是这样的

   function createRequest (requestOption:RequestOption,cacheOption?:CacheOption){
      return new RequestImpl(requestOption,cacheOption);
   }

你可能会有点疑惑，这里的标题是 BdjfRequest,但是为什么 createRequest 方法返回的是一个 RequestImpl 对象，这俩有何关联？很简单，BdjfRequest 是interface，RequestImpl 实现了它。 在 axios 中，发送请求使用的都是传递option的方式，而在这里，大多数你都要使用到一个通过 new 关键词创造的对象，这是因为我用到了对象自身的方法，虽然 js 也可以通过其他方法创造一个带有方法的对象，但可能因为我是一个 Java 程序员出身的原因，而且用的还是TypeScript，所以更喜欢使用 new 的方式来创建一个我需要的对象。

interface BdjfRequest{
   requestOption:RequestOption;
   cacheOption?:CacheOption;
   closeLoading:()=>BdjfRequest;
   openLoading:()=>BdjfRequest;
   setOption:(newOption:RequestOption)=>BdjfRequest;
   setCacheOption:(newOption:CacheOption)=>BdjfRequest;
   conflictCacheUrl:()=>string[];
}

interface BdjfRequest 自身有两个属性，requestOption 和 cacheOption ,你在使用 createRequest 时，就需要传入这两个 option 对象，其中 requestOption 是必须的，cacheOption 与缓存有关。

   interface RequestOption extends AxiosRequestConfig{
      // 重写了 AxiosRequestConfig 中的 url，将其改为必须值
      url:string;
      needCache?:boolean;
      loadingText?:string;
      hideLoading?:boolean;
      hideError?:boolean;
      hideWarn?:boolean;
      attributeMapping?: AttributeMapping;
      rejectError?:boolean;
      extraData?:any;
   }

RequestOption 继承自 axios 的 AxiosRequestConfig，这使得你可以在创建 createRequest 创建请求对象时不被束手束脚，可以使用 axios 的大部分属性和功能（有部分功能暂时不被支持）。除此之外，我在上面加了几个属性来实现我想要的功能（还把 url改为了必填）。 通过 RequestOption 你可以应该预见 bdjf_http 的所有功能。

| 字段 | 类型 | 必须 | 默认 | 说明 | | :--------------- | :----------------- | ---- | ----------- | :------------------------------------------------------------------------------ | | url | string | 是 | - | 接口路径，从 AxiosRequestConfig 中继承而来 | | needCache | boolean | 否 | false | 是否需要缓存 | | loadingText | string | 否 | undefined | 加载时的文案，你可以在 showLoading 回调中取到此值 | | hideLoading | boolean | 否 | false | 是否展示加载效果，展示在代码中就是是否回调 showLoading 方法 | | hideError | boolean | 否 | false | 是否回调 showError 方法 | | hideWarn | boolean | 否 | false | 是否回调 showWarn 方法 | | attributeMapping | AttributeMapping | 否 | undefined | 此接口使用的字段映射，优先级高于 bdjfConfig 中的 attributeMapping | | rejectError | boolean | 否 | false | 是否通过 reject 的方式抛出错误，为 false 时，你可以在 then 中收到所有错误 | | extraData | boolean | 否 | undefined | 附加数据，自行添加，可以在 showLoading,showError,'showWarn'中拿到 |

除此之外，还有一个 cacheOption 需要了解，如果你需要缓存的话

interface CacheOption{
   bindCacheKey?: string[]|'all';
   excludeCacheKey?:string[];
   conflictCacheUrl?: BdjfRequest[];
}

CacheOption 的属性只三两个，bindCacheKey 与 conflictCacheUrl

bindCacheKey 用于决定缓存一个接口不同数据时的的标志，conflictCacheUrl 用于清空一个接口的缓存。 excludeCacheKey 与 bindCacheKey 正好相反，如果你不想让你数据中的某个 key 进入缓存树，就可以把该 key 加入到 ``excludeCacheKey` 中。

在使用 get 方式请求接口时，我们的请求链接会被拼成

http://xxxx.com?a=1&b=2

的形式，那么可以用这个链接作键，对应的数据作值，存入 map 中，做一个临时缓存。 但当使用 post 或其他方式时，我们想要差不多的效果则要手动把参数拼入这个链接，例如使用 qs 库， 基本可以做到一样的效果。 不过这样存入到 map 中的阅读体验不是很友好，要分清各个 key 的区别对眼里还是有点挑战的，所以，我并没有使用拼链接的方式， 而是采用了递归成树的方式来存放数据。

使用示例

   const agreementContent = (params:any)=>createRequest({
      url:'pub/hospital/agreementContent',
      method:'POST',
      data:params,
      loadingText:'获取协议...',
      needCache:true
   },{
      bindCacheKey:['id']
   })

   httpInstance.sendRequest(agreementContent({id:id}))
   .then(res=>{
     // console.log(copyRes(res));
     console.log(res);
   })

上面的代码中，needCache：true 代表开启了缓存，而 bindCacheKey 代表 bdjf_http 缓存数据时药根据哪些 key 来生成缓存树。 上面的例子生成的缓存树是这样的

// 从 url 开始
'pub/hospital/agreementContent':{
   'id>>1':CacheData // 缓存的数据
}

如果你传了多个参数

const agreementContent = (params:any)=>createRequest({
      url:'pub/hospital/agreementContent',
      method:'POST',
      data:params,
      loadingText:'获取协议...',
      needCache:true
   },{
      bindCacheKey:['id','name','version']
   })
    httpInstance.sendRequest(agreementContent({
       id:id,
       name:'nnn',
       version:'1'
   }))
   .then(res=>{
     // console.log(copyRes(res));
     console.log(res);
   })

   httpInstance.sendRequest(agreementContent({
       id:id,
       name:'aaa',
       version:'1'
   }))
   .then(res=>{
     // console.log(copyRes(res));
     console.log(res);
   })

那么生成的树将会是这样的

// 从 url 开始
'pub/hospital/agreementContent':{
   'id>>1':{
      'name>>nnn':{
         'version>>1':CacheData // 缓存的数据
      },
      'name>>aaa':{
         'version>>1':CacheData // 缓存的数据2
      }
   }
}

conflictCacheUrl 的使用很简单，conflictCacheUrl 接受一个 BdjfRequest 数组，如果你在接口 a 的 conflictCacheUrl 放了接口 b,c ，那么 b 或 c 任意一个接口调完之后，将会清空 a 缓存的数据。

BdjfResponse

BdjfResponse 基本与 axios 的 AxiosResponse 毫无关系。 BdjfResponse 只是将 AxiosResponse 中的 data 取出来，并按照 attributeMapping 中做了映射，只保留了前端人员需要关心的三个字段:

   interface AttributeMapping {
      code: string;
      msg: string;
      data: string;
   }

   type CodeType = string|number;

   interface BdjfResponse<T>{
      [key: string]: any;
      code:CodeType;
      msg?:string;
      data?:T;
      success:boolean;
      isLoading:boolean;
      update:(newRes:BdjfResponse<T>)=>BdjfResponse<T>;
      loading:(data?:T)=>BdjfResponse<T>;
   }

不过，如果你的接口数据中含有其他字段，bdjf_http 在转化时也会给你一同附上

  | 字段      | 类型                                        | 必须 | 默认        | 说明                                                |
  | :-------- | :------------------------------------------ | ---- | ----------- | :-------------------------------------------------- |
  | code      | `string` or `number`                        | 是   | -           | 接口中的code                                        |
  | msg       | `string`                                    | 否   | `undefined` | 接口报错的信息（如果有）                            |
  | data      | `any`                                       | 否   | `undefined` | 接口提供的数据（如果有）                            |
  | success   | `boolean`                                   | 否   | -           | 接口是否调用成功                                    |
  | isLoading | `boolean`                                   | 否   | -           | 是否在加载状态                                      |
  | update    | `(newRes:BdjfResponse<T>)=>BdjfResponse<T>` | -    | -           | 更新 `response` 数据                                |
  | loading   | `(data?:T)=>BdjfResponse<T>`                | -    | -           | 将 `response` 置为 `loading` 状态，可以传入一个data |

BdjfResponse 貌似有很多莫名其妙的功能，你可能完全想不到这有什么用，但是这是给骨架屏准备的，搭配骨架屏，你就能用极少的代码，完成一个请求的全部状态处理， 包括加载、展示、报错、空数据，完全无需自己动手。

使用

这里有一个示例,你可以在这里查看使用的最佳方式。