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

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哦。 職位地點：北京