前后端数据交互(六)——ajax 、fetch 和 axios 优缺点及比较

一、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技术，提供并发请求接口。
可以通过网络请求检测进度。
提供超时处理。
浏览器兼容性良好。
有拦截器，可以对请求和响应统一处理。