功能
- 警告和错误回调
- Loading回调
- 返回结果格式化
- 请求缓存
起步
-
安装
npm install bdjf_http -s
-
初始化
-
引入
BdjfHttp和axiosimport { 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 貌似有很多莫名其妙的功能，你可能完全想不到这有什么用，但是这是给骨架屏准备的，搭配骨架屏，你就能用极少的代码，完成一个请求的全部状态处理，
包括加载、展示、报错、空数据，完全无需自己动手。
使用
这里有一个示例,你可以在这里查看使用的最佳方式。