随着前端业务发展的迅速，业务和项目越来越复杂，接口联动和复杂度越来越高。为了减少请求响应，减少不必要的等待，减少接口联动交互的时间，前端需要对频繁，变动量少的接口做缓存，增加响应速度。该插件特点：架构 单一性，读写权限合理化，隐藏数据源，使用 Fetch 获取资源，基于 Promise 进行封装,优先使用cacheStorage，次选Map内存存储。
使用 courierCach 首先需要实例化：
import courierCach from ' courier-cach';
//默认属性也可以通过 courier.defaults.xxx = yyy 定义;
const courier = new courierCach({
// 选择缓存方式,map为内存缓存,cacheStorage为浏览器caches缓存，如若不支持则自动切换回map方式
cacheType:'map',
//baseUrl 将添加到 Url前面作为基本路径,类型:string,默认值:'';
baseUrl:'http://xxx.com',
//请求超时时间(单位为 ms),类型:number，默认值:1000 * 60;
timeout:1000 * 60,
// 缓存有效时间(单位为 ms)，不设置时间则不缓存,类型:number,默认值:0
expires:0 ,
//期待返回类型,可选值:textarrayBuffer、blob、formData,类型:string,默认值:'json';
responseType:'json',
//请求凭证,可选值:omit,类型:string,默认值:include;
credentials:'include',
//请求头,类型:object,默认值:{}
header:{
//分别为每个方法定义公共请求头
COMMON:{
//.....
},
//....
}
//请求跨域,可选值:no-cors, same-origin,类型:string,默认值:'cors';
cors:'cors',
//请求重定向,可选值:manual, error,类型:string,默认值:'follow';
redirect:'follow',
//请求来源,可选值:no-referrer,类型:string,默认值:'client';
referrer:'client',
//缓存协议,可选值:no-cache, reload, force-cache, only-if-cached,类型:string,默认是值:'default';
cache:'default',
});
//请求响应结构
{
//请求响应返回的可读取的二进制流
body:ReadableStream,
//响应二进制流是否已被读取
bodyUsed:true,
//期待返回类型的数据,根据responsetype对响应二进制流进行读取转换
data:{},
//请求响应头
headers:{
'_expirese':6000,//请求缓存时间
'_expirationTime':1618215453000,//缓存过期时间
'_url':'http://xxxxx',//请求地址
//......
},
//请求是否成功
ok:true,
//请求是否发生过跳转
redirected:false,
//请求状态码
status:200,
//状态响应信息
statusText:"",
//类型
type:'default',
//请求路径
url:'http://a.com',
}
为了确保稳定性和统一性，请勿存储流式数据。
同时为了方便使用，也为其他方法提供了别名,其他请求参考 fetch。
courier.fetch(
'http"//a.com/getUser',
{
method: 'POST',
body:{
name:'Joe',
}
}
).then(res=>{
// 请求响应数据处理....
}).catch(err=>{
//请求响应错误处理....
})-
fetch ( url : string , apiOption : object ) : Promise<Response>
-
get ( url : string , apiOption : object ) : Promise<Response>
-
post ( url : string , apiOption : object ) : Promise<Response>
-
delete ( url : string , apiOption : object ) : Promise<Response>
-
head ( url : string , apiOption : object ) : Promise<Response>
-
options ( url : string , apiOption : object ) : Promise<Response>
-
post ( url : string , apiOption : object ) : Promise<Response>
-
put ( url : string , apiOption : object ) : Promise<Response>
-
patch ( url : string , apiOption : object ) : Promise<Response>
//添加请求前拦截器
courier.interceptRequest((config)=>{
//请求前处理....
return config;
},(err)=>{
//请求前错误处理...
return err;
});
//添加响应拦截器
courier.interceptResponse((response)=>{
//请求响应后处理...
return response;
},(err)=>{
//请求响应后错误处理...
return err;
});
希望大家使用后有什么建议多提，一起共同进步。