[ 造轮子 ] 手动封装 AJAX （三） —— 最终版

头像
yhtx1997
    阅读 11 分钟
    18

    导言

    在开始之前先想一想ajax是怎样的流程

    • 首先打开一个连接
    • 发送数据
    • 返回结果

    我们要自定义的设置有哪些

    • 设置请求方式
    • 设置请求头
    • 设置返回数据格式
    • 返回成功后或失败后

    我们要做的功能有哪些

    • 数据校验
    • 统一数据的格式
    • 支持文件上传
    • 对于传入参数的容错处理
    • 超时处理 //modify time 2019-01-01

    经过以上思考基本结构大致成型

    1. 数据校验
    2. 数据格式的统一
    3. 建立连接
    4. 设置请求头
    5. 设置返回数据格式
    6. 发送数据
    7. 返回成功或失败
    8. 超时处理

    代码如下

    class AJAX {
    constructor({url = "",method = "GET",data = {},async = true,success,error,resType = "",headers = {}},time = 5000) {
        //集中管理传递过来的参数
        this.option = {url,method,data,async,success,error,resType,headers,time};
        this.timeout;
        this.xhr = new XMLHttpRequest();
        this.start();
    }
    start() {
        //数据校验
        this.checkOption();
        //数据格式的统一
        this.initOption();
        //建立连接
        this.open();
        //设置请求头
        this.setHeaders();
        //设置返回数据格式
        this.setResponseType();
        //发送数据
        this.sendData()
        //返回成功或失败
        this.responseData();
    };
    
}

    接下来添加校验功能

    • 首先url不能是空
    • 然后请求头必须是字面量对象格式 {key:value}
    • 再有就是一些简单的警告

    代码如下

    checkOption() {
    let {url,async,resType,headers,time} = this.option;
    if (url === '') {
        throw new Error('请求地址不能为空'); //打印错误信息，并停止当前进程
        //Console.error('请求地址为空'); 也可以打印错误信息，但是不能停止当前进程
    }

    if(typeof headers !== 'object'){
        throw new Error('设置请求头时请传入 {key:value，key:value...} 的格式');
    }
    
    if(typeof resType !== 'string'){
        throw new Error('设置返回数据格式时请传入字符出串格式');
    }
    
    if(typeof time !== 'number'){
        throw new Error('超时时间请传入数字类型数据');
    }
    
    if (typeof url !== 'string') {
        //输出警告信息
        console.warn('当前请求地址不是字符串，现在将其尝试转换为字符串');
    }
    if (async === false && resType != '') {
        console.warn('如果设置了请求方式为同步，即使设置了返回数据格式也不会生效');
    }
};

    需要注意的是返回数据格式可以设置这几个值，之后会写一个详细的传参指南

    TIM截图20181229182412.png

    接下来是数据的处理

    • 首先我们需要保证请求格式，不管传入时是大写还是小写，在我们设置请求格式时要是全部大写
    • 还有就是url可能是数字的，需要转换成字符
    • 为了方便将 async不是布尔型的转成布尔型，这是什么概念，就是传参时 写数字 1 是异步 数字 0 是同步
    • 将需要发送的内容做一个处理
    initOption() {
    let {url,async,method} = this.option;
    //url不是字符串转换成字符串
    if (typeof url !== 'string') {
        try {
            this.option.url = url.toString();
            console.log(`转换成功: "${this.option.url}"`);
        } catch (error) {
            throw new Error('url 转换字符串失败');
        }
    }
    //async不是布尔型转成布尔型
    if(typeof async !=='boolean'){
        async == true ? this.option.async = true : this.option.async = false;
    }

    //将 post get 转换为大写
    this.option.method = method.toUpperCase();
    
    //post和get数据初始化
    if(this.option.method != 'FORMDATA'){// [1]
        let data = this.option.data;
        if(typeof data === 'object'){//[2]
            if( this.option.method === 'GET'){
                let arr=[];
                for(let name in data){
                    arr.push(`${name}=${data[name]}`);//[3]
                }
                let strData=arr.join('&');//[4]
                this.option.data=`?${strData}`;//[5]
            }else if( this.option.method === 'POST'){
                let formData = new FormData();//[6]
                for(let key in data){
                    formData.append(`${key}`,`${data[key]}`);
                }
                this.option.data=formData;
            }
            
        }else if(typeof data === 'string' && this.option.method === 'GET'){//[7]
                this.option.data=`?${data}`;
        }
   }
};

    这里详细说说对需要发送数据的处理,按照序号来说

    1. 判断它不是 formData ，也就是说是 GET 和 POST 时我们进行数据处理，是 formData 不进行处理，直接发送，这是为了能够实现文件上传功能
    2. 判断它是不是 {key:vlue} 这种格式的，是的话解析或拼接，不是的话跳到 [7] 如果是字符串直接加到 url 后边
    3. [3] [4] [5] 这里是为了处理成 url?key=value$key=value 这种 url 传参的数据格式
    4. [6] 是新建了一个 FormData 对象，是 ajax2.0 里边的，它最主要的可以用 ajax 实现文件上传功能，在这里是为了代码简单

    打开连接

    经过之前的数据处理这里只需要判断下是 GET 还是其他方式（post formdata），然后选择对应的连接方式

     open(){
        let {method,url,async,data} = this.option;
        if(method === 'GET'){
            this.xhr.open(method,url+data,async);
        }else{
            this.xhr.open(method,url,async);
        }
    }

    设置自定义请求头

    将传入的参数进行解析，然后设置自定义请求头
    代码如下

    setHeaders(){
        let headers = this.option.headers;
        for(let key in headers){
            this.xhr.setRequestHeader(`${key.toString()}`,`${headers[key].toString()}`)
        }
    }

    设置返回数据格式、发送数据

    • 由于同步请求时不能设置返回数据格式，所以做下判断
    • 发送数据这里，在经过之前的数据处理后只有 GET 方式有所区别，其他两种没有区别（支持 GET POST 以及我自己定义的一种，更多请求方法可自行扩展）
    
