除了博客外内容均来自网上,如有问题请联系站长及时删除。QQ:2978968560
蜀ICP备19040930号
川公网安备 51010702001708号
始于2019年12月的这次旅行,还未曾看到终点!
/*jshint esversion: 9 */
//回调类型请求工具
//官方文档 https://developer.mozilla.org/zh-CN/docs/Web/API/XMLHttpRequest
class XMLHttp{
constructor({
timeOut=13000000,
baseUrl='',
}={}){
this.timeOut = timeOut;
this.baseUrl = baseUrl;
this.intercept = { //拦截器
request:{
success:undefined,
error:undefined,
},
response:{
success:undefined,
error:undefined,
},
};
}
createRequest({
method,url,params,responseType,async=true,withCredentials=false,
readyStateChange,
loadStart,
progress,
abort,
error,
load,
timeOut,
loadend,
}){
try{
const xhr = new XMLHttpRequest();
xhr.onreadystatechange = ()=>{
readyStateChange && readyStateChange(xhr);
};
xhr.upload.addEventListener("progress", (evt)=>{ //上传进度
progress && progress(evt);
});
xhr.addEventListener("load", ()=>{
load && load(xhr);
});
xhr.addEventListener("error", ()=>{
error && error(xhr);
});
xhr.addEventListener("abort", ()=>{
abort && abort(xhr);
});
xhr.addEventListener("loadstart", ()=>{
loadStart && loadStart(xhr);
});
xhr.addEventListener("loadend", ()=>{
loadend && loadend(xhr);
});
if(async){ //异步才添加超时
xhr.timeout = this.timeOut;
xhr.addEventListener("timeout", ()=>{
timeOut && timeOut(xhr);
});
xhr.responseType = responseType || 'text'; //返回数据类型
}
xhr.withCredentials = withCredentials; //指示是否应使用Cookie或授权标头等凭据进行跨站点访问控制请求。
xhr.open(
method ? method.toUpperCase() : 'GET',
this.baseUrl + url,
async,
);
this.intercept.request.success && this.intercept.request.success(xhr); //请求拦截
xhr.send(params);
return xhr;
}catch(e){
this.intercept.request.error && this.intercept.request.error(e);
}
}
setRequestIntercept(success,error){ //写入请求拦截器
this.intercept.request.success = success;
this.intercept.request.error = error;
}
setResponseIntercept(success,error){ //写入返回数据拦截器
this.intercept.response.success = success;
this.intercept.response.error = error;
}
requestMode({ //请求方式
url='',params={},async,withCredentials,method,
onSuccess=()=>{},
error=()=>{},
progress=()=>{},
loadend=()=>{},
}={}){
return this.createRequest({
url,
params,
async,
withCredentials,
method,
progress,
loadend,
readyStateChange:(xhr)=>{
if(xhr.readyState !== 4) return;
if(xhr.status === 200) { //请求成功正确
this.intercept.response.success? //返回数据拦截
this.intercept.response.success(
xhr,
{
onSuccess,
error,
},
):
onSuccess(xhr);
} else { //请求失败
this.intercept.response.error? //返回数据拦截
this.intercept.response.error(
xhr,
{
onSuccess,
error,
},
):
error(xhr);
}
},
});
}
get(option){
return this.requestMode({
...option,
method:'get',
});
}
post(option){
return this.requestMode({
...option,
method:'post',
});
}
put(option){
return this.requestMode({
...option,
method:'put',
});
}
delete(option){
return this.requestMode({
...option,
method:'delete',
});
}
}
/*
test 测试
*/
// let a = new XMLHttp();
// a.get({
// async:false,
// method:'get',
// url:'https://www.w3school.com.cn/js/js_try_catch.asp',
// onSuccess(xhr){
// console.log(xhr);
// },
// })
// console.log(1);