摘要：支持請求響應(yīng)攔截器。定位與目標(biāo)的定位是成為請求的終極解決方案。攔截器支持請求響應(yīng)攔截器，可以通過它在請求發(fā)起之前和收到響應(yīng)數(shù)據(jù)之后做一些預(yù)處理。

Fly.js 是一個功能強(qiáng)大的輕量級的javascript http請求庫，同時支持瀏覽器和node環(huán)境，通過適配器，它可以運(yùn)行在任何具有網(wǎng)絡(luò)能力的javascript運(yùn)行環(huán)境；同時fly.js有一些高級的玩法如全局ajax攔截、在web app中支持請求重定向等，耐心看下去，它會給你足夠的驚喜。

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

Fly.js 是一個基于 promise 的，輕量且強(qiáng)大的 Javascript http 網(wǎng)絡(luò)庫，它有如下特點：

提供統(tǒng)一的 Promise API。

支持瀏覽器環(huán)境，輕量且非常輕量 。

支持 Node 環(huán)境。

支持請求／響應(yīng)攔截器。

自動轉(zhuǎn)換 JSON 數(shù)據(jù)。

支持切換底層 Http Engine，可輕松適配各種運(yùn)行環(huán)境。

瀏覽器端支持全局Ajax攔截 。

H5頁面內(nèi)嵌到原生 APP 中時，支持將 http 請求轉(zhuǎn)發(fā)到 Native。支持直接請求圖片。

高度可定制、可拆卸、可拼裝。

Fly 的定位是成為 Javascript http請求的終極解決方案。也就是說，在任何能夠執(zhí)行 Javascript 的環(huán)境，只要具有訪問網(wǎng)絡(luò)的能力，F(xiàn)ly都能運(yùn)行在其上，提供統(tǒng)一的API。

詳細(xì)的對比請參照flyio官網(wǎng)的文章 與axios和Fetch對比 。

npm install flyio

https://unpkg.com/flyio/dist/umd/fly.umd.min.js

下面示例如無特殊說明，則在瀏覽器和node環(huán)境下都能執(zhí)行。

var fly=require("flyio")
//通過用戶id獲取信息,參數(shù)直接寫在url中
fly.get("/user?id=133")
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

//query參數(shù)通過對象傳遞
fly.get("/user", {
      id: 133
  })
  .then(function (response) {
    console.log(response);
  })
  .catch(function (error) {
    console.log(error);
  });

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)
  })

//直接調(diào)用request函數(shù)發(fā)起post請求
fly.request("/test",{hh:5},{
    method:"post",
    timeout:5000 //超時設(shè)置為5s
 })
.then(d=>{ console.log("request result:",d)})
.catch((e) => console.log("error", e))

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

注：Node環(huán)境不存在URLSearchParams。各個瀏覽器對URLSearchParams的支持程度也不同，使用時務(wù)必注意

 var formData = new FormData();
 var log=console.log
 formData.append("username", "Chris");
 fly.post("../package.json",formData).then(log).catch(log)

注：Fly目前只在支持 FormData 的瀏覽器環(huán)境中支持 FormData，node環(huán)境下對 formData 的支持方式稍有不同，詳情戳這里 Node 下增強(qiáng)的API 。

fly.get("/Fly/v.png",null,{
    responseType:"arraybuffer"
}).then(d=>{
  //d.data 為ArrayBuffer實例
})

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

Fly支持請求／響應(yīng)攔截器，可以通過它在請求發(fā)起之前和收到響應(yīng)數(shù)據(jù)之后做一些預(yù)處理。

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

//添加響應(yīng)攔截器，響應(yīng)攔截器會在then/catch處理之前執(zhí)行
fly.interceptors.response.use(
    (response,promise) => {
        //只將請求結(jié)果的data字段返回
        return response.data
    },
    (err,promise) => {
        //發(fā)生網(wǎng)絡(luò)錯誤后會走到這里
        //promise.resolve("ssss")
    }
)

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

fly.interceptors.request.use(null)
fly.interceptors.response.use(null,null)

