数据交互之封装request请求（微信小程序篇）

在前后端数据交互中，数据请求是一个很重要的环节，request请求也是出现在交互中的重点，进行请求方式的封装是为了减轻数据请求的体量，最大化进行代码的复用，也是面向对象编程的基础思想。

//这个是一个小程序的全局变量设置，其中的url地址是在app.js中的 globalData设置中取出。

var AppLestUrl = getApp().globalData.wxurl;

//简单的函数封装
/url：表示请求地址，
header：表示请求头数据组，
cd:表示请求返回函数
sc：表示请求返回的编码，（可根据后台返回编码的复杂程度来改变）
/
//GET请求方式
function getReq(url,header,cb,sc) {
//加载动画
wx.showLoading({
title: '加载中',
})
console.log(header);
wx.request({
url: AppLestUrl + url,
method: 'GET',
header: header,
//正确请求流程
success: function (res) {
wx.hideLoading();
console.log(res);
var JsonData = res.data;
var JsonCode = res.statusCode;
return typeof cb == "function" && cb(JsonData, JsonCode);
},
//异常请求流程
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}
//POST请求方式
/data:表示的是上传数据体/
function postReq(url, data, header,cb) {
wx.showLoading({
title: '提交中',
})
console.log(header),
wx.request({
url: AppLestUrl + url,
header: header,
data: data,
method: 'POST',
success: function (res) {
wx.hideLoading();
var JsonData = res.data;
console.log(JsonData);
var JsonCode = res.statusCode;
return typeof cb == "function" && cb(JsonData, JsonCode)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错，请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})

}
微信小程序里面request请求不像JavaScript里面的数据请求，在小程序里面必须要进行方法暴露，才可以在其他的js文件里面请求到先前封装的方法。

在公共文件里面暴露封装方法

module.exports = {
getReq: getReq,
postReq: postReq,
}
对于公共方法js的调用，里面的http.js就是你公共方法的js

var HttpRequest = require("../../http.js"); //HTTP请求request封装 调用

getReq: HttpRequest.getReq,//GET数据请求函数
postReq: HttpRequest.postReq,//POST数据请求

//GET请求
HttpRequest.getReq(infoUrl, headmode, function (res,code) {
console.log(res);
}）
//POST请求
HttpRequest.postReq(url, JsonData, headers,function (res,code) {
console.log(res);
}）