微信小程式網路請求封裝
阿新 • • 發佈：2019-01-08
解決什麼問題
- 微信小程式請求
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 微信請求 SOUP 協議格式資料的封裝
新建一個檔案http-soup.js;
/**SOUP 協議格式 固定不變的常量*/
const SOUP_FORMAT_TOP = '<?xml version="1.0" encoding="utf-8"?>';
const SOUP_FORMAT_ENVELOPE_START = '<soap:Envelope xmlns:xsi="http://www.w3.org/2001/XMLSchema-instance" xmlns:xsd="http://www.w3.org/2001/XMLSchema" xmlns:soap="http://schemas.xmlsoap.org/soap/envelope/">';
const SOUP_FORMAT_BODY_START = '<soap:Body>';
const SOUP_FORMAT_BODY_END = '</soap:Body>';
const SOUP_FORMAT_ENVELOPE_END = '</soap:Envelope>';
/**
* 描敘：網路請求 可以解析 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 = '<dzLogin xmlns="lib">'
+ ' <yhm>' + '123' + '</yhm>'
+ '<mm>' + '123' + '</mm>'
+ '<checkcol>' + 'barcode' + '</checkcol>'
+ '<openid> ' + 'oK1xqv1H0Q503Uk7R2QuEZ8k-H1w' + '</openid>'
+ '</dzLogin>';
soupBuilder.soup('POST', 'https://sqlb.mynatapp.cc/weixin.asmx?op=dzLogin', 'lib/dzLogin', requestBody, that.onSuccess);
},
新建一個lib資料夾，將 dom.js、dom-parser.js、sax.js、entities.js 拷貝到裡面（lib資料夾與pages、utils平級）
如果有一點點懵逼的話，建議看看沒有封裝 soup請求 的先，瞭解下過程。