目录
1、新建config文件夹,然后新建api.js,如下图所示:
api.js 中统一存放后台api接口,方便管理。
//测试地址
const ApiRootUrl = 'http://47.97.178.20/api/';
module.exports = {
IndexBanner: ApiRootUrl + 'Banner/List', //获取列表
IndexUrl: ApiRootUrl + 'News/GetNewsListByPageType', //首页数据接口
};
2、在utils文件夹下的util.js中添加封装的代码。
/**
* GET请求封装
*/
function get(url, data = {}) {
return request(url, data, 'GET')
}
/**
* POST请求封装
*/
function post(url, data = {}) {
return request(url, data, 'POST')
}
/**
* 微信的request
*/
function request(url, data = {}, method = "GET") {
var contentType = 'application/json'
return new Promise(function(resolve, reject) {
wx.request({
url: url,
data: data,
method: method,
header: {
'Content-Type': contentType,
'Authorization': 'Bearer ' + getDataByKey('token')
},
success: function(res) {
console.log('===============================================================================================')
console.log('== 接口地址:' + url)
console.log('== 接口参数:' + JSON.stringify(data))
console.log('== 请求类型:' + method)
console.log("== 接口状态:" + res.statusCode);
console.log('===============================================================================================')
if (res.statusCode == 200) {
//请求正常200
//AES解密返回的数据
var daesData = null
try {
//此处结合了上篇文章的AES解密,如果不需要加解密,可以自行去掉,直接使用数据 res.data。
daesData = aes.getDAes(res.data)
console.log('解密后的数据:' + daesData)
daesData = JSON.parse(daesData)
if (daesData.status) {
//正常
resolve(daesData.data);
} else {
//错误
reject(daesData.message)
}
} catch (error) {
console.log('== 数据解码失败')
reject("数据解码失败")
}
} else if (res.statusCode == 401) {
//此处验证了token的登录失效,如果不需要,可以去掉。
//未登录,跳转登录界面
reject("登录已过期")
wx.showModal({
title: '提示',
content: '登录已过期,请立即登录,否则无法正常使用',
success(res) {
if (res.confirm) {
console.log('用户点击确定')
wx.navigateTo({
url: '/pages/login/login?toPageUrl=401',
})
} else if (res.cancel) {
console.log('用户点击取消')
}
}
})
} else {
//请求失败
reject("请求失败:" + res.statusCode)
}
},
fail: function(err) {
//服务器连接异常
console.log('===============================================================================================')
console.log('== 接口地址:' + url)
console.log('== 接口参数:' + JSON.stringify(data))
console.log('== 请求类型:' + method)
console.log("== 服务器连接异常")
console.log('===============================================================================================')
reject("服务器连接异常,请检查网络再试")
}
})
});
}
module.exports = {
formatTime,
request,
get,
post
}
3、封装请求的使用。
3.1、在page的js文件的头部引入util.js、api.js。如下图所示:
3.2、使用实例(获取首页列表数据)
/**
* 获取首页数据
*/
getIndexPagerData: function() {
//请求的参数
var mydata = {
"type": that.data.current,
"skipCount": that.data.pagernumber * app.globalData.pagersize,
"maxResultCount": app.globalData.pagersize,
"Longitude": that.data.longitude,
"Latitude": that.data.latitude
}
//此处为使用封装的post请求
util.post(api.IndexUrl, mydata).then((res) => {
var list = res.items
if (that.data.isRefresh) {
that.setData({
pagerList: list,
isRefresh: false
})
} else {
var templist = that.data.pagerList
var resultlist = templist.concat(list)
that.setData({
pagerList: resultlist
})
}
}).catch((errMsg) => {
//错误提示信息
wx.showToast({
title: errMsg,
icon: "none"
})
});
}
4、总结
使用封装的请求,可以很好的统一管理接口,统一处理异常问题。确实可以节省很多时间,方便快捷。快快试用一下吧!
本人公众号,关注一波,共同交流吧。