TypeScript 封装原生 Ajax_ts class方式封装xhr-优快云博客

本文链接：https://blog.youkuaiyun.com/ChaITSimpleLove/article/details/85564175

本文介绍如何使用TypeScript封装原生Ajax请求，实现CRUD操作。通过定义接口和抽象类，创建了一个可复用的Ajax类，支持POST、DELETE、PUT和GET方法。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

TypeScript 封装原生 Ajax，CRUD 对应post,delete,put,get 实列如下：

//1.定义 ajax 请求所需的参数接口 
interface IAjaxConfig { 
    type: string;
    url: string;
    data?: string;
    dataType: string;
} 

//2.定义 CRUD 对应的抽象方法
//1.定义 ajax 请求所需的参数接口 
interface IAjaxConfig { 
    type: string;
    url: string;
    data?: string;
    dataType: string;
} 
 
//2.定义 CRUD 对应的抽象方法
export abstract class TsAjax { 
    abstract _post(url: string, data?:string): any;
    abstract _put(url: string, data?:string): any;
    abstract _delete(url: string, data?:string): any;
    abstract _get(url: string, data?:string): any;
}
 
//3.继承抽象类并实现抽象类抽象方法，封装原生 ajax [CRUD]
export class Ajax extends TsAjax{
    //原生js封装的ajax 
    private doAjax(config: IAjaxConfig):any {
        let result: any = "";
        let xhr = new XMLHttpRequest();
 
        if (xhr == null) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");  /* 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： */
        } 
 
        if (xhr != null) {
            xhr.open(config.type, config.url, true);
            xhr.send(config.data);
            xhr.onreadystatechange = function () {
                console.log(xhr.statusText);
                let data = xhr.responseText;
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (config.dataType == 'json') {
                        result = JSON.parse(data);
                    } else {
                        result = data;
                    }
                } else { 
                    result = data; //error
                }
            }
        } else { 
            result = "Your browser does not support XMLHTTP.";
        }
        console.log(result);
        return result;
    }
 
    _post(url: string, data?:string): any { 
        return this.doAjax({
            type:'post',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }
 
    _delete(url: string, data?:string): any { 
        return this.doAjax({
            type:'delete',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }
 
    _put(url: string, data?:string): any { 
        return this.doAjax({
            type:'put',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }
 
    _get(url: string, data?:string): any { 
        return this.doAjax({
            type:'get',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }
}
 
//4.调用
let myAjax = new Ajax(); 
let d = myAjax._get("http://localhost:62902/api/values");abstract class TsAjax { 
    abstract _post(url: string, data?:string): any;
    abstract _put(url: string, data?:string): any;
    abstract _delete(url: string, data?:string): any;
    abstract _get(url: string, data?:string): any;
}

//3.继承抽象类并实现抽象类抽象方法，封装原生 ajax [CRUD]
export class Ajax extends TsAjax{
    //原生js封装的ajax 
    private doAjax(config: IAjaxConfig):any {
        let result: any = "";
        let xhr = new XMLHttpRequest();

        if (xhr == null) {
            xhr = new ActiveXObject("Microsoft.XMLHTTP");  /* 老版本的 Internet Explorer （IE5 和 IE6）使用 ActiveX 对象： */
        } 

        if (xhr != null) {
            xhr.open(config.type, config.url, true);
            xhr.send(config.data);
            xhr.onreadystatechange = function () {
                console.log(xhr.statusText);
                let data = xhr.responseText;
                if (xhr.readyState == 4 && xhr.status == 200) {
                    if (config.dataType == 'json') {
                        result = JSON.parse(data);
                    } else {
                        result = data;
                    }
                } else { 
                    result = data; //error
                }
            }
        } else { 
            result = "Your browser does not support XMLHTTP.";
        }
        console.log(result);
        return result;
    }

    _post(url: string, data?:string): any { 
        return this.doAjax({
            type:'post',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }

    _delete(url: string, data?:string): any { 
        return this.doAjax({
            type:'delete',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }

    _put(url: string, data?:string): any { 
        return this.doAjax({
            type:'put',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }

    _get(url: string, data?:string): any { 
        return this.doAjax({
            type:'get',
            data:data,
            url:url, //api
            dataType:'json'
        });
    }
}

//4.调用
let myAjax = new Ajax(); 
let d = myAjax._get("http://localhost:62902/api/values");