一直以来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);
}
})
