原生JS封装AJAX

一直以来ajax这一块用的都是第三方，如jquery内置的$.ajax，vue最佳拍档axios等，理论来说这些插件经过优化和更新迭代之后都已经很成熟了，但是在实际使用的过程中还是会出现一些意料之外的问题。

今天准备自己动手简单封装一下原生JS的Ajax，这样在使用的时候如果出现BUG，也能及时修补。所以简单做一下笔记，把代码贴出来，以供大家共同学习交流，也方便自己日后查阅。

封装代码

const imRequest = (options = {}) =>{
    //请求方式，默认为GET
    options.type = (options.type || "GET").toUpperCase();
    //返回值类型
    options.dataType = options.dataType || 'json';
    //是否异步
    options.async = options.async || true;
    //处理POST参数
    this.getParams = (data) =>{
        var arr = [];
        for (var param in data){
            // 处理URL字符串
            arr.push(encodeURIComponent(param) + '=' +encodeURIComponent(data[param]));
        }
        return arr.join('&');
    }
    var params = this.getParams(options.data);
    
    //创建ajax请求
    var xhr;
    window.XMLHttpRequest ? xhr = new XMLHttpRequest() : xhr = new ActiveXObject('Microsoft.XMLHTTP');

    //监听ajax状态
    xhr.onreadystatechange = function(){
        if (xhr.readyState == 4){
            var status = xhr.status;
            if (status >= 200 && status < 300 ){
                // 请求成功进入success回调
                if(options.dataType == 'json'){
                    //如果设置返回值类型为json，输出json格式，不设置默认也是json格式
                    options.success && options.success(JSON.parse(xhr.responseText));
                }else{
                    //如果设置返回值类型不为json，输出text格式
                    options.success && options.success(xhr.responseText);
                }
            }else{
                // 失败进入fault回调
                options.fail && options.fault(status);
            }
        }
    }
    //设置传输模式
    if(options.type == "GET"){
        xhr.open("GET", options.url + "?" + params, options.async);
        xhr.send(null);
    }else if(options.type == "POST"){
        xhr.open("POST", options.url, options.async);
        // 设置请求头
        xhr.setRequestHeader('content-type','application/x-www-form-urlencoded');
        xhr.send(params);
    }
}

调用

执行GET请求

imRequest({
    type: 'post', // 省略时默认为get，不区分大小写
    dataType: 'json', // 省略时默认为json
    async: true, // 省略时默认为true
    url: 'apiUrl?a=a&b=b',
    success: function(res){
        console.log(res)
    },
    fault: function(err){ // 返回错误信息
        console.log(err);
    }
})

执行POST请求

imRequest({
    type: 'post', // 省略时默认为get，不区分大小写
    dataType: 'json', // 省略时默认为json
    async: true, // 省略时默认为true
    url: 'apiUrl',
    data: {
        a: 'aaa',
        b: 'bbb'
    },
    success: function(res){
        console.log(res)
    },
    fault: function(err){ // 返回错误信息
        console.log(err);
    }
})

---

原文地址：http://blog.xuxiangbo.com/im-31.html