有点类似于 jquery 的 ajax 方法
简单的封装一下,写的很糙,还有很多需要改善的地方,例如把ip和端口独立出来等等… 就先这样用着吧.
先确定一个基本的样式
{
url:'' // 请求地址
method:'': // 请求方式
contentType:'', // contentType
data:{}, // 请求的参数或者发送的数据
success:function(){} // 请求成功时返回的函数
err:function(){} // 请求失败时返回的函数
}
首先创建一个类 AJAX
export default class AJAX{
static obj;
static ajax(_obj) {
AJAX.obj = _obj;
let xhr = new XMLHttpRequest();
xhr.addEventListener("readystatechange", AJAX.readystatechangeHandler);
// 判断 请求的类型
if (AJAX.obj.method.toLowerCase() === "get") {
// 拼接 url
let url = AJAX.obj.url + "?" + AJAX.concatParam(AJAX.obj.data);
xhr.open("get", url);
xhr.send();
} else if (AJAX.obj.method.toLowerCase() === "post") {
xhr.open("post", AJAX.obj.url);
xhr.setRequestHeader("Content-Type", AJAX.obj.contentType);
xhr.send(AJAX.concatParam(AJAX.obj.data));
}
}
// 拼接参数的函数
static concatParam(o) {
var arr = [];
for (let prop in o) {
arr.push(prop + "=" + o[prop]);
}
return arr.join("&");
}
// xhr 事件监听函数
static readystatechangeHandler(e) {
if (this.readyState === 4) {
if (this.status === 200) {
// 请求成功
AJAX.obj.success && AJAX.obj.success(this.response);
} else {
AJAX.obj.error && AJAX.obj.error("ajax 请求数据失败,请检查信息是否错误!");
}
}
}
}
使用:
import AJAX from './AJAX.js';
AJAX.ajax({
url:'http://localhost:3000/users/login',
method:'post',
contentType:'application/x-www-form-urlencoded',
data:{
uname:'xiaosai',
upwd:'123456'
},
success:res=>{
console.log(res);
},
error:errmsg=>{
console.log(errmsg);
}
})