XHR,jQuery,axios,fetch以及vue-resource请求的五大方法解析（全）项目中请求发不停，但是请

1. XHR

XMLHttpRequest是所有请求（除去fetch）中最底层的原理，其他的发送请求都是对其进行的封装，平时项目中是不会用的，所以了解就可以了

使用方法：

new XMLHttpRequest() 先new一个XMLHttpRequest对象出来
xhr.open() 调用实例的open方法用于初始化一个请求但是不会发送请求
例子：xhr.open('get', '/userInfo', true)
1. 第一个参数 method：要发送的请求的类型。比如GET、POST、PUT、DELETE等。
2. 第二个参数 url：请求的URL。
3. 第三个参数 async：是否异步发送请求的布尔值。true为异步发送请求
setRequestHeader() 可以设置自定义的请求头部信息。
1. 第一个参数 header：头部字段的名称。
2. 第二个参数 value：头部字段的值。
xhr.send() 调用实例的send方法用于发送HTTP请求。
1. 参数data：作为请求主体发送的数据。如果不需要通过请求主体发送数据，则必须传入null。该参数可以接收字符串、FormData、Blob、ArrayBuffer等类型。

详细的可以查看：developer.mozilla.org/zh-CN/docs/…

2.jQuery

jQuery发送ajax请求是对XMLHttpRequest进行了封装，这个请求方式在Vue项目中基本不适用，Vue项目本身就是减少对Dom的操作，jQuery刚好就是对真实的Dom进行操作的，所以基本Vue项目不会使用jQuery这个方法，而且jQuery这个方法体积也比axios大

1.$.ajax()

$ajax({
  url:地址,
  type/method: 请求方式 默认是get
  data:{} 传参
  dataType: json,
  success: function(){} 请求成功的执行的函数
  error: function(){} 失败时执行的函数
  timeout:超时时间 单位毫秒
  .....
})

2.$get()

$get({
 url:地址
 data: 携带的对象形式的参数
 dataType: 期望的数据类型 比如json
 success: function(){} 请求成功时执行的函数
})

3.$post()

$post({
 url:地址
 data: 携带的对象形式的参数
 dataType: 期望的数据类型 比如json
 success: function(){} 请求成功时执行的函数
})

// const obj={ type:'post',data:{name:"HEIHEI"},url:'/api/submit',dataType:'json' } 调用方法：ajax(obj)
function ajax(obj){
            // 默认参数
            var defaults = {
                type : 'get',
                data : {},
                url : '#',
                dataType : 'text',
                async : true,
                success : function(data){console.log(data)}
            }
            // 处理形参，传递参数的时候就覆盖默认参数，不传递就使用默认参数
            for(var key in obj){//把输入的参数与设置的默认数据进行覆盖更新
                defaults[key] = obj[key];
            }
            // 1、创建XMLHttpRequest对象
            var xhr = null;
            if(window.XMLHttpRequest){
                xhr = new XMLHttpRequest();
            }else{
                xhr = new ActiveXObject('Microsoft.XMLHTTP');// 兼容ie的早期版本
            }
            // 把对象形式的参数转化为字符串形式的参数
            /* {username:'zhangsan','password':123} 转换为 username=zhangsan&password=123 */
            var param = '';
            for(var attr in obj.data){
                param += attr + '=' + obj.data[attr] + '&';
            }
            if(param){//substring(start, end)截取字符串去掉最后的&符号
                param = param.substring(0,param.length - 1);
            }
            // 处理get请求参数并且处理中文乱码问题
            if(defaults.type == 'get'){
                defaults.url += '?' + encodeURI(param);
            }
            // 2、准备发送（设置发送的参数）
            xhr.open(defaults.type,defaults.url,defaults.async); // 处理post请求参数并且设置请求头信息（必须设置）
            var data = null;
            if(defaults.type == 'post'){
                data = param;
                xhr.setRequestHeader("Content-Type","application/x-www-form-urlencoded");
            //post模式下必须加的请求头，这个请求头是告诉服务器怎么去解析请求的正文部分。
            }
            // 3、执行发送动作
            xhr.send(data);
            // 处理同步请求，不会调用回调函数
            if(!defaults.async){
                if(defaults.dataType == 'json'){
                    return JSON.parse(xhr.responseText);
                }else{
                    return xhr.responseText;
                }
            }
            // 4、指定回调函数（处理服务器响应数据）
            xhr.onreadystatechange = function(){
                if(xhr.readyState == 4){
                    //4 获取数据成功
                if(xhr.status == 200){
                    //200 获取的数据格式正确
                    var data = xhr.responseText;
                    if(defaults.dataType == 'json'){
                        // data = eval("("+ data +")");
                        data = JSON.parse(data);
                        //JSON.parse把获取带的json格式的数据转化为js的对象形式可以使用
                        }
                        defaults.success(data);//回调函数
                    }
                }
            }
        }

3.axios

axios是目前项目中请求方法使用最多的请求方式，而且大型项目中还会对它进行二次封装，大说数项目基本都是对请求拦截器以及响应拦截器做统一处理的，我们这里先简单介绍下基础的

//首先引入
import axios from "axios"
/****** 创建axios实例 ******/  
const service = axios.create({  
// baseURL:``, //api的base_url  
// timeout:30000 , // 请求超时时间  
})
// 添加请求拦截器
service.interceptors.request.use((config)=>{
  //大多数都是处理是否需要携带token 或者还有判断页面是都是loading状态
  store.commit('lodings', true)
  config.headers.common['Authorization'] = `${token}`
},error => {  
// 对请求错误做些什么  
return Promise.reject(error);  
})
// http response 响应拦截器
service.interceptors.response.use((response)=>{
//成功的回调
store.commit('lodings', false)  
return response;
},error=>{
store.commit('lodings', false)
alert("请求发送失败")
return Promise.reject(error.response.data)
})



//组件中如何使用
import service from "./request";

export const getMsg = data => {  
return service({  
url: `${url}/getNum`,  
method: "get", //"post" 
params: data,
responseType:"json"//"blob","arraybuffer" 后端返回图片流或文件流时，一般采取arraybuffer、blob这两个格式
});  
};

4.fetch

fetch它是 XMLHttpRequest 的替代品。Fetch 是一个 API，它是真实存在的，它是基于 promise 的.

特点：

1.使用 promise，不使用回调函数。

2.采用模块化设计，比如 rep、res 等对象分散开来，比较友好。

3.通过数据流对象处理数据，可以提高网站性能。

缺点：

1.兼容性问题，IE浏览器不能使用这个方法

2.返回的数据会包裹2层promise，所以想拿到数据需要2次.then才可以

//简单的get
fetch(url).then(res=>res.json()).then(data=>{console.info(data)}).catch(error=>{console.log(error)})
//简单的post
//当我们使用Fetch发起Post请求时，需要手动设置method参数和body参数 method默认是get
fetch(url,{
method:"post",
headers:{"Content-type": "application/x-www-form-urlencoded; charset=UTF-8"},
body: 'foo=bar&lorem=ipsum'
}).then(json).then(data=>{console.log(data)}).catch(error=>{})

5.Vue-resource

目前项目中用的不是很多了，Vue1.0的时候用的很多，最开始是Vue团队维护的，但是后面交给了其他团队去维护了，Vue-resource是Vue里面的插件库

使用方法

下载 npm i vue-resource
引入并且

import "vueResource" from "vue-resource"
Vue.use(vueResource)
注册后所有的实例身上都会有$http这个方法可以发送请求

this.$http.get(url).then(response=>{},error=>{})

....后续会进行丰富