js网络请求

先看一下JAVA怎么执行一个请求

 String url = "http://xxx.xxx.xxx.xxx:xxx/api/pay/recharge";
        HashMap map = new HashMap();
        map.put("amount", "100");
        Request.newInstance(WxPayJson1.class)
                .setUrl(url)
                .setMethod(Method.POST)
                .addParams(map)
                .addHeader("X-Requested-With", "XMLHttpRequest")
                .addHeader("User-Agent", "aa")
                .excute(new SimpleDataCallBack<WxPayJson1>() {
                    @Override
                    public void onStart() {
                        super.onStart();
                    }
                    @Override
                    public void onNext(WxPayJson1 payJson) {
                        super.onNext(payJson);
                        Log.e(TAG, payJson.toString());
                    }
                    @Override
                    public void onError(Exception e) {
                        super.onError(e);
                    }
                    @Override
                    public void onCompleted() {
                        super.onCompleted();
                    }
                });

我想要把这种写法用到js上面，然后就开始编写JS了。
（本人js小白：》）下面是封装的代码，不代表生产环境使用代码，只做参考。

/**
 * Created by itzhu on 2017/8/29.
 */

/*------------CallBack---------------- */
/**
 * callback类，网络请求的回调
 * 一般来说它需要实现onStart\onNext\onComplete\onerror方法，因为没有接口的概念（当然函数可以作为对象传递，也没必要纠结接口怎么用js实现）
 * 想用继承去写，觉得麻烦，就这么写了。
 * 这个主要是为了实现链式调用，以及再执行方法前条用一些通用的操作。
 * 你也可以根据这个写一个SimpleUiCallBack,如果传递这个callback,在请求前会显示一个dialog，请求完成之后dialog自动消失...请求失败弹出toast等，如果有这些操作，建议再封装一个callback
 * callback里面有下面的几个方法即可，因为没有接口设计，不好设计抽象类。
 *  这个没有加入TAG字段，如果多个请求使用一个callback不能区分，需要自己定义字段标记，自行设计。
 *
 * **/
function CallBack() {
     this.start = null;
    this.next = null;
    this.complete = null;
    this.error = null;
}
CallBack.prototype = {

    constructor: CallBack,

    /*------设置方法-----*/

    /**
     * @param {function()}start
     */
    Start: function (start) {
        this.start = start;
        return this;
    },

    /**
     * @param {function(data)}next
     */
    Next: function (next) {
        this.next = next;
        return this;
    },

    /**
     * @param {function()}complete
     */
    Complete: function (complete) {
        this.complete = complete;
        return this;
    },

    /**
     * @param {function(code,method,url)}error
     */
    Error: function (error) {
        this.error = error;
        return this;
    },

    /*--------执行方法---------*/
    onStart: function () {
        if (this.start != null) this.start();
    },

    onNext: function (data) {
        if (this.next != null) this.next(data);
    },

    onComplete: function () {
        if (this.complete != null) this.complete();
    },

    onError: function (code, method, url) {
        if (this.error != null) this.error(code, method, url);
    }
};

/*------------------------ShttpDefine------------------------------*/

/**
 * HTTP的build方式设置参数信息
 * */
function ShttpDefine() {
   this.callback = null;//可以不用
    this.url = null;
    this.method = null;
    this.params = {};
    this.headers = {};
}

ShttpDefine.prototype = {

    constructor: ShttpDefine,

    /**
     * 请求URL
     * @param {string}url
     * **/
    Url: function (url) {
        this.url = url;
        return this;
    },

    /**
     * 执行方法get/post/put/delete......
     * @param {string}method
     * **/
    Method: function (method) {
        this.method = method;
        return this;
    },

    /**
     * 添加请求数据
     * @param {JSON}params
     * **/
    addParams: function (params) {
        if (params == null) {
            this.params = params;
        } else {
            this.params = mergeJsonObject(this.params, params);
        }
        return this;
    },

    /**
     * 添加请求头
     * @param {JSON}headers
     * **/
    addHeaders: function (headers) {
        if (headers == null) {
            this.headers = headers;
        } else {
            this.headers = mergeJsonObject(this.headers, headers);
        }
        return this;
    },

    /**
     * 开始执行这个请求
     * @param {CallBack}callback
     * */
    execute: function (callback) {
        this.callback = callback;
        SHttp.request(this.url, this.method, this.params, this.data, this.callback);
    }
}

