原生JS封裝ajax以及request

james 發布于2019-08-23 13:10 / 1778人閱讀

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

一、封裝原生的xhr為ajax類

xhr以及用法見之前的文章

1、根據url確定請求的頭部以及別的信息。

    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",
        }
    }

2、根據參數信息中的信息，確定請求的方法以及請求的參數

    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);
        }
    }

3、打開xhr并且根據頭部頭部以及其他信息設置，發送

    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);

4、實現鏈式編程：在每個函數的結尾return this; 5、實現完成后執行回調

這個問題結合鏈式編程一度的卡了很久。

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

二、封裝實用性的request類

在項目中經常需要將request進行封裝，使用ajax類發起請求。拼接請求的地址函數。

1、創建拼接方法。

var requstUrl = {
    baseURL: URL,
    API: {
        NEWS: "/news",
        LOGIN: "/",
    },
    // api為API中的參數，用于拼接url
    // method為API后的地址，用于拼接url最后面的東西。
    // params為get請求需要的參數
    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;
    }
}

2、確定各個請求。

function handleRequest() {

}

//  get請求帶參數。
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);
}

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

三、使用 1、使用代碼

2、結果

成功發起請求。

完整代碼點擊查看

以上。

云服務器 GPU云服務器原生js封裝ajax ajax原生js實現原生js實現ajax js ajax 請求數據封裝

文章版權歸作者所有，未經允許請勿轉載,若此文章存在違規行為，您可以聯系管理員刪除。

轉載請注明本文地址：http://specialneedsforspecialkids.com/yun/99266.html

全面分析前端的網絡請求方式

摘要：請求默認會攜帶同源請求的，而跨域請求則不會攜帶，設置的的屬性為將允許攜帶跨域。類型請求成功后的回調函數。另外，同樣提供了在環境下的支持，可謂是網絡請求的首選方案。當網絡故障時或請求被阻止時，才會標記為，如跨域不存在，網絡異常等會觸發。一、前端進行網絡請求的關注點大多數情況下，在前端發起一個網絡請求我們只需關注下面幾點：傳入基本參數（url，請求方式）請求參數、請求參數類型設...

Edison 2019-08-23 16:27 評論0 收藏0
Jquery ajax, Axios, Fetch區別之我見

摘要：我們都知道因為同源策略的問題，瀏覽器的請求是可能隨便跨域的一定要有跨域頭或者借助，但是，中可以設置為不跨域，如下所示這樣之后我們會得到一個為的返回。免費幫忙內推阿里等各大IT公司的崗位，有興趣可以帶簡歷加微信angeltune 引言前端技術真是一個發展飛快的領域，我三年前入職的時候只有原生XHR和Jquery ajax，我們還曾被JQuery 1.9版本版本以下不支持大文件請求這個...

YanceyOfficial 2019-08-22 13:49 評論0 收藏0
JS實現監控微信小程序

摘要：博客地址使用模塊化工具打包自己開發的庫文章中有提到，當時需要寫一個，監控小程序的后臺接口調用和頁面報錯，今天就來說下實現原理吧原理之前也做過瀏覽器端的數據埋點上報，其實原理大同小異通過劫持原始方法，獲取需要上報的數據，最后再執行原始方法，這博客地址《使用模塊化工具打包自己開發的JS庫》文章中有提到，當時需要寫一個SDK，監控小程序的后臺接口調用和頁面報錯，今天就來說下實現原理吧！ ...

Cheriselalala 2019-08-22 18:04 評論0 收藏0
一篇文章讓你學會如何選擇 JS HTTP 請求庫

摘要：本文將帶你了解不同請求的原理，以及如何為項目選擇合適的請求庫。小程序年微信小程序上線，隨后各大平臺都推出自己的小程序。下面為目前較火的請求庫。支持微信小程序和瀏覽器是一個基于的請求庫，可以用在微信小程序和瀏覽器中，對上述平臺都做了兼容。以前前端提到網絡請求通常是指瀏覽器，但現在隨著 Node.js、小程序的出現，網絡請求不再局限于瀏覽器。本文將帶你了解不同請求的原理，以及如何為項目選...

Render 2019-08-26 13:29 評論0 收藏0