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

呆呆

发布于 2021-11-30 14:40:02

63500

代码可运行

文章被收录于专栏：centosDaicentosDai

运行总次数：0

代码可运行

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