/*------------------HttpDefaultConfig-----------------------------*/
/**
 * http默认配置
 * **/
var HttpDefaultConfig = {
    /**请求头配置*/
    headers: {
        // 'Accept': 'application/json',
        //'User-Agent': 'app',
        'X-Requested-With': 'XMLHttpRequest',
        //'Content-Type': 'application/x-www-form-urlencoded',
        'channelToken': 'xxxxxxxxxx',
        //'debug': true
    },
    /*其他配置*/
    async: true,
    timeout: 3000,
    /*以下配置貌似没啥用，因为请求头里面可以完成这些配置*/
    dataType: "text",
    contentType: "text/plain; charset=UTF-8",
    jsonp: "callback"    // for query string
}

/**
 * 执行类
 * */
var SHttp = {
    /***
     * 相当于全局配置
     * */
    defaultConfig: HttpDefaultConfig,//默认配置

    /**
     * 可能有点类似内部类的写法，主要是实现build的设置方式
     * */
    newInstance: function () {
        var shttpDefine = new ShttpDefine();
        //shttpDefine.addHeaders(httpDefaultConfig.headers);//设置默认头部
        return shttpDefine;
    },

    /**
     * 网络请求的实现类，里面实现网络请求，不管用Ajax/Fetch等
     * */
    request: function (url, method, params, headers, simpleCallBack) {
        simpleCallBack.onStart();
        httpx.request({
            headers: mergeJsonObject(headers, this.defaultConfig.headers),
            async: this.defaultConfig.async,
            timeout: this.defaultConfig.timeout,
            //dataType: this.defaultConfig.dataType,
            //contentType: this.defaultConfig.contentType,
            //jsonp: this.defaultConfig.jsonp,    // for query string

            method: method,
            url: url,
            data: params,

            success: function (data) {
                simpleCallBack.onNext(data);
                simpleCallBack.onComplete();
            },
            error: function (method, url) {
                simpleCallBack.onError(-1, method, url);
            },
            ontimeout: function (method, url) {
                simpleCallBack.onError(-2, method, url);
            }
        });
    }
}

/**
 * 合并两个json对象属性为一个对象
 * @param {JSON}jsonbject1
 * @param {JSON}jsonbject2
 * @returns {JSON}resultJsonObject
 * */
mergeJsonObject = function (jsonbject1, jsonbject2) {
    var resultJsonObject = {};
    for (var attr in jsonbject1) {
        resultJsonObject[attr] = jsonbject1[attr];
    }
    for (var attr in jsonbject2) {
        resultJsonObject[attr] = jsonbject2[attr];
    }
    return resultJsonObject;
};

上面算封装完成了，看一下网络请求怎么写

/**
 * 个人喜欢这样的写法，因为JAVA里面也封装了一个写法类似的请求，所以想在js里面也用这种方式
 * 总的来说，看一下JAVA的函数式编程，或者知道看一下scala,理解一下方法也可以传递，写js也不算太难。
 * js代码可读性差或许是因为它太灵活了，scala的可读性也差，所以有一种特定的写法还是比较好的
 * 这里只是一个实践性测试吧，不过如果你也是java开发，你应该也可以把部分通用代码封装成特定易懂的格式，不管语言怎么变动，格式不变就OK了，
 * 这个目的是让人一看就知道一个网络请求该怎么写，代码可读性会更好一点，虽然它看起来比较繁琐。
 * 引入的时候再用jsCompress压缩一下，或者把httpx和这个文件合并压缩，可能也就10K不到
 * */
SHttp.newInstance()
    .Url("http://xxx.xxx.xxx:xxxx/api/activity_bid/getProductsDeal")
    .Method("post")
    .addParams({"pageNo": 1, "pageSize": 3})
    .addHeaders({"debug": true})
    .execute(new CallBack()
        .Start(function () {
            console.log("start");
        })
        .Next(function (data) {
            console.log("next->" + data);
        })
        .Complete(function () {
            console.log("complete");
        })
        .Error(function (code, method, url) {
            console.log("error->" + code + method + url);
        })
    );

这个就完成了，实际代码还没200行。里面用到了httpx这个库：https://github.com/pandao/httpx.js
相当于在这个库上再封装一种写法。如果你会rxjs，使用rxjs封装应该会更好。