TypeScript 封装原生 Ajax

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

1.定义 ajax 请求所需的参数接口

interface IAjaxConfig { 
    type: string;
    url: string;
    data?: string;
    dataType: string;
} 

2.定义 CRUD 对应的抽象方法

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

来源：CSDN

作者：人间艾斯卡诺

链接：https://blog.csdn.net/weixin_42863800/article/details/104718192