全网小程序接口请求封装实例代码
前言
这篇文章主要针对一些初学者，有写的不好的地方，还请大家多多谅解！
在utils文件夹里面新建两个js文件，一个是api.js、一个就是requtil.js
api.js
这个文件主要api接口,废话不多说直接上代码了
constrequest=require('requtil.js')
/*Apis把全部api都存在这里*/
constApis={
/*用户相关*/
'login':'/devicecenter/auth/weChtLoin',
'bindUser':'/devicecenter/user/userBindinOpenId',
'genQrCode':'/devicecenter/user/getUserRcode',
/*设备相关*/
'getDeviceList':'/minipro/group/getDl',//获取设备列表
'getDeviceAdd':'/minipro/group/addDl',//添加设备
'getDeviceDtl':'/minipro/group/delDl',//删除设备
}
/*定义请求方法*/
constuser={
login:function(data){
request.get(Apis.login,data)
},
getSecret:function(data){
request.get(Apis.getSecret,data)
},
}
module.exports={
...user
}
requtil.js
把微信的wx.request请求进行分开封装
constglobalsetting=require('globalsetting.js')
constbaseURL=globalsetting.server
constutil=require('util.js')
constignoreUrls=[
'/auth/weChatLogin',
'/user/userBindingOpenId',
'/user/getSecret',
'/user/getOpenId'
]
vartoken=''
functionpost(url,args){
args=_prev(url,'POST',args)
wx.request(args)
}
functionget(url,args){
args=_prev(url,'GET',args)
wx.request(args)
}
functionput(url,args){
args=_prev(url,'PUT',args)
wx.request(args)
}
function_delete(url,args){
args=_prev(url,'DELETE',args)
wx.request(args)
}
function_prev(url,method,args){
//console.log('123',args)
args=args||{}
args.url=url
if(args.urlparam)
args.url+='/'+args.urlparam
varparams=parseParams(args)
params.method=method
params.success=success(params.success)
params.fail=fail(params.fail)
setToken(params)
returnparams
}
//处理接口是否需要添加header.token方法
functionsetToken(params){
if(!ignoreUrls.some(url=>params.url.match(newRegExp(url)))){
if(!params.header)
params.header={token:getToken()}
else
params.header.token=getToken()
}else{
//console.log('ignore:',params.url)
}
}
//处理接口参数方法
functionparseParams(args){
varparams=Object.assign(args)
if(!(params.url.startsWith('https://')||params.url.startsWith('http://')))
params.url=baseURL+params.url
if(params.param){
if(params.url.indexOf('?')>-1&¶ms.url.indexOf('?')!=params.url.length-1){
params.url+='&'
}elseif(params.url.indexOf('?')==params.url.length-1){
//无任何操作
}else{
params.url+='?'
}
varbuf=''
for(varnameinparams.param){
letval=params.param[name];
buf+=name+'='+encodeURI(typeofval=='object'?JSON.stringify(val):val)+'&'
}
params.url+=buf
}
returnparams
}
//接口返回成功方法
functionsuccess(callback){
returnfunction(rs){
varstatus=rs.statusCode
if(status==405){
util.errorMsg('请求失败405：\n服务器返回失败')
}elseif(status==404){
util.errorMsg('请求失败404：\n找不到接口')
}
if(callback)callback(rs.data)
}
}
functionfail(callback){
returnfunction(rs){
console.log(rs)
if(callback)callback(rs)
}
}
//获取接口请求回来的token
function_setToken(tk){
token=tk
wx.setStorageSync('token',token)
}
页面怎么调用
在全局的app.js里面
importapifrom'./utils/apis.js';
App({
api:api,
})
index页面
通过getApp()获取api接口，自定义一个函数里面用到了promise方法获取数据，然后在getDevList调用getChatRecord方法，就可以数据赋值
constAPP=getApp()
getDevList(e){
this.getChatRecord().then(res=>{
wx.hideLoading({
success:(res)=>{},
});
if(res.id=='-1'){
utils.errorMsg(res.message);
}else{
console.log(res)
}
})
}
//设备列表请求接口
getChatRecord(params={}){
returnnewPromise((resolve,reject)=>{
APP.api.getDeviceList({
success:res=>{
resolve(res)
}
})
})
},
后期我会做一个demo出来，放到github上面，这样你们看起来更直观一些
总结
到此这篇关于全网小程序接口请求封装实例的文章就介绍到这了,更多相关全网小程序接口请求封装内容请搜索毛票票以前的文章或继续浏览下面的相关文章希望大家以后多多支持毛票票！