JS HTTP 請求終極解決方案 - fly.js

wendux發表於2017-10-23
JSHTTP

Fly.js

Fly.js 是一個功能強大的輕量級的javascript http請求庫，同時支援瀏覽器和node環境，通過介面卡，它可以執行在任何具有網路能力的javascript執行環境；同時fly.js有一些高階的玩法如全域性ajax攔截、在web app中支援請求重定向等，耐心看下去，它會給你足夠的驚喜。

接下來會出幾篇文章深入的介紹fly.js的高階玩法。這是首篇，一個整體的介紹，如果您有興趣可以去 fly官網瞭解更多。

簡介

Fly.js 是一個基於 promise 的，輕量且強大的 Javascript http 網路庫，它有如下特點：

  1. 提供統一的 Promise API。
  2. 支援瀏覽器環境，輕量且非常輕量 。
  3. 支援 Node 環境。
  4. 支援請求／響應攔截器。
  5. 自動轉換 JSON 資料。
  6. 支援切換底層 Http Engine，可輕鬆適配各種執行環境。
  7. 瀏覽器端支援全域性Ajax攔截 。
  8. H5頁面內嵌到原生 APP 中時，支援將 http 請求轉發到 Native。支援直接請求圖片。
  9. 高度可定製、可拆卸、可拼裝。

定位與目標

Fly 的定位是成為 Javascript http請求的終極解決方案。也就是說，在任何能夠執行 Javascript 的環境，只要具有訪問網路的能力，Fly都能執行在其上，提供統一的API。

與axios和Fetch對比

詳細的對比請參照flyio官網的文章 與axios和Fetch對比 。

安裝

使用NPM

npm install flyio
複製程式碼

使用CDN

<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
複製程式碼

UMD

https://unpkg.com/flyio/dist/umd/fly.umd.min.js
複製程式碼

例子

下面示例如無特殊說明，則在瀏覽器和node環境下都能執行。

發起GET請求

