一、ajax、fetch 和 axios 简介

1.1、ajax

ajax是最早出现发送后端请求的技术，属于原生 js 。ajax使用源码，请点击《原生 ajax 请求详解》查看。一般使用之前，我们都需要把它们封装使用，就以 jQuery 的 ajax 为例。

封装的 ajax 如下：

 
 
 

  
  
  
const $ = {}; 
  
  
  
$.ajax = (obj)=>{ 
  
  
  
 var xhr; 
  
  
  
 if (window.XMLHttpRequest) { 
  
  
  
  xhr = new XMLHttpRequest(); 
  
  
  
 } else if (window.ActiveXObject) { // IE 
  
  
  
  try { 
  
  
  
   xhr = new ActiveXObject('Msxml2.XMLHTTP'); 
  
  
  
  } catch (e) { 
  
  
  
   try { 
  
  
  
    xhr = new ActiveXObject('Microsoft.XMLHTTP'); 
  
  
  
   } catch (e) {} 
  
  
  
  } 
  
  
  
 } 
  
  
  
 if (xhr) { 
  
  
  
  xhr.onreadystatechange = () =>{ 
  
  
  
   if (xhr.readyState === 4) { 
  
  
  
    if (xhr.status === 200) { 
  
  
  
     obj.success(xhr.responseText); //返回值传callback 
  
  
  
    } else { 
  
  
  
     //failcallback 
  
  
  
     obj.error('There was a problem with the request.'); 
  
  
  
    } 
  
  
  
   } else { 
  
  
  
    console.log('still not ready...'); 
  
  
  
   } 
  
  
  
  }; 
  
  
  
  xhr.open(obj.method, obj.url, true); 
  
  
  
  // 设置 Content-Type 为 application/x-www-form-urlencoded 
  
  
  
  // 以表单的形式传递数据 
  
  
  
  xhr.setRequestHeader('Content-Type', 'application/x-www-form-urlencoded'); 
  
  
  
  xhr.send(util(obj.data));//处理body数据 
  
  
  
 } 
  
  
  
  
  
  
  
 //处理数据 
  
  
  
 const util = (obj)=>{ 
  
  
  
 var str = '' 
  
  
  
 for (key in obj){ 
  
  
  
  str += key +'='+obj[key]+'&' 
  
  
  
  } 
  
  
  
  return str.substring(0,str.length-1) 
  
  
  
 }     
  
  
  
} 
 
 
 

 封装完成，开始使用的时候你会发现，body和header处理得有些乱，还有回调地狱的问题，所以我们出现了新的 fetch 请求技术。

1.2、fetch

fetch 首先解决了回调地狱的问题，他返回的结果是一个 Promise 对象，对 Promise 不熟的可点击《Promise详解》。

fetch 使用如下：

 
 
 

  
  
  
fetch(url,options).then(response=>{ 
  
  
  
// handle HTTP response 
  
  
  
},error=>{ 
  
  
  
// handle network error 
  
  
  
}) 
 
 
 

fetch 发送网络请求时，可以传输任意数据格式，非常简便。但是 fetch 的超时、终止取消并不方便，只能通过取消 Promise 来完成，如果有多个 fetch 请求时，更难处理。除此之外，fetch 是比较新的技术，低版本浏览器和IE浏览器支持性不好。

1.3、axios

axios 功能非常强大，包括 取消请求，超时处理，进度处理等等。但它的本质还是 ajax，基于 Promise 进行封装，既解决回调地狱问题，又能很好地支持各个浏览器。

axios使用代码如下：

 
 
 

  
  
  
axios.post('/user', { 
  
  
  
 firstName: 'Fred', 
  
  
  
 lastName: 'Flintstone' 
  
  
  
}) 
  
  
  
.then(function (response) { 
  
  
  
 console.log(response); 
  
  
  
}) 
  
  
  
.catch(function (error) { 
  
  
  
 console.log(error); 
  
  
  
}); 
 
 
 

二、ajax、fetch、axios的优缺点

2.1、ajax 的优缺点：

• 属 js 原生，基于XHR进行开发，XHR 结构不清晰。
• 针对 mvc 编程，由于近来vue和React的兴起，不符合mvvm前端开发流程。
• 单纯使用 ajax 封装，核心是使用 XMLHttpRequest 对象,使用较多并有先后顺序的话，容易产生回调地狱。

2.2、fetch 的优缺点：

• 属于原生 js，脱离了xhr ,号称可以替代 ajax技术。
• 基于 Promise 对象设计的，可以解决回调地狱问题。
• 提供了丰富的 API，使用结构简单。
• 默认不带cookie，使用时需要设置。
• 没有办法检测请求的进度，无法取消或超时处理。
• 返回结果是 Promise 对象，获取结果有多种方法，数据类型有对应的获取方法，封装时需要分别处理，易出错。
• 浏览器支持性比较差。

2.3、axios的优缺点：

• 在浏览器中创建XMLHttpRequest请求，在node.js中创建http请求。
• 解决回调地狱问题。
• 自动转化为json数据类型。
• 支持Promise技术，提供并发请求接口。
• 可以通过网络请求检测进度。
• 提供超时处理。
• 浏览器兼容性良好。
• 有拦截器，可以对请求和响应统一处理。

当前标题：前后端数据交互—Ajax、Fetch和Axios优缺点及比较
网站网址：http://www.gydahua.com/article/dhsopeg.html