jQueryaxiosfetch

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

一、jQuery

$.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 )

$.post

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

$.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

通过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)

通过 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})

直接使用

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})

执行多个并发请求

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

通过 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传递数据时，会在浏览器地址栏显示的形式一样。

通过 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 })

直接使用

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 })

四、总结

对比三种封装的请求方式

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

参考http://www.cocoachina.com/cms/wap.php?action=article&id=35376