浅谈前端开发中常见的ajax、fetch、axios请求

前言

在前端开发中，我们和后端交互主要是通过请求的方式，常见的三种请求有ajax、fetch、axios，究竟这三种请求有何区别呢？

正文

ajax

ajax 是一个技术统称，是一个概念模型，它囊括了很多技术，并不特指某一技术，它很重要的特性之一就是让页面实现局部刷新。

对于ajax请求，我们是再熟悉不过了,它的主要作用就是局部刷新页面，而无需重新加载整个页面。 我们可以通过浏览器原生的XMLHttpRequest 模块来实现一个Ajax请求。

function sendAjax() {
  //构造表单数据
  var formData = new FormData();
  formData.append('username', 'johndoe');
  formData.append('id', 123456);
  //创建xhr对象 
  var xhr = new XMLHttpRequest();
  //设置xhr请求的超时时间
  xhr.timeout = 3000;
  //设置响应返回的数据格式
  xhr.responseType = "text";
  //创建一个 post 请求，采用异步
  xhr.open('POST', '/server', true);
  //注册相关事件回调处理函数
  xhr.onload = function(e) { 
    if(this.status == 200||this.status == 304){
        alert(this.responseText);
    }
  };
  xhr.ontimeout = function(e) { ... };
  xhr.onerror = function(e) { ... };
  xhr.upload.onprogress = function(e) { ... };
  
  //发送数据
  xhr.send(formData);
}

从上面代码我们可以看出来ajax用到了回调函数来处理数据，当需要写多个请求时就会可能会产生地狱回调的问题。

fetch

fetch是es6新增加的api，它是基于promise对象来实现的，而promise对象是可以链式调用的，不使用回调函数，所以说它是XMLHttpRequest的替代品。

    function Fetch(url) {
      fetch(url).then(res => res.json()).then(data => {
      })
    }

因为fetch是es6新增的特性，所以在浏览器兼容性方面会比不上XMLHttpRequest，但在请求速率上较快。

axios

axios 是一个基于 promise 封装的网络请求库，它是基于XMLHttpRequest 进行二次封装的，能做到拦截请求和拦截响应。

在项目开发中我们常常需要对axios 进行二次封装。

//引入axios库
import axios from "axios";
//创建axios实例
const requests=axios.create({
    baseURL:'/api',
    timeout:5000
})
//请求拦截器
requests.interceptors.request.use((config)=>{
    return config;
})
//响应拦截器
requests.interceptors.response.use((res)=>{
    return res.data;

},(error)=>{
    return Promise.reject(error)
})
//暴露axios实例
export default requests