摘要：一封裝原生的為類以及用法見之前的文章根據(jù)確定請求的頭部以及別的信息。二封裝實用性的類在項目中經(jīng)常需要將進行封裝，使用類發(fā)起請求。請求不帶請求帶請求不帶請求帶請求不帶請求帶這個方法感覺可以再次進行封裝。完整代碼點擊查看以上。

xhr以及用法見之前的文章

    var _headerConfig = {};
    if(url.indexOf("getcaptcha") !== -1) {
        _headerConfig = {
            Accept: "image/png",
            responseType: "arraybuffer",
        }
    } else if(url.indexOf("files/upload") !== -1) {
        _headerConfig = {
            "Content-Type": "multipart/form-data",
            responseType: "json",
        }
    } else {
        _headerConfig = {
            "Content-Type": "application/json",
            Accept: "application/json",
            responseType: "json",
        }
    }

    if("method" in options) {
        options.method = options.method.toUpperCase();
    } else {
        options.method = "GET";
    }
    if(options.method !== "GET") {
        if(!(options.params instanceof FormData)) {
            options.params = JSON.stringify(options.params);
        }
    }

    this.xhr.open(options.method, url, true);
    for(var _i in _headerConfig) {

        if(_i === "responseType") {
            this.xhr.responseType = _headerConfig[_i];
        } else {
            this.xhr.setRequestHeader(_i, _headerConfig[_i]);
        }
    }
    if(token) {
        this.xhr.setRequestHeader("token", token);
    }
    this.xhr.send(options.params);

這個問題結(jié)合鏈?zhǔn)骄幊桃欢鹊目撕芫谩?/p>

ajax.prototype.complete = function(completeFunction) {
    this.xhr.onreadystatechange = function(e) {
        if(this.readyState === 4) {
            completeFunction(this);
        }
    }
    return this;
}

在項目中經(jīng)常需要將request進行封裝，使用ajax類發(fā)起請求。拼接請求的地址函數(shù)。

var requstUrl = {
    baseURL: URL,
    API: {
        NEWS: "/news",
        LOGIN: "/",
    },
    // api為API中的參數(shù)，用于拼接url
    // method為API后的地址，用于拼接url最后面的東西。
    // params為get請求需要的參數(shù)
    createUrl: function(api, method, params) {
        var _requestUrl = this.baseURL + this.API[api] + method;
        if(params) {
            for(var i of params) {
                _requestUrl += (_requestUrl.indexOf("?") == -1 ? "?" : "&");
                _requestUrl += name + "=" + value;
            }
        }
        return _requestUrl;
    }
}

function handleRequest() {

}

//  get請求帶參數(shù)。
handleRequest.prototype.getDataUseGet = function(api, method, params) {
    var _url;
    var ajax = new Ajax();
    var token = sessionStorage.getItem("token");
    if(params) {
        _url = requstUrl.createUrl(api, method, params);
    } else {
        _url = requstUrl.createUrl(api, method);
    }
    return ajax.request(_url, {
        method: "GET",
        params: params
    }, token);
}

//  get請求不帶token
handleRequest.prototype.getDataUseGetWithoutToken = function(api, method, params) {
    var _url;
    var ajax = new Ajax();
    if(params) {
        _url = requstUrl.createUrl(api, method, params);
    } else {
        _url = requstUrl.createUrl(api, method);
    }
    return ajax.request(_url, {
        method: "GET",
        params: params
    });
}

//  post請求帶token
handleRequest.prototype.getDataUsePost = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem("token");
    var ajax = new Ajax();
    console.log(createAjaxObj(_url, {
        method: "POST",
        params: params
    }, token));
    return ajax.request(_url, {
        method: "POST",
        params: params
    }, token);
}

//  post請求不帶token
handleRequest.prototype.getDataUsePostWithOutToken = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: "POST",
        params: params
    });
}

//  put請求帶token
handleRequest.prototype.getDataUsePut = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem("token");
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: "PUT",
        params: params
    }, token);
}

//  put請求不帶token
handleRequest.prototype.getDataUsePutWithOutToken = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: "PUT",
        params: params
    });
}

//  delete請求帶token
handleRequest.prototype.deleteData = function(api, method, params) {
    var _url = requstUrl.createUrl(api, method);
    var token = sessionStorage.getItem("token");
    var ajax = new Ajax();
    return ajax.request(_url, {
        method: "DELETE",
        params: params
    }, token);
}

這個方法感覺可以再次進行封裝。

成功發(fā)起請求。

完整代碼點擊查看

以上。