react進行http請求，原生http請求封裝

react沒有像angular的$resource或者$http，或者是jquery的$ajax一樣的網路請求庫，該網路請求是作者自己封裝的，當然大家也可以根據自己需要改寫。

其中主要的內容有get，post，jsonp和file上傳幾種格式

請求樣本，裡面可能用到了我其他的封裝service，請忽略：

HttpService.query({    url: '/api/active/follow',    data: {        extendKey: CommonService.getUrlParams('extendKey'),        dstUin: this.props.dstUin    },    success: res => {        console.log(res);        if (res.retCode == 0) {            this.setState({                liked: true            })        } else {            R_UiService.Toaster(res.retMsg)        }    }});

如果是post請求或者jsonp也差不多。以下是源碼，如果有特殊需求，也可以在其中進行自己的改造。源碼不可在es5環境下直接使用，需要通過babel編譯，推薦使用gulp或者webpack

/** * Created by sheldon on 2016/8/2. */'use strict';class HttpService {    static query(config) {        config = config || {};        var params = HttpService.formatParams(config.data);        var request = new XMLHttpRequest();        request.onreadystatechange = function () {            if (request.readyState == 4) {                var status = request.status;                if (status >= 200 && status < 300) {                    var res = JSON.parse(request.responseText);                    config.success && config.success(res);                } else {                    return config.fail && config.fail(status);                }            }        };        request.open('GET', config.url + "?" + params, true);        request.send(null);    }    static jsonp(config) {        config = config || {};        var params = HttpService.formatParams(config.data);        var Scrip=document.createElement('script');        Scrip.src = config.url + "?" + params + '&jsoncallback=' + 'HttpService.jsonpCallback';        this.callback = config.success;        document.body.appendChild(Scrip);    }    static jsonpCallback(e) {        this.callback(e);    }    static save(config) {        config = config || {};        var params = HttpService.formatParams(config.data);        var request = new XMLHttpRequest();        request.onreadystatechange = function () {            if (request.readyState == 4) {                var status = request.status;                if (status >= 200 && status < 300) {                    var res = JSON.parse(request.responseText);                    console.log(res);                    config.success && config.success(res);                } else {                    config.fail && config.fail(status);                }            }        };        request.open("POST", config.url, true);        request.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");        request.send(params);    }    static uploadFile(cfg) {        var config = cfg || {};        var xhr;        var fileObj = config.file; // js 擷取檔案對象        var url = config.url; // 接收上傳檔案的後台地址        var form = new FormData(); // FormData 對象        form.append(config.name, fileObj); // 檔案對象        xhr = new XMLHttpRequest();  // XMLHttpRequest 對象        xhr.open("post", url, true); //post方式，url為伺服器請求地址，true 該參數規定請求是否非同步處理。        xhr.onreadystatechange = function () {            if (xhr.readyState == 4) {                var status = xhr.status;                if (status >= 200 && status < 300) {                    var res = JSON.parse(xhr.responseText);                    console.log(res);                    config.success && config.success(res);                } else {                    config.fail && config.fail(status);                }            }        };        xhr.send(form); //開始上傳，發送form資料    }    static formatParams(data) {        var arr = [];        for (var name in data) {            arr.push(encodeURIComponent(name) + "=" + encodeURIComponent(data[name]));        }        arr.push(("v=" + Math.random()).replace(".", ""));        return arr.join("&");    }}

有問題歡迎交流指正