setResponseType() {
    if (this.option.async) {
        this.xhr.responseType = this.option.resType;
    }
}

    添加超时处理

    sendData(){
    if(this.option.method == 'GET'){
        this.xhr.send();
    }else{
        this.xhr.send(this.option.data);
    }
    this.timeout = setTimeout(()=>{ 
        typeof this.option.error === 'function' && this.option.error('请求超时，默认超时时间为 5000 毫秒');
        this.option.reject('请求超时，默认超时时间为 5000 毫秒');
    }, this.option.time);
}

    请求完成后的数据返回

    • 请求完成后会返回数据

    判断 success 以及 error 是不是函数，是的话会将数据返回给 success 或者将错误信息返回给 error

    responseData(){
    this.xhr.onload = ()=>{
        if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){
            typeof this.option.success === 'function'  && this.option.success(this.xhr.response);
            
        }else{
            typeof this.option.error === 'function' && this.option.error(this.xhr.statusText);
            
        }
    }
}

    在实现基本功能后，突然想到 jQuery 的 ajax 是会返回一个 promise 对象，可以同时使用回掉函数，或者使用 then 和 catch 来处理数据
    因此修改了下传入参数，以及返回数据的处理

    传参时代码如下

    //add resolve reject
class AJAX {
    constructor({url = "",method = "GET",data = {},async = true,success,error,resType = "",headers = {},resolve,reject}) {
        this.option = {url,method,data,async,success,error,resType,headers,resolve,reject};
        this.xhr = new XMLHttpRequest();
        this.start();
    }
}

    返回数据时代码如下

    responseData(){
    this.xhr.onload = ()=>{
        if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){
            clearTimeout(this.timeout);
            typeof this.option.success === 'function'  && this.option.success(this.xhr.response);
            this.option.resolve(this.xhr.response);//add
        }else{
            clearTimeout(this.timeout);
            typeof this.option.error === 'function' && this.option.error(this.xhr.statusText);
            this.option.reject(this.xhr.statusText);//add
        }
    }
}

    最终代码

    class AJAX {
    constructor({url = "",method = "GET",data = {},async = true,success,error,resType = "",headers = {},resolve,reject}) {
        this.option = {url,method,data,async,success,error,resType,headers,resolve,reject};
        this.xhr = new XMLHttpRequest();
        this.start();
    }
    start() {
        //数据校验
        this.checkOption();
        //数据格式的统一
        this.initOption();
        //建立连接
        this.open();
        //设置请求头
        this.setHeaders();
        //设置返回数据格式
        this.setResponseType();
        //发送数据
        this.sendData()
        //返回成功或失败
        this.responseData();
    };
    checkOption() {
        let {url,async,resType,headers} = this.option;
        if (url === '') {
            throw new Error('请求地址不能为空'); //打印错误信息，并停止当前进程
            //Console.error('请求地址为空'); 也可以打印错误信息，但是不能停止当前进程
        }

        if(typeof headers !== 'object'){
            throw new Error('设置请求头时请传入 {key:value，key:value...} 的格式');
        }
        
         if(typeof time !== 'number'){
            throw new Error('超时时间请传入数字类型数据');
        }
        
        if(typeof resType !== 'string'){
            throw new Error('设置返回数据格式时请传入字符出串格式');
        }
        // ""                与设置为"text"相同， 是默认类型 （实际上是 DOMString）
        // "arraybuffer"    将接收到的数据类型视为一个包含二进制数据的 JavaScript ArrayBuffer 
        // "blob"            将接收到的数据类型视为一个包含二进制数据的 Blob 对象 
        // "document"        将接收到的数据类型视为一个 HTML Document 或 XML XMLDocument ，这取决于接收到的数据的 MIME 类型
        // "json"            将接收到的数据类型视为 JSON 解析得到的
        // "text"            将接收到的数据类型视为包含在 DOMString 对象中的文本
        if (typeof url !== 'string') {
            //输出警告信息
            console.warn('当前请求地址不是字符串，现在将其尝试转换为字符串');
        }
        if (async === false && resType != '') {
            console.warn('如果设置了请求方式为同步，即使设置了返回数据格式也不会生效');
        }
    };
    
    initOption() {
        let {url,async,method} = this.option;
        //url不是字符串转换成字符串
        if (typeof url !== 'string') {
            try {
                this.option.url = url.toString();
                console.log(`转换成功: "${this.option.url}"`);
            } catch (error) {
                throw new Error('url 转换字符串失败');
            }
        }
        //async不是布尔型转成布尔型
        if(typeof async !=='boolean'){
            async == true ? this.option.async = true : this.option.async = false;
        }

        //将 post get 转换为大写
        this.option.method = method.toUpperCase();
        
        //post和get数据初始化
        if(this.option.method != 'FORMDATA'){
            let data = this.option.data;
            if(typeof data === 'object'){
                if( this.option.method === 'GET'){
                    let arr=[];
                    for(let name in data){
                        arr.push(`${name}=${data[name]}`);
                    }
                    let strData=arr.join('&');
                    this.option.data=`?${strData}`;
                }else if( this.option.method === 'POST'){
                    let formData = new FormData();
                    for(let key in data){
                        formData.append(`${key}`,`${data[key]}`);
                    }
                    this.option.data=formData;
                }
                
            }else if(typeof data === 'string' && this.option.method === 'GET'){
                this.option.data=`?${data}`;
            }
       }
    };

    open(){
        let {method,url,async,data} = this.option;
        if(method === 'GET'){
            this.xhr.open(method,url+data,async);
        }else{
            this.xhr.open(method,url,async);
        }
    }

    setHeaders(){
        let headers = this.option.headers;
        for(let key in headers){
            this.xhr.setRequestHeader(`${key.toString()}`,`${headers[key].toString()}`)
        }
    }

    setResponseType() {
        if (this.option.async) {
            this.xhr.responseType = this.option.resType;
        }
    }

    sendData(){
        if(this.option.method == 'GET'){
            this.xhr.send();
        }else{
            this.xhr.send(this.option.data);
        }
        this.timeout = setTimeout(()=>{ 
            typeof this.option.error === 'function' && this.option.error('请求超时，默认超时时间为 5000 毫秒');
            this.option.reject('请求超时，默认超时时间为 5000 毫秒');
        }, this.option.time);
    }

    responseData(){
        this.xhr.onload = ()=>{
            if(this.xhr.status >= 200 && this.xhr.status < 300 || this.xhr.status === 304){
                clearTimeout(this.timeout);
                typeof this.option.success === 'function'  && this.option.success(this.xhr.response);
                this.option.resolve(this.xhr.response);//add
            }else{
                clearTimeout(this.timeout);
                typeof this.option.error === 'function' && this.option.error(this.xhr.statusText);
                this.option.reject(this.xhr.statusText);//add
            }
        }
    }

    all(promises) {
        return Promise.all(promises);
    };
}

function ajax({url,method,data,async,success,error,resType,headers,time}){
    return new Promise((resolve, reject) => {
        return new AJAX({url,method,data,async,success,error,resType,headers,time,resolve,reject});
    });
}

    使用时可以将代码复制粘贴到单独的 js 文件然后用 script 标签引入
    也可以添加一行 export 代码将最后的 ajax 暴露出去 使用import 引入

    具体使用方法用法

    ajax({
    url:'api/login',
    method:'post',//支持 GET POST 和我自定义的 FORMDATA ，传入时不区分大小写
    data = {
        name:"yhtx",
        id:"1997"
    },//除了这种还支持字符串 "name=yhtx&id=1997"；以及 formData 数据，在传入formData 数据时请将 method 设置为 FORMDATA
    async = true,//可以使用数字 1 代替 true ，数字 0 代替 false
    time = 5000,//请求超时时间，默认为 5000 毫秒
    success(res){
        //可以使用回调的形式处理数据也可以使用 then
    },error(err){
        //可以使用回调的形式处理错误也可以使用 catch
    },
    resType = "",//可以传入 "" "arraybuffer" "blob" "document" "json" "text"    
    headers = {
        mycookie: "46afqwiocibQEIJfa498./&678" //使用对象的方式传参
    }
}).then((res)=>{
    //可以使用 then 的形式处理数据也可以使用回调函数
}).catch((err)=>{
    //可以使用 catch 的形式处理数据也可以使用回调函数
})
    javascriptajaxpromiseecmascript-6
    yhtx1997
    410 声望10 粉丝
    « 上一篇
    [ 造轮子 ] 手动封装 AJAX （二） —— ES6 版
    下一篇 »
    [ webpack4 ] 配置属于自己的打包系统教程（一）—— 基础配置篇

    引用和评论

    推荐阅读
    头像
    JavaScript 设计模式 (四) 生成器（建造者）模式 Builder pattern

    yhtx1997阅读 1.6k

    头像
    腾讯新闻中心首页改版啦

    小蚊酱赞 11阅读 9.1k评论 7

    头像
    前端如何入门 Go 语言

    robin赞 26阅读 7.6k评论 8

    头像
    100个React最佳实践小技巧

    夕水赞 16阅读 2.2k评论 4

    头像
    前端开发工具

    寒青赞 15阅读 4.6k

    头像
    开发插件集合

    寒青赞 12阅读 3k

    头像
    JS校验身份证号

    寒青赞 10阅读 4.2k评论 2

    0 条评论
    得票最新