前端发送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();
1
2
3
4
5
6
7
8

2. ajax

采用jQuery.ajax。

$.ajax({
type:"GET",
url:"XXX/XXX/XXX",
data:{},
success:function(){},
error:function(){}
})
1
2
3
4
5
6
7

3. axios

基于promise实现，用于浏览器和node.js的HTTP客户端，本质上也是对原生XHR的封装，只不过它是Promise的实现版本

axios({
	method:"POST",
	url:"xXXX/XXX",
	data:{}
})
.then(function(){})
.catch(function(){})
1
2
3
4
5
6
7

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;
      });
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22