fly.js vs axios

wendux發表於2017-10-24

fly vs axios

這是fly的第二篇文章,主要是將fly和axios進行一個全面的對比。

首先感謝大家支援,在fly的第一篇文章 JS HTTP 請求終極解決方案 - fly.js 釋出後,github 首日破百星,如果您是新讀者,在您瞭解了fly之後,如果您喜歡,不用找打賞入口,去github star一下就是您對作者的最大的支援。

在Angular、React、Vue這些移動端web框架大行其道的今天,很大的改變了WEB應用的開發方式。而這些框架通常都只專注於View層,而對於http請求,開發者一般都會單獨引入一個http 請求庫,如axios。筆者也是從使用axios過來的,但隨著專案的使用,覺得 axios 不盡完美,在一些場景用起來並不舒服,所以才有了Fly。

在設計 Fly 的過程中,為了符合使用習慣,借鑑了axios(但並不完全相容),下面將 Fly 和 axios做一個詳細的對比:

共同點

  1. 都支援Promise API
  2. 都同時支援Node和Browser環境
  3. 都支援請求/響應攔截器
  4. 都支援自動轉換 JSON

不同點

瀏覽器環境

瀏覽器環境下兩者功能不分伯仲,最大的不同是大小,fly.min.js只有4K左右,而axios.min.js 12K左右。Fly更輕量,整合成本更低。

Node環境

Node下 Fly 的功能要明顯強於axios,Fly在node下不僅提供了檔案下載、上傳的API,而且還可以通過 fly.$http 直接呼叫 request 庫 的所有功能,詳情請參照Node下增強的API

請求轉發

Fly最大的特點就是在混合APP中支援請求轉發,而axios不支援,關於請求轉發的詳細內容請參照請求重定向值得注意的是,作者決定寫fly之前最重要的一個背景就是,在web app中,webview無法攔截ajax請求,而當時現有的js http請求庫沒有一個提供請求轉發的功能。

Http Engine

Fly中提出了Http Engine的概念,Fly可以通過更換Http Engine的方式實現很多有趣的功能,比如全域性Ajax攔截,詳情請參考 全域性ajax攔截

設計思想

Fly採用分層的設計思想,將上層使用者介面和底層Http Engine分離。採用介面卡模式,讓實現Http Engine變的非常容易。正是這樣的框架設計,可以通過替換底層Http Engine的方式,使得fly能夠在靈活的支援各種環境的同時又能保證上層介面的一致性。還有,通過adapter,使用者完全可以自定義http請求的實現.......還有很多高階的玩法。

總結

在瀏覽器端,fly和axios實現的功能差不多,fly以輕巧取勝;在node端,fly佔有明顯的優勢;而在於web app中,fly 的請求轉發功能是獨有的。而在設計思想上,fly更是技高一籌,這使得fly能夠輕鬆的在不同的環境下執行並可以方便的對其進行定製化。

最後貼出fly github地址,如果你喜歡,歡迎star,以使更多的人知道fly,感謝你的支援:github.com/wendux/fly

相關文章