var fly=require("flyio")
//通過使用者id獲取資訊,引數直接寫在url中
fly.get('/user?id=133')
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//query引數通過物件傳遞
fly.get('/user', {
      id: 133
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

複製程式碼

發起POST請求

fly.post('/user', {
    name: 'Doris',
    age: 24
    phone:"18513222525"
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });
複製程式碼

發起多個併發請求

function getUserRecords() {
  return fly.get('/user/133/records');
}

function getUserProjects() {
  return fly.get('/user/133/projects');
}

fly.all([getUserRecords(), getUserProjects()])
  .then(fly.spread(function (records, projects) {
    //兩個請求都完成
  }))
  .catch(function(error){
    console.log(error)
  })
複製程式碼

直接通過 request 介面發起請求

//直接呼叫request函式發起post請求
fly.request("/test",{hh:5},{
    method:"post",
    timeout:5000 //超時設定為5s
 })
.then(d=>{ console.log("request result:",d)})
.catch((e) => console.log("error", e))
複製程式碼

傳送URLSearchParams

const params = new URLSearchParams();
params.append('a', 1);
fly.post("",params)
.then(d=>{ console.log("request result:",d)})
複製程式碼

注：Node環境不存在URLSearchParams。各個瀏覽器對URLSearchParams的支援程度也不同，使用時務必注意

傳送 FormData

 var formData = new FormData();
 var log=console.log
 formData.append('username', 'Chris');
 fly.post("../package.json",formData).then(log).catch(log)
複製程式碼

注：Fly目前只在支援 FormData 的瀏覽器環境中支援 FormData，node環境下對 formData 的支援方式稍有不同，詳情戳這裡 Node 下增強的API 。

請求二進位制資料

fly.get("/Fly/v.png",null,{
	responseType:"arraybuffer"
}).then(d=>{
  //d.data 為ArrayBuffer例項
})
複製程式碼

注：在瀏覽器中時 responseType 值可為 "arraybuffer" 或"blob"之一。在node下只需設為 "stream"即可。

攔截器

Fly支援請求／響應攔截器，可以通過它在請求發起之前和收到響應資料之後做一些預處理。


//新增請求攔截器
fly.interceptors.request.use((config,promise)=>{
    //給所有請求新增自定義header
    config.headers["X-Tag"]="flyio";
    //可以通過promise.reject／resolve直接中止請求
    //promise.resolve("fake data")
    return config;
})

//新增響應攔截器，響應攔截器會在then/catch處理之前執行
fly.interceptors.response.use(
    (response,promise) => {
        //只將請求結果的data欄位返回
        return response.data
    },
    (err,promise) => {
        //發生網路錯誤後會走到這裡
        //promise.resolve("ssss")
    }
)
複製程式碼

如果你想移除攔截器，只需要將攔截器設為null即可：

fly.interceptors.request.use(null)
fly.interceptors.response.use(null,null)
複製程式碼

Node

無論是在瀏覽器環境，還是在 Node 環境，Fly在上層提供了統一的 Promise API。這意味著無論您是 web 開發還是 node 開發，您都可以以相同的呼叫方式來發起http請求。不過，由於node和瀏覽器環境本身的差異，在Node環境下，Fly除了支援基本的API之外，還提供了一些增強的API，這些 API 主要涉及檔案下載、多檔案上傳、http代理等眾多強大的功能，詳情請參考 Node 下增強的API

錯誤處理

請求失敗之後，catch 捕獲到的 err 為 Error 的一個例項，err有兩個欄位:

{
  message:"Not Find 404", //錯誤訊息
  status:404 //如果伺服器可通，則為http請求狀態碼。網路異常時為0，網路超時為1
}
複製程式碼
錯誤碼 含義
0 網路錯誤
1 請求超時
2 檔案下載成功，但儲存失敗，此錯誤只出現node環境下
>=200 http請求狀態碼

請求配置選項

可配置選項：

{
  headers:{}, //http請求頭，
  baseURL:"", //請求基地址
  timeout:0,//超時時間，為0時則無超時限制
  withCredentials:false //跨域時是否傳送cookie
}
複製程式碼

配置支援例項級配置和單次請求配置

例項級配置

例項級配置可用於當前Fly例項發起的所有請求

//定義公共headers
fly.config.headers={xx:5,bb:6,dd:7}
//設定超時
fly.config.timeout=10000;
//設定請求基地址
fly.config.baseURL="https://wendux.github.io/"
複製程式碼

單次請求配置

需要對單次請求配置時，需使用request方法，配置只對當次請求有效。

fly.request("/test",{hh:5},{
    method:"post",
    timeout:5000 //超時設定為5s
})
複製程式碼

注：若單次配置和例項配置衝突，則會優先使用單次請求配置

API

fly.get(url, data, options)

發起 get 請求，url請求地址，data為請求資料，在瀏覽器環境下型別可以是:

String|Json|Object|Array|Blob|ArrayBuffer|FormData
複製程式碼

options為請求配置項。

fly.post(url, data, options)

發起post請求，引數含義同fly.get。

fly.request(url, data, options)

發起請求，引數含義同上，在使用此API時需要指定options 的method：

//GET請求
fly.request("/user/8" null, {method:"get"})
//DELETE 請求
fly.request("/user/8/delete", null, {method:"delete"})
//PUT請求
fly.request("/user/register", {name:"doris"}, {method:"PUT"})
......
複製程式碼

request 適合在 RESTful API 的場景下使用,為了方便使用，fly提供了快捷方法：

fly.put(url, data, options)
fly.delete(url,data,options)
fly.patch(url,data,options)
複製程式碼

fly.all([])

發起多個併發請求，引數是一個promise 陣列；當所有請求都成功後才會呼叫then，只要有一個失敗，就會調catch。

建立Fly例項

為方便使用，在引入flyio庫之後，會建立一個預設例項，一般情況下大多數請求都是通過預設例項發出的，但在一些場景中需要多個例項（可能使用不同的配置請求），這時你可以手動new一個：

//npm、node環境下
var  Fly=require("flyio/dist/npm/fly") //注意！此時引入的是 "fio/dist/npm/fly"
var nFly=new Fly();

//CDN引入時直接new
var nFly=new Fly();
複製程式碼

Http Engine

Fly 引入了Http Engine 的概念，所謂 Http Engine，就是真正發起 http 請求的引擎，這在瀏覽器中一般都是XMLHttpRequest，而在 Node 環境中，可以用任何能發起網路請求的庫／模組實現。Fly 可以自由更換底層 Http Engine 。事實上，Fly 正是通過更換 Http Engine 而實現同時支援瀏覽器環境和Node環境的 。不過，Http Engine 並不侷限於Node 和 瀏覽器環境，也可以是 Android、ios、electron等，正是由於這些，Fly 才有了一個非常獨特而強大的功能——請求重定向。基於請求重定向，我們可以實現一些非常有用的功能，比如將內嵌到 APP 的所有 http 請求重定向到 Native ，然後在端上( Android、ios )統一發起網路請求、進行 cookie 管理、證照校驗等，詳情請戳 Fly Http Engine

全域性Ajax攔截

在瀏覽器中，可以通過用 Fly engine 替換 XMLHttpRequest 的方式攔截全域性的的 Ajax 請求，無論上層使用的是何種網路庫。

體積

在瀏覽器環境下，一個庫的大小是非常重要的。這方面 Fly 做的很好，它在保持強大的功能的同時，將自己的身材控制到了最好。min 只有 4.6K 左右，GZIP 壓縮後不到 2K，體積是 axios 的四分之一。

Finally

如果感覺 Fly 對您有用，歡迎 star 。 github: https://github.com/wendux/fly

補充一句

招前端，招前端，招前端！最近有找工作或者想換工作的加我微信Demons-du哦。 職位地點：北京

相關文章