無論是在瀏覽器環(huán)境，還是在 Node 環(huán)境，F(xiàn)ly在上層提供了統(tǒng)一的 Promise API。這意味著無論您是 web 開發(fā)還是 node 開發(fā)，您都可以以相同的調(diào)用方式來發(fā)起http請求。不過，由于node和瀏覽器環(huán)境本身的差異，在Node環(huán)境下，F(xiàn)ly除了支持基本的API之外，還提供了一些增強(qiáng)的API，這些 API 主要涉及文件下載、多文件上傳、http代理等眾多強(qiáng)大的功能，詳情請參考 Node 下增強(qiáng)的API

請求失敗之后，catch 捕獲到的 err 為 Error 的一個實例，err有兩個字段:

{
  message:"Not Find 404", //錯誤消息
  status:404 //如果服務(wù)器可通，則為http請求狀態(tài)碼。網(wǎng)絡(luò)異常時為0，網(wǎng)絡(luò)超時為1
}

可配置選項：

{
  headers:{}, //http請求頭，
  baseURL:"", //請求基地址
  timeout:0,//超時時間，為0時則無超時限制
  withCredentials:false //跨域時是否發(fā)送cookie
}

配置支持實例級配置和單次請求配置

實例級配置可用于當(dāng)前Fly實例發(fā)起的所有請求

//定義公共headers
fly.config.headers={xx:5,bb:6,dd:7}
//設(shè)置超時
fly.config.timeout=10000;
//設(shè)置請求基地址
fly.config.baseURL="https://wendux.github.io/"

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

fly.request("/test",{hh:5},{
    method:"post",
    timeout:5000 //超時設(shè)置為5s
})

注：若單次配置和實例配置沖突，則會優(yōu)先使用單次請求配置

發(fā)起 get 請求，url請求地址，data為請求數(shù)據(jù)，在瀏覽器環(huán)境下類型可以是:

String|Json|Object|Array|Blob|ArrayBuffer|FormData

options為請求配置項。

發(fā)起post請求，參數(shù)含義同fly.get。

發(fā)起請求，參數(shù)含義同上，在使用此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)

發(fā)起多個并發(fā)請求，參數(shù)是一個promise 數(shù)組；當(dāng)所有請求都成功后才會調(diào)用then，只要有一個失敗，就會調(diào)catch。

為方便使用，在引入flyio庫之后，會創(chuàng)建一個默認(rèn)實例，一般情況下大多數(shù)請求都是通過默認(rèn)實例發(fā)出的，但在一些場景中需要多個實例（可能使用不同的配置請求），這時你可以手動new一個：

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

//CDN引入時直接new
var nFly=new Fly();

Fly 引入了Http Engine 的概念，所謂 Http Engine，就是真正發(fā)起 http 請求的引擎，這在瀏覽器中一般都是XMLHttpRequest，而在 Node 環(huán)境中，可以用任何能發(fā)起網(wǎng)絡(luò)請求的庫／模塊實現(xiàn)。Fly 可以自由更換底層 Http Engine 。事實上，F(xiàn)ly 正是通過更換 Http Engine 而實現(xiàn)同時支持瀏覽器環(huán)境和Node環(huán)境的 。不過，Http Engine 并不局限于Node 和 瀏覽器環(huán)境，也可以是 Android、ios、electron等，正是由于這些，F(xiàn)ly 才有了一個非常獨(dú)特而強(qiáng)大的功能——請求重定向。基于請求重定向，我們可以實現(xiàn)一些非常有用的功能，比如將內(nèi)嵌到 APP 的所有 http 請求重定向到 Native ，然后在端上( Android、ios )統(tǒng)一發(fā)起網(wǎng)絡(luò)請求、進(jìn)行 cookie 管理、證書校驗等，詳情請戳 Fly Http Engine

在瀏覽器中，可以通過用 Fly engine 替換 XMLHttpRequest 的方式攔截全局的的 Ajax 請求，無論上層使用的是何種網(wǎng)絡(luò)庫。

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

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

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