微信小程序网络请求封装

解决什么问题

• 微信小程序请求 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 = '<?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);
    },

另外有几个辅助js，如下脚本文件在这里：https://github.com/jindw/xmldom

新建一个lib文件夹，将 dom.js、dom-parser.js、sax.js、entities.js 拷贝到里面（lib文件夹与pages、utils平级）

如果有一点点懵逼的话，建议看看没有封装 soup请求 的先，了解下过程。