Ajax, Axios, Fetch區(qū)別

本文將會(huì)根據(jù)自己的理解障涯,來(lái)闡述Ajax, Axios, Fetch他們之間的區(qū)別

1 纵朋、JQuery ajax

$.ajax({
  type: 'POST',
  url: url,
  data: data,
  dataType: dataType,
  success: function () {},
  error: function () {}
});

Ajax是對(duì)原生XHR的封裝,為了達(dá)到我們跨越的目的祈秕,增添了對(duì)JSONP的支持渺贤。經(jīng)過(guò)這么多年的更新維護(hù),不得不承認(rèn)它已經(jīng)很成熟请毛,能夠滿足我們的基本需求志鞍,但是隨著react,vue新一代框架的興起,以及ES規(guī)范的完善方仿,更多API的更新固棚,它逐漸暴露了自己的不足

  • 針對(duì)MVC的編程設(shè)計(jì),不符合現(xiàn)在前端MVVM的趨勢(shì)
  • 基于原生的XHR開(kāi)發(fā),XHR本身的架構(gòu)不夠清晰
  • JQuery較大仙蚜,單純使用ajax卻要引入整個(gè)JQuery非常的不合理
  • 雖然axios不支持jsonp此洲,但是可以通過(guò)引入jsonp模塊來(lái)解決

2 、Axios

axios({
    method: 'post',
    url: '/user/12345',
    data: {
        firstName: 'Fred',
        lastName: 'Flintstone'
    }
})
.then(function (response) {
    console.log(response);
})
.catch(function (error) {
    console.log(error);
});

Vue2.0之后委粉,自從尤雨溪推薦大家用axios替換JQuery ajax呜师,Axios快速的得到大家的關(guān)注。Axios本質(zhì)就是對(duì)原生XHR的封裝贾节,增加了Promise的實(shí)汁汗,符合最新的ES規(guī)范衷畦,從它的官網(wǎng)上可以看到它有以下幾條特性:

  • 從 node.js 創(chuàng)建 http 請(qǐng)求
  • 支持 Promise API
  • 客戶端支持防止CSRF(請(qǐng)求中攜帶cookie)
  • 提供了一些并發(fā)請(qǐng)求的接口(重要,方便了很多的操作)

Axios既提供了并發(fā)的封裝知牌,體積也較小祈争,也沒(méi)有下文會(huì)提到的fetch的各種問(wèn)題,當(dāng)之無(wú)愧是現(xiàn)在最應(yīng)該選用的請(qǐng)求的方式送爸。

3铛嘱、 Fetch

