原生JS封装ajax以及request

james 发布于2019-08-23 13:10 / 1903人阅读

摘要：一封装原生的为类以及用法见之前的文章根据确定请求的头部以及别的信息。二封装实用性的类在项目中经常需要将进行封装，使用类发起请求。请求不带请求带请求不带请求带请求不带请求带这个方法感觉可以再次进行封装。完整代码点击查看以上。

一、封装原生的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 请求数据封装

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/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