基于小程序请求接口wx.request封装的类axios请求
Introduction
- wx.request的配置、axios的调用方式
- 源码戳我
feature
- 支持wx.request所有配置项
- 支持axios调用方式
- 支持自定义baseUrl
- 支持自定义响应状态码对应resolve或reject状态
- 支持对响应（resolve/reject）分别做统一的额外处理
- 支持转换请求数据和响应数据
- 支持请求缓存（内存或本地缓存），可设置缓存标记、过期时间
use
app.js@onLaunch
importaxiosform'axios'
axios.creat({
header:{
content-type':'application/x-www-form-urlencoded;charset=UTF-8'
},
baseUrl:'https://api.baseurl.com',
...
});
page.js
axios
.post("/url",{id:123})
.then((res)=>{
console.log(response);
})
.catch((err)=>{
console.log(err);
});
API
axios(config)-默认get
axios(url[,config])-默认get
axios.get(url[,config])
axios.post(url[,data[,config]])
axios.cache(url[,data[,config]])-缓存请求（内存）
axios.cache.storage(url[,data[,config]])-缓存请求（内存&localstorage）
axios.creat(config)-初始化定制配置，覆盖默认配置
config
默认配置项说明
exportdefault{
//请求接口地址
url:undefined,
//请求的参数
data:{},
//请求的header
header:"application/json",
//超时时间，单位为毫秒
timeout:undefined,
//HTTP请求方法
method:"GET",
//返回的数据格式
dataType:"json",
//响应的数据类型
responseType:"text",
//开启http2
enableHttp2:false,
//开启quic
enableQuic:false,
//开启cache
enableCache:false,
/**以上为wx.request的可配置项，参考https://developers.weixin.qq.com/miniprogram/dev/api/network/request/wx.request.html*/
/**以下为wx.request没有的新增配置项*/
//{String}baseURL`将自动加在`url`前面，可以通过设置一个`baseURL`便于传递相对URL
baseUrl:"",
//{Function}（同axios的validateStatus）定义对于给定的HTTP响应状态码是resolve或rejectpromise。如果`validateStatus`返回`true`(或者设置为`null`或`undefined`)，promise将被resolve;否则，promise将被reject
validateStatus:undefined,
//{Function}请求参数包裹（类似axios的transformRequest），通过它可统一补充请求参数需要的额外信息（appInfo/pageInfo/场景值...），需returndata
transformRequest:undefined,
//{Function}resolve状态下响应数据包裹（类似axios的transformResponse），通过它可统一处理响应数据，需returnres
transformResponse:undefined,
//{Function}resolve状态包裹，通过它可做接口resolve状态的统一处理
resolveWrap:undefined,
//{Function}reject状态包裹，通过它可做接口reject状态的统一处理
rejectWrap:undefined,
//{Boolean}_config.useCache是否开启缓存
useCache:false,
//{String}_config.cacheName缓存唯一key值，默认使用url&data生成
cacheName:undefined,
//{Boolean}_config.cacheStorage是否开启本地缓存
cacheStorage:false,
//{Any}_config.cacheLabel缓存标志，请求前会对比该标志是否变化来决定是否使用缓存，可用useCache替代
cacheLabel:undefined,
//{Number}_config.cacheExpireTime缓存时长，计算缓存过期时间，单位-秒
cacheExpireTime:undefined,
};
实现
axios.js
importAxiosfrom"./axios.class.js";
//创建axios实例
constaxiosInstance=newAxios();
//获取基础请求axios
const{axios}=axiosInstance;
//将实例的方法bind到基础请求axios上，达到支持请求别名的目的
axios.creat=axiosInstance.creat.bind(axiosInstance);
axios.get=axiosInstance.get.bind(axiosInstance);
axios.post=axiosInstance.post.bind(axiosInstance);
axios.cache=axiosInstance.cache.bind(axiosInstance);
axios.cache.storage=axiosInstance.storage.bind(axiosInstance);
Axiosclass
初始化
- defaultConfig默认配置，即defaults.js
- axios.creat用户配置覆盖默认配置
- 注意配置初始化后mergeConfig不能被污染，config需通过参数传递
constructor(config=defaults){
this.defaultConfig=config;
}
creat(_config={}){
this.defaultConfig=mergeConfig(this.defaultConfig,_config);
}
请求别名
- axios兼容axios(config)或axios(url[,config])；
- 别名都只是config合并，最终都通过axios.requst()发起请求;
axios($1={},$2={}){
letconfig=$1;
//兼容axios(url[,config])方式
if(typeof$1==='string'){
config=$2;
config.url=$1;
}
returnthis.request(config);
}
post(url,data={},_config={}){
constconfig={
..._config,
url,
data,
method:'POST',
};
returnthis.request(config);
}
请求方法_request
请求配置预处理
- 实现baseUrl
- 实现transformRequest（转换请求数据）
_request(_config={}){
letconfig=mergeConfig(this.defaultConfig,_config);
const{baseUrl,url,header,data={},transformRequest}=config;
constcomputedConfig={
header:{
'content-type':'application/x-www-form-urlencoded;charset=UTF-8',
...header,
},
...(baseUrl&&{
url:combineUrl(url,baseUrl),
}),
...(transformRequest&&
typeoftransformRequest==='function'&&{
data:transformRequest(data),
}),
};
config=mergeConfig(config,computedConfig);
returnwxRequest(config);
}
wx.request
发起请求、处理响应
- 实现validateStatus（状态码映射resolve）
- 实现transformResponse（转换响应数据）
- 实现resolveWrap、rejectWrap（响应状态处理）
exportdefaultfunctionwxRequest(config){
returnnewPromise((resolve,reject)=>{
wx.request({
...config,
success(res){
const{
resolveWrap,
rejectWrap,
transformResponse,
validateStatus,
}=config;
if((validateStatus&&validateStatus(res))||ifSuccess(res)){
const_resolve=resolveWrap?resolveWrap(res):res;
returnresolve(
transformResponse?transformResponse(_resolve):_resolve
);
}
returnreject(rejectWrap?rejectWrap(res):res);
},
fail(res){
const{rejectWrap}=config;
reject(rejectWrap?rejectWrap(res):res);
},
});
});
}
请求缓存的实现
- 默认使用内存缓存，可配置使用localStorage
- 封装了Storage与Buffer类，与Map接口一致：get/set/delete
- 支持缓存标记&过期时间
- 缓存唯一key值，默认使用url&data生成，无需指定
importBufferfrom'../utils/cache/Buffer';
importStoragefrom'../utils/cache/Storage';
importStorageMapfrom'../utils/cache/StorageMap';
/**
*请求缓存api，缓存于本地缓存中
*/
storage(url,data={},_config={}){
constconfig={
..._config,
url,
data,
method:'POST',
cacheStorage:true,
};
returnthis._cache(config);
}
/**
*请求缓存
*@param{Object}_config配置
*@param{Boolean}_config.useCache是否开启缓存
*@param{String}_config.cacheName缓存唯一key值，默认使用url&data生成
*@param{Boolean}_config.cacheStorage是否开启本地缓存
*@param{Any}_config.cacheLabel缓存标志，请求前会对比该标志是否变化来决定是否使用缓存，可用useCache替代
*@param{Number}_config.cacheExpireTime缓存时长，计算缓存过期时间，单位-秒
*/
_cache(_config){
const{
url='',
data={},
useCache=true,
cacheName:_cacheName,
cacheStorage,
cacheLabel,
cacheExpireTime,
}=_config;
constcomputedCacheName=_cacheName||`${url}#${JSON.stringify(data)}`;
constcacheName=StorageMap.getCacheName(computedCacheName);
//returnbuffer
if(useCache&&Buffer.has(cacheName,cacheLabel)){
returnBuffer.get(cacheName);
}
//returnstorage
if(useCache&&cacheStorage){
if(Storage.has(cacheName,cacheLabel)){
constdata=Storage.get(cacheName);
//storage=>buffer
Buffer.set(
cacheName,
Promise.resolve(data),
cacheExpireTime,
cacheLabel
);
returnPromise.resolve(data);
}
}
constcurPromise=newPromise((resolve,reject)=>{
consthandleFunc=(res)=>{
//dostorage
if(useCache&&cacheStorage){
Storage.set(cacheName,res,cacheExpireTime,cacheLabel);
}
returnres;
};
this._request(_config)
.then((res)=>{
resolve(handleFunc(res));
})
.catch(reject);
});
//dobuffer
Buffer.set(cacheName,curPromise,cacheExpireTime,cacheLabel);
returncurPromise;
}
到此这篇关于基于小程序请求接口wx.request封装的类axios请求的文章就介绍到这了,更多相关小程序wx.request封装类axios请求内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！