fetch號(hào)稱是AJAX的替代品,fetch是基于原生的XMLHttpRequest對(duì)象來(lái)實(shí)現(xiàn)數(shù)據(jù)請(qǐng)求的袭厂,同時(shí)也是基于Promise實(shí)現(xiàn)鏈?zhǔn)秸{(diào)用的墨吓。它的好處在《傳統(tǒng) Ajax 已死,F(xiàn)etch 永生》中提到有以下幾點(diǎn):

  • 符合關(guān)注分離纹磺,沒(méi)有將輸入帖烘、輸出和用事件來(lái)跟蹤的狀態(tài)混雜在一個(gè)對(duì)象里
  • 更好更方便的寫(xiě)法,諸如:
try {
  let response = await fetch(url);
  let data = await response.json();
  console.log(data);
} catch(e) {
  console.log("error:", e);
}

使用 await 后橄杨,告別面條式調(diào)用秘症,將異步寫(xiě)成同步,身心舒暢式矫。從上圖可以看到await 后面可以跟 Promise 對(duì)象乡摹,表示等待 Promise resolve() 才會(huì)繼續(xù)向下執(zhí)行,如果 Promise 被 reject() 或拋出異常則會(huì)被外面的 try...catch 捕獲采转。

坦白說(shuō)聪廉,Jquery還是Axios都已經(jīng)將xhr封裝的足夠好,使用起來(lái)也足夠方便故慈,但是Fetch還是得到很多開(kāi)發(fā)者的認(rèn)可板熊,說(shuō)明它還是存在很多優(yōu)勢(shì)的:

  • 更加底層,提供的API豐富(request, response)
  • 脫離了XHR察绷,是ES規(guī)范里新的實(shí)現(xiàn)方式
  • 跨域處理(mode為"no-cors")
fetch('/testPost', {
    method: 'post',
    mode: 'no-cors',
    data: {}
}).then(function() {});

但是在使用fetch的時(shí)候干签,也會(huì)遇到了一些問(wèn)題:

  • fetch只對(duì)網(wǎng)絡(luò)請(qǐng)求報(bào)錯(cuò),對(duì)400拆撼,500都當(dāng)做成功的請(qǐng)求容劳,需要封裝去處理
  • fetch默認(rèn)不會(huì)帶cookie,需要添加配置項(xiàng)fetch(url, {credentials: 'include'})
  • fetch不支持abort闸度,不支持超時(shí)控制鸭蛙,使用setTimeout及Promise.reject的實(shí)現(xiàn)的超時(shí)控制并不能阻止請(qǐng)求過(guò)程繼續(xù)在后臺(tái)運(yùn)行,造成了流量的浪費(fèi)
  • fetch沒(méi)有辦法原生監(jiān)測(cè)請(qǐng)求的進(jìn)度筋岛,而XHR可以
  • 所有版本的 IE 均不支持原生 Fetch,fetch-ie8 會(huì)自動(dòng)使用 XHR 做 polyfill晒哄。但在跨域時(shí)有個(gè)問(wèn)題需要處理睁宰。IE8, 9 的 XHR 不支持 CORS 跨域肪获,不支持傳 Cookie!所以推薦使用 fetch-jsonp

PS: fetch的具體問(wèn)題大家可以參考:《fetch沒(méi)有你想象的那么美》《fetch使用的常見(jiàn)問(wèn)題及解決方法



xhr+promise的實(shí)現(xiàn)原理如下:

function Promise(fn) { 
  this.resolveFn = null; 
  this.rejectFn = null; 
  var _this = this; 
  function resolve(data) { 
    var f = _this.resolveFn; 
    f(data);
 }
  function reject(err) { 
    var f = this.rejectFn;
     f(err); 
 } 
  fn(resolve,reject);
}
Promise.prototype.then = function (f) { 
  this.resolveFn = f; return this; 
}; 
Promise.prototype.catch = function (f) { 
  this.rejectFn = f; return this; 
}; 
function ajax(url,suc,fail) { 
  var xhr = new XMLHttpRequest(); 
  xhr.open('GET',url, true); 
  xhr.onreadystatechange = function () { 
    if(xhr.readyState == 4){
      if(xhr.status == 200){ 
        suc(xhr.responseText) 
      } else { 
        console.log(err); 
        fail(xhr.responseText); 
    }
 } 
};
  xhr.send(null); 
} 
function fetch(url) { 
  console.log('fetch start') 
  return new Promise(function (resolve,reject) { 
    ajax(url,function (res) { 
      resolve(res); 
    },function (err) { 
      console.log(err);
      reject(err); 
    }) 
  }) 
} 

fetch('/test').then(function (res) { 
  console.log(JSON.parse(res)); 
}).catch (function (err) { 
  console.log(err); 
}) 
?著作權(quán)歸作者所有,轉(zhuǎn)載或內(nèi)容合作請(qǐng)聯(lián)系作者
  • 序言:七十年代末柒傻,一起剝皮案震驚了整個(gè)濱河市孝赫,隨后出現(xiàn)的幾起案子,更是在濱河造成了極大的恐慌红符,老刑警劉巖青柄,帶你破解...
    沈念sama閱讀 222,729評(píng)論 6 517
  • 序言:濱河連續(xù)發(fā)生了三起死亡事件,死亡現(xiàn)場(chǎng)離奇詭異预侯,居然都是意外死亡致开,警方通過(guò)查閱死者的電腦和手機(jī),發(fā)現(xiàn)死者居然都...
    沈念sama閱讀 95,226評(píng)論 3 399
  • 文/潘曉璐 我一進(jìn)店門萎馅,熙熙樓的掌柜王于貴愁眉苦臉地迎上來(lái)双戳,“玉大人,你說(shuō)我怎么就攤上這事糜芳§酰” “怎么了?”我有些...
    開(kāi)封第一講書(shū)人閱讀 169,461評(píng)論 0 362
  • 文/不壞的土叔 我叫張陵峭竣,是天一觀的道長(zhǎng)塘辅。 經(jīng)常有香客問(wèn)我,道長(zhǎng)皆撩,這世上最難降的妖魔是什么扣墩? 我笑而不...
    開(kāi)封第一講書(shū)人閱讀 60,135評(píng)論 1 300
  • 正文 為了忘掉前任,我火速辦了婚禮毅访,結(jié)果婚禮上沮榜,老公的妹妹穿的比我還像新娘。我一直安慰自己喻粹,他們只是感情好蟆融,可當(dāng)我...
    茶點(diǎn)故事閱讀 69,130評(píng)論 6 398
  • 文/花漫 我一把揭開(kāi)白布。 她就那樣靜靜地躺著守呜,像睡著了一般型酥。 火紅的嫁衣襯著肌膚如雪。 梳的紋絲不亂的頭發(fā)上查乒,一...
    開(kāi)封第一講書(shū)人閱讀 52,736評(píng)論 1 312
  • 那天弥喉,我揣著相機(jī)與錄音,去河邊找鬼玛迄。 笑死由境,一個(gè)胖子當(dāng)著我的面吹牛,可吹牛的內(nèi)容都是我干的。 我是一名探鬼主播虏杰,決...
    沈念sama閱讀 41,179評(píng)論 3 422
  • 文/蒼蘭香墨 我猛地睜開(kāi)眼讥蟆,長(zhǎng)吁一口氣:“原來(lái)是場(chǎng)噩夢(mèng)啊……” “哼!你這毒婦竟也來(lái)了纺阔?” 一聲冷哼從身側(cè)響起瘸彤,我...
    開(kāi)封第一講書(shū)人閱讀 40,124評(píng)論 0 277
  • 序言:老撾萬(wàn)榮一對(duì)情侶失蹤,失蹤者是張志新(化名)和其女友劉穎笛钝,沒(méi)想到半個(gè)月后质况,有當(dāng)?shù)厝嗽跇?shù)林里發(fā)現(xiàn)了一具尸體,經(jīng)...
    沈念sama閱讀 46,657評(píng)論 1 320
  • 正文 獨(dú)居荒郊野嶺守林人離奇死亡玻靡,尸身上長(zhǎng)有42處帶血的膿包…… 初始之章·張勛 以下內(nèi)容為張勛視角 年9月15日...
    茶點(diǎn)故事閱讀 38,723評(píng)論 3 342
  • 正文 我和宋清朗相戀三年结榄,在試婚紗的時(shí)候發(fā)現(xiàn)自己被綠了。 大學(xué)時(shí)的朋友給我發(fā)了我未婚夫和他白月光在一起吃飯的照片啃奴。...
    茶點(diǎn)故事閱讀 40,872評(píng)論 1 353
  • 序言:一個(gè)原本活蹦亂跳的男人離奇死亡潭陪,死狀恐怖,靈堂內(nèi)的尸體忽然破棺而出最蕾,到底是詐尸還是另有隱情依溯,我是刑警寧澤,帶...
    沈念sama閱讀 36,533評(píng)論 5 351
  • 正文 年R本政府宣布瘟则,位于F島的核電站黎炉,受9級(jí)特大地震影響,放射性物質(zhì)發(fā)生泄漏醋拧。R本人自食惡果不足惜慷嗜,卻給世界環(huán)境...
    茶點(diǎn)故事閱讀 42,213評(píng)論 3 336
  • 文/蒙蒙 一、第九天 我趴在偏房一處隱蔽的房頂上張望丹壕。 院中可真熱鬧庆械,春花似錦、人聲如沸菌赖。這莊子的主人今日做“春日...
    開(kāi)封第一講書(shū)人閱讀 32,700評(píng)論 0 25
  • 文/蒼蘭香墨 我抬頭看了看天上的太陽(yáng)琉用。三九已至堕绩,卻和暖如春,著一層夾襖步出監(jiān)牢的瞬間邑时,已是汗流浹背奴紧。 一陣腳步聲響...
    開(kāi)封第一講書(shū)人閱讀 33,819評(píng)論 1 274
  • 我被黑心中介騙來(lái)泰國(guó)打工, 沒(méi)想到剛下飛機(jī)就差點(diǎn)兒被人妖公主榨干…… 1. 我叫王不留晶丘,地道東北人黍氮。 一個(gè)月前我還...
    沈念sama閱讀 49,304評(píng)論 3 379
  • 正文 我出身青樓,卻偏偏與公主長(zhǎng)得像,于是被迫代替她去往敵國(guó)和親沫浆。 傳聞我的和親對(duì)象是個(gè)殘疾皇子觉壶,可洞房花燭夜當(dāng)晚...
    茶點(diǎn)故事閱讀 45,876評(píng)論 2 361

推薦閱讀更多精彩內(nèi)容