JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 Supertest

Jothy發表於2018-12-12
JSHTTPiOS

原文作者：Chidume Nnamdi

譯者：UC 國際研發 Jothy


寫在最前：歡迎你來到“UC國際技術”公眾號，我們將為大家提供與客戶端、服務端、演算法、測試、資料、前端等相關的高質量技術文章，不限於原創與翻譯。

Web 開發中客戶端與伺服器間的互動非常重要，它有利於客戶端應用高度動態化。使用者通過單擊按鈕的互動方式向伺服器傳送請求，伺服器檢索資料並返回，頁面無需重新載入，直接使用返回的資料重新渲染其部分/整體內容，或者對資料進行操作。

這其中的技術原理是 AJAX，通過 XMLHttpRequest 例項實現。 為了提升 AJAX 及 XMLHttpRequest 的使用體驗，社群開發了一些無需處理 AJAX 和 XMLHttpRequest 就直接發出 HTTP 請求的庫。

本文將帶你研究 5 個最流行的 HTTP 庫，瞭解它們是如何實現的。 希望能幫你省下一些時間。

提示：通過與 Bit 共享同步公共元件可以避免程式碼重複。 把相同的功能的程式碼變成共享元件，就可以隨處使用它了，構建更快喲～趕緊試試看。


JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 SupertestAxios

基於 Promise 的 HTTP 客戶端，可用於瀏覽器和 Node.js

Axios 是一個基於 Promise 的 HTTP 庫，可用在 Node.js 和瀏覽器上發起 HTTP 請求，支援所有現代瀏覽器，甚至包括 IE8+！

優點

  • 同時支援 Node.js 和瀏覽器

  • 支援 Promise API

  • 可以配置或取消請求

  • 可以設定響應超時

  • 支援防止跨站點請求偽造（XSRF）攻擊

  • 可以攔截未執行的請求或響應

  • 支援顯示上傳進度

  • 廣泛用於 React 和 Vue 專案

    缺點

    • 用起來比較麻煩


    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 SupertestSuperagent

    改良版 Ajax——與 Node.js HTTP 客戶端搭配使用

    Superagent 是一個基於 Promise 的輕量級漸進式 AJAX API，非常適合傳送 HTTP 請求以及接收伺服器響應。 與 Axios 相同，它既適用於 Node，也適用於所有現代瀏覽器。

    用 Superagent 發起 HTTP 請求就像在 request 物件上呼叫方法一樣簡單：

    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 Supertest

    優點

    • 它有一個外掛生態，通過構建外掛可以實現更多功能

    • 可配置

    • HTTP 請求傳送介面友好

    • 可以為請求鏈式新增方法

    • 適用於瀏覽器和 Node

    • 支援顯示上傳和下載進度

    • 支援分塊傳輸編碼

    • 支援舊風格的回撥

    • 繁榮的外掛生態，支援眾多常見功能

    缺點

    • 其 API 不符合任何標準


    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 SupertestRequest

    ?? 簡化版 HTTP 請求客戶端

    Request 提供了一種簡化的 HTTP 請求方式。 你可以使用比其他 HTTP 庫更少的程式碼來發起 HTTP 請求。 它不是基於 Promise 的，但如果你需要 Promise，你可以引入request-promise 庫，將請求封裝為 Promise 並返回。

    優點

    • API 簡單易用

    缺點

    • 不基於 Promise


    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 SupertestFetch

    Fetch 是瀏覽器自帶的用於傳送請求的 API，旨在替代 XMLHttpRequest。

    優點

    • 靈活易用

    • 使用 Promise 避免回撥地獄

    • 支援所有現代瀏覽器

    • 遵循 request-response 方案

    • 語法簡單清晰

    • 支援 React Native

    缺點

    • 不支援伺服器端使用

    • 缺乏開發庫的亮點功能，比如取消請求

    • 沒有內建預設值，如請求模式，請求頭，請求憑據。


    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 SupertestSupertest

    Superagent 驅動，有一套流暢的 API 用於測試 Node.js HTTP 伺服器

    Supertest 用於測試 Node.js HTTP 伺服器。 該庫由 SuperAgent 提供支援，它把自身的 API 和 SuperAgent 的底層 API 相結合，提供簡潔的 HTTP 測試介面。

    優點

    • 流暢的 API

    • 簡單的 HTTP 斷言

    • 可以與 Chai.js 和 Mocha 等不同的測試套件混用


    缺點

    • 不支援瀏覽器


    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 Supertest總結

    分析完熱門 HTTP 庫，你可能會問“我應該選擇哪一個？”

    我想說，選擇哪個庫取決於你的專案、規模和目標使用者，每個選擇都有好有壞。 如果你為誤判規格選擇了錯誤的庫，那就得考慮下這個問題，重新選擇合適的工具。

    如果你有任何疑問或覺得有需要補充、更正或刪除的，任何疑問都請隨時發表評論，發郵件或直接私信我。 謝謝閱讀！?


    原文地址：https://blog.bitsrc.io/comparing-http-request-libraries-for-2019-7bedb1089c83?gi=89b097d4bfd1


    好文推薦：

    JavaScript 極致效能追求：TC39 二進位制 AST 提案

    如果市場上只有一款瀏覽器，你的職業生涯會怎樣？



    “UC國際技術”致力於與你共享高質量的技術文章

    歡迎關注我們的公眾號、將文章分享給你的好友

    JS HTTP 請求庫哪家強？Axios，Request，Superagent，Fetch 還是 Supertest



    相關文章