前端 3 种Ajax请求方式(jQuery/axios/fetch)详解

前言

目前市面上前端请求接口的主流方式是 Ajax（Asynchronous JavaScript and XML），而封装的 Ajax 有 3 种，在单页面应用还没出现的时候，最原始的 jQuery 使用最频繁。后来 axios 与 fetch 也相继而出。本文主要分享这 3 种 Ajax 请求方式的使用与异同。

一、jQuery

1. $.get

//只请求网页或数据，没有返回值
$.get(url)
//只请求网页或数据，传递参数，没有返回值
$.get(url,{id:123})
//请求网页或数据，有返回值
$.get(url,(res)=>{
alert(res);
})
//请求网页或数据，同时传递参数，有返回值
$.get(url,{id:123},(res)=>{
alert(res);
})
//完整的方式如下
$.get(
	url,
	data,
	success(response,status,xhr),
	dataType
)

2. $.post

$.post(
	url,//请求的URL地址
	data,//请求参数
	success(data, textStatus, jqXHR),//回调函数
	dataType 
	//规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
)

3. $.ajax

$.ajax({ 
    type: "POST",//请求方式,默认值GET
    data:{id:123},//请求参数，自动转换为字符串格式，如果是get请求，会自动拼接到url上面
 	url: "test.html", //请求地址
	context: document.body, //绑定回调中的this
	async:true,//是否是异步请求，默认情况下都是true,如果要发送同步请求，则改为false
	cache:false,//是否返回此页面，默认值为true
	dataType: "json",
	jsonp:"callback",//在一个jsonp请求中重写回调函数的名字。
	//规定预期的服务器响应的数据类型。默认执行智能判断（xml、json、script 或 html）。
	contentType:"application/x-www-form-urlencoded",//发送数据至服务器内容编码类型
	success: function(){
	        $(this).addClass("done");
	}
});

二、axios

1. 通过get方式获取

//方式一
axios.get('/user?id=123')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

// 方式二
axios.get('/user', {
    params: {
      ID: 12345
    }
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//方式三
axios({ url: ' http://localhost/xxx.php ',
        params:{id:123}      
}).then( res =>console.log(res) )
  .catch(error => if(error) throw error)

2. 通过 post 方式获取

//方式一
axios.post('/user', {id: '123'})
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
//方式二
var params = new URLSearchParams();
params.append( 属性，属性值 )
 params.append( 属性，属性值 )
axios({
     url:'http://localhost/xxx.php',
     method:'post',
     headers: { //只对此模板有效 
               'Content-Type': 'application/x-www-form-urlencoded'
        },
        //传参
     data:params;
}).then( res =>console.log(res) )
  .catch(error =>{ if(error)=>throw error}) 

3. 直接使用

var params = new URLSearchParams();
params.append( 属性，属性值 )
params.append( 属性，属性值 )
axios({url:'http://localhost/xxx.php',
     method:'post',//根据不同的请求方式传不同的参数，默认为GET
     baseURL:"https://some-domain.com/api/",//为请求加一个前缀，通常用于环境配置
     headers: { //只对此模板有效 
               'Content-Type': 'application/x-www-form-urlencoded'
        },
        //传参
      data:params;
}).then( res =>console.log(res) )
  .catch(error =>{ if(error)=>throw error})  

4. 执行多个并发请求

function getUserAccount() {
  return axios.get('/user/12345');
}

function getUserPermissions() {
  return axios.get('/user/12345/permissions');
}

axios.all([getUserAccount(), getUserPermissions()])
  .then(axios.spread(function (acct, perms) {
    // 两个请求现在都执行完成
  }));

三、fetch

1. 通过 get 方式获取

fetch({http://localhost/xxx.php?a=1&b=3})
.then(res => res.text())
//与axios不同的一点是得到的数据需要转义
.then(data => console.log(data))
.catch(error => {
         if (error) throw error
   })
//get方法传参的形式 很像form表单中通过get传递数据时，会在浏览器地址栏显示的形式一样。

2. 通过 post 方式获取

fetch('http://localhost/xxx.php',{
             method: 'post',
             headers: new Headers({ //解决跨域
                     'Content-Type': "application/x-www-form-urlencoded"
                 }),
             body: new URLSearchParams([
                      ['a', 1],
                       ['b', 20]
                 ]).toString()
             }).then(res => res.text())
               .then(data => console.log(data))
                .catch(error => {
                       if (error) throw error
                  })

3. 直接使用

fetch(url, {
    body: JSON.stringify(data), //请求报文
    cache: 'no-cache', 
    //是否缓存页面，取值有 *default, no-cache, reload, force-cache, only-if-cached
    credentials: 'same-origin', 
    // 是否带有包含凭证的请求，取值有include, same-origin, *omit
    headers: {
      'content-type': 'application/json'
    },
    method: 'POST', // 请求方式自定义，支持*GET, POST, PUT, DELETE等
    mode: 'cors', // 是否启用cors策略，取值有no-cors, cors
  })

四、总结

对比三种封装的请求方式

1. 通过 post 请求发送报文，jQuery 和 axios 对应的 key 都是 data，需要说明的是当 axios 为 get 请求时，对应的 key 是 params。而 fetch 对应的 key 则是 body，如果不是 FormData 对象，需要转换为字符串，并且返回结果也需要转换为 json 格式。
2. jQuery 和 axios 除了自定义配置外，都有对应的别名方法，如 $.get，$.post，axios.get，axios.post，fetch 则没有。
3. axios 和 fetch 主要是基于 promise 的封装，所以都有 then 方法。