微信小程序网络请求封装
解决什么问题
- 微信小程序请求
Restful api的封装 - 微信小程序请求
SOUP协议格式数据的封装
什么Restful apiapi，什么是SOUP 协议请自行搜索。废话不多说，直接上代码（talk is cheap ,show the code）。
微信请求 Restful api 的封装
/**
* 描叙：网络请求 可以解析 Restful api
* 参数说明 ：
* @requestType： 默认GET 请求方式 OPTIONS, GET, HEAD, POST, PUT, DELETE, TRACE, CONNECT (String 类型)
* @url： 请求地址。eg: https://domian.com?param_name=param_value (String 类型)
* @params： 请求参数 （json格式）
* @onSuccess： 成功回调，是一个函数
* @onFail： 失败回调，是一个函数
* @retry： 请求失败后，重新请求次数为 retry-1（默认1次，即只进行一次请求） 整型
*/
function http(requestType, url, params, onSuccess, onFail, onComplete, retry) {
var requestType = arguments[0] ? arguments[0] : 'GET';
var url = arguments[1] ? arguments[1] : '';
var params = arguments[2] ? arguments[2] : {};
var onSuccess = arguments[3] ? arguments[3] : defaultCallback;
var onFail = arguments[4] ? arguments[4] : defaultCallback;
var onComplete = arguments[5] ? arguments[5] : defaultCallback;
var retry = arguments[6] ? arguments[6] : 1;
wx.request({
url: url,
method: requestType,
data: params,
header: {
'content-type': requestType == 'POST' ?
'application/x-www-form-urlencoded' : 'application/json'
},
success: function (res) {
//请求正常返回，则则解析数据
if (res.statusCode === 200) {
onSuccess(res.data);
} else {//如果返回错误，直接打印错误信息
defaultConsole("错误码：" + res.statusCode + "\n\t" + " 错误信息：" + res.data);
}
},
fail: function (error) {
onFail(error);
// 重试机制
retry--;
if (retry > 0) {
return http(requestType, url, params, onSuccess, onFail, onComplete, retry);
}
},
complete: function (res) {
onComplete(res);
}
});
}
/**
* 默认回调
*/
function defaultCallback(data) {
console.log(data);
}
/**
* 默认打印数据
*/
function defaultConsole(data) {
console.log("--------------------------我是错误分割线--------------------------")
console.log(data);
console.log("--------------------------我是错误分割线--------------------------")
}
/** 导出模块 */
module.exports = {
http
}
微信请求 SOUP 协议格式数据的封装
新建一个文件http-soup.js;
/**SOUP 协议格式 固定不变的常量*/
const SOUP_FORMAT_TOP = '';
const SOUP_FORMAT_ENVELOPE_START = '' ;
const SOUP_FORMAT_BODY_START = '' ;
const SOUP_FORMAT_BODY_END = '';
const SOUP_FORMAT_ENVELOPE_END = '';
/**
* 描叙：网络请求 可以解析 SOUP协议 api
* 参数说明：
* @requestType 请求方式，建议默认使用POST
* @url 请求url , 如：https://sqlb.mynatapp.cc/weixin.asmx?op=dzLogin String类型
* @soupAction 请求头SOAPAction值 String类型
* @requestBody 请求体 XML格式字符串
* @onSuccess 请求成功回调 函数类型
* @onFail 请求失败回调 函数类型
* @onComplete 请求完成回调 函数类型
*/
function soup(requestType, url, soupAction, requestBody, onSuccess, onFail, onComplete) {
var requestType = arguments[0] ? arguments[0] : 'POST';
var url = arguments[1] ? arguments[1] : '';
var soupAction = arguments[2] ? arguments[2] : '';
var requestBody = arguments[3] ? arguments[3] : '';
var onSuccess = arguments[4] ? arguments[4] : defaultCallback;
var onFail = arguments[5] ? arguments[5] : defaultCallback;
var onComplete = arguments[6] ? arguments[6] : defaultCallback;
var tempData = SOUP_FORMAT_TOP + SOUP_FORMAT_ENVELOPE_START + SOUP_FORMAT_BODY_START
+ requestBody
+ SOUP_FORMAT_BODY_END + SOUP_FORMAT_ENVELOPE_END;
wx.request({
url: url,
data: tempData,
method: requestType,
header: {
'content-type': 'text/xml; charset=utf-8',
'SOAPAction': soupAction,
},
// 设置请求的 header
success: function (res) {
//请求正常返回，则则解析数据
if (res.statusCode === 200) {
var tempReturnData = dealWithData(res.data);
//转换为JSON对象
var jsonData = JSON.parse(tempReturnData);
onSuccess(jsonData);
} else {//如果返回错误，直接打印错误信息
defaultConsole("错误码：" + res.statusCode + "\n\t" + " 错误信息：" + res.data);
}
},
fail: function (error) {
onFail(error);
},
complete: function (res) {
onComplete(res);
}
});
};
var Parser = require('../lib/dom-parser.js');
/**
* 解析soup数据
* @data
*/
function dealWithData(data) {
//DOM解析对象
var parser = new Parser.DOMParser();
//根据soup格式数据生成DOM节点
var xmlDoc = parser.parseFromString(data, "text/xml");
//开始解析 获取soap:Body节点数据
var soapBody = xmlDoc.getElementsByTagName('soap:Body')[0];
//获取soap:Body节点所有的子节点
var childs = soapBody.childNodes;
//获取soap:Body节点子节点的个数
var lenght = soapBody.childNodes.length;
for (var i = 0; i < lenght; i++) {
//此处排查根据后端返回的规范做的判断
//返回值中是否包含有Response节点
if (childs[i].nodeName.indexOf('Response') >= 0) {
var grandChildren = childs[i].childNodes;
for (var j = 0; j < grandChildren.length; j++) {
//返回值中是否包含有Result节点
if (grandChildren[j].nodeName.indexOf('Result') >= 0) {
//找到结果返回
return grandChildren[j].childNodes[0].nodeValue;
}
}
}
}
//没有找到结果返回‘’
return '';
}
/**
* 默认回调
*/
function defaultCallback(data) {
console.log(data);
}
/**
* 默认打印数据
*/
function defaultConsole(data) {
console.log("--------------------------我是错误分割线--------------------------")
console.log(data);
console.log("--------------------------我是错误分割线--------------------------")
}
/** 导出模块 */
module.exports = {
soup
}使用方法：
//导入http-soup包
var soupBuilder = require('../../../utils/http-soup.js');
//成功回调
onSuccess: function (data) {
console.log(data);
console.log(data[0].dzrefcode);
},
// 获取soap格式数据
getHttpdata: function () {
var that = this;
var requestBody = ''
+ ' ' + '123' + ''
+ '' + '123' + ''
+ '' + 'barcode' + ''
+ ' ' + 'oK1xqv1H0Q503Uk7R2QuEZ8k-H1w' + ''
+ '';
soupBuilder.soup('POST', 'https://sqlb.mynatapp.cc/weixin.asmx?op=dzLogin', 'lib/dzLogin', requestBody, that.onSuccess);
},另外有几个辅助js，如下脚本文件在这里：https://github.com/jindw/xmldom
新建一个lib文件夹，将 dom.js、dom-parser.js、sax.js、entities.js 拷贝到里面（lib文件夹与pages、utils平级）
如果有一点点懵逼的话，建议看看没有封装 soup请求 的先，了解下过程。