前端发送http请求的几种方式
1. XMLHttpRequest
所有现代浏览器均内建了XMLHttpRequest对象,IE5、IE6使用ActiveX对象。
var xmlHttp;
if(window.XMLHttpRequest){
xmlHttp = new XMLHttpRequest();
}else{
xmlHttp = new ActiveXObject();
}
xmlHttp.open(method,url,async);
xmlHttp.send();
2. ajax
采用jQuery.ajax。
$.ajax({
type:"GET",
url:"XXX/XXX/XXX",
data:{},
success:function(){},
error:function(){}
})
3. axios
基于promise实现,用于浏览器和node.js的HTTP客户端,本质上也是对原生XHR的封装,只不过它是Promise的实现版本
axios({
method:"POST",
url:"xXXX/XXX",
data:{}
})
.then(function(){})
.catch(function(){})
4. fetch
基于promise设计的,支持async和await。
存在的问题:
1.etch只对网络请求报错,对400,500都当做成功的请求,服务器返回 400,500 错误码时并不会 reject,只有网络错误这些导致请求不能完成时,fetch 才会被 reject。
2.fetch默认不会带cookie,需要添加配置项: fetch(url, {credentials: ‘include’})
3.fetch不支持abort,不支持超时控制,使用setTimeout及Promise.reject的实现的超时控制并不能阻止请求过程继续在后台运行,造成了流量的浪费
3.fetch没有办法原生监测请求的进度,而XHR可以
fetch(url,method,body,headers)
.then(response=>{
//对结果进行处理
switch (response.status) {
case 200:
return response.json();break;
case 401:
let path = router.currentRoute.path;
router.push({path:'/',query:{returnUrl:path}});break;//指定401后的跳转地址
case 500:
return response.json();break;
default:
return response
}
})
.catch(err => {
Notification.error({//elementUI的通知功能
title:'请求错误',
message:`${url}请求错误`
});
return err;
});