手动封装ajax

灰太狼 2021-09-30 01:46 311阅读 0赞

### 在开始之前先想一想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('如果设置了请求方式为同步，即使设置了返回数据格式也不会生效');
        }
    };

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

![aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8zMC8xNjdmZDFmZWE2ZWFhZTkxP3c9MTA0MyZoPTMxMCZmPXBuZyZzPTQzMTg3][]

## 接下来是数据的处理 ##

*  首先我们需要保证请求格式，不管传入时是大写还是小写，在我们设置请求格式时要是全部大写
 *  还有就是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 的形式处理数据也可以使用回调函数
    })

转载自 [https://juejin.im/post/5c2839566fb9a049fa0fd926][https_juejin.im_post_5c2839566fb9a049fa0fd926]  
来源：掘金

[aHR0cHM6Ly91c2VyLWdvbGQtY2RuLnhpdHUuaW8vMjAxOC8xMi8zMC8xNjdmZDFmZWE2ZWFhZTkxP3c9MTA0MyZoPTMxMCZmPXBuZyZzPTQzMTg3]: /images/20210923/90d5e6d5a92546b6a263c8a5eed5677c.png
[https_juejin.im_post_5c2839566fb9a049fa0fd926]: https://juejin.im/post/5c2839566fb9a049fa0fd926