前端发送http请求的几种方式

前端发送http请求的几种方式

  • 1. XMLHttpRequest
  • 2. ajax
  • 3. axios
  • 4. fetch

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客户端

axios({
	method:"POST",
	url:"xXXX/XXX",
	dataL:{}
})
.then(function(){})
.catch(function(){})

4. fetch

基于promise设计的,支持async和await。

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;
      });

你可能感兴趣的:(前端)