[ 造轮子 ] 手动封装 AJAX （二） —— ES6 版

相比前一版本除了使用 ES6 与法外还有以下改动
现在不需要按顺序输入参数
会针对 GET 和 POST 做不同的数据处理
可以自定义设置请求头
增加了参数数据类型的判断
增加了

调用代码示例
ajax({
url:’1.json’,
method:’post’,
resType:’json’,
headers:{
id:465,
name:123,
key:798
},
data:{
name: “yhtx”,
id: “1997”
},
success(res){
console.log(res);
},
error(){
console.log(‘error’)
}
})
调用效果图

核心代码没有多少变化，因为只有这一种使用方法
// 不支持低版本浏览器
const ajax = ({url,method=”GET”,data={}, async = true ,success,error,resType=””,headers={}})=>{
// 错误判断 url 为必填项
if(!url || url === ”){
throw new Error(‘ 请求地址不能为空 ’);
}

// 变量声明
let dataArr = [];
let dataStr = “”;
let xhr = new XMLHttpRequest();// 不兼容低版本浏览器
let formData = new FormData();
// 将小写转换成大写
method = method.toUpperCase();

// 初始化 data
switch (method){
case ‘POST’:
for(let key in data){
formData.append(`${key}`,`${headers[key]}`);// 将 data 转换成 FormData 对象的字段
}
break;
case ‘GET’:
for(let key in data){
dataArr.push(`${encodeURIComponent(key)}=${encodeURIComponent(data[key])}`);
}
strData=dataArr.join(‘&’);
break;
}

// 设置返回数据格式
if(typeof async === ‘boolean’ && async){// 如果设置了同步就不能设置返回数据格式
if(typeof resType === ‘string’){
xhr.responseType = resType; // 在不设置 responseType 的时候默认为 text
}else{
throw new Error(‘ 设置返回数据格式时，请使用字符串类型 ’);
}
}

// 发起请求
switch (method){
case ‘POST’:
xhr.open(method , url , async);
break;
case ‘GET’:
xhr.open(method , `${url}?${strData}` , async);
break;
}
// 设置请求头 必须在 xhr.open() 后才可以
// 判断是否设置
if(typeof headers === ‘object’ && Object.keys(headers).length !== 0){
// 循环 headers 设置请求头
for(let key in headers){
xhr.setRequestHeader(`${key}`,`${headers[key]}`);
// xhr.setRequestHeader(“Content-type”, “application/x-www-form-urlencoded”);
}
//console.log(Object.keys(headers));// 返回一个数组，数组成员是对象中所有的键
//console.log(Object.values(headers));// 返回一个数组，数组成员是对象中所有的值
}

xhr.send(formData);// 发送数据

// 监听状态
xhr.onreadystatechange = ()=>{
if(xhr.readyState === 4){
let res = xhr.response;
if(xhr.status >= 200 && xhr.status < 300 || xhr.status === 304){
typeof success === ‘function’ && success(res);
}else{
typeof error === ‘function’ && error(res);
}
}
}
}

ajax({
url:’1.json’,
method:’post’,
resType:’json’,
headers:{
id:465,
name:123,
key:798
},
data:{
name: “yhtx”,
id: “1997”
},
success(res){
console.log(res);
},
error(){
console.log(‘error’)
}
})