常见的发送Ajax的几种方式简单讲解

一.xhr发送Ajax请求

1. 创建xhr对象（new XMLHttpRequest () ）
2. 调用xhr.open()函数
3. 调用xhr.send函数
4. 监听onreadystatechange事件

 缺点：太过繁琐

二.jQuery通过对xhr的封装实现发送Ajax请求

利用封装后的ajax方法，$post  $get等api实现发送请求

缺点：jQuery体积大，最重要的是jQuery库的核心是对DOM进行操作，而我们我们用vue和react就是为了减少操作DOM，所以工作中很少用。

三.axios通过对xhr的封装实现发送Ajax请求 

import axios from 'axios'
// 创建axios实例
const requests = axios.create({
    baseURL: 'http://127.0.0.1:8888/api/private/v1/',
    timeout: 5000
})

// 请求拦截
requests.interceptors.request.use(config => {
    config.headers.Authorization = window.sessionStorage.getItem('token');
    return config
})
export default requests

优点：是promise对象，支持请求拦截器和响应拦截器并且体积小，大约只是jQuery的四分之一

三.fetch发送Ajax请求  

优点：fetch与xhr平级，而上面两个方法都是对xhr的封装实现发送请求的，并且window里面有fetch方法，直接可以发送请求，也是promise风格。

缺点：会将返回的数据包两层promise，需要两次then才能拿到数据，最大的缺点是兼容性比较差