Fly.js 的定位是成為 Javascript http請求的終極解決方案,也就是說,在任何能夠執行 Javascript 的環境,只要具有訪問網路的能力,Fly都能執行在其上,並提供統一的Promise based API。
Github: github.com/wendux/fly
已支援的平臺
Fly.js 官方支援的Javascript執行時包括:瀏覽器、node、微信小程式。這意味著你可以在這些平臺使用同一份程式碼來發起http請求。值得一提是整合到web應用時(瀏覽器環境), fly.js的大小隻有4.7KB, 非常輕量。
統一的使用者層API
Fly.js 支援的JavaScript執行時是不同的,但提供的使用者層API是統一的,API是基於Promise的,風格和 axios 很像(但不完全相同),下面看幾個例子:
發起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)
})
複製程式碼
…….
上面只是Fly.js的簡單使用,Fly.js 除了支援Promise風格的API之外,另外還支援:
- 支援請求/響應攔截器。
- 自動轉換 JSON 資料。
- 瀏覽器端支援全域性Ajax攔截。
- API支援typeScript。
- 支援請求配置
- H5頁面內嵌到原生 APP 中時,支援將 http 請求轉發到 Native,支援直接請求圖片。
詳細的文件請參考 github fly .
支援多平臺的原理
Fly 引入了Http Engine 的概念,所謂 Http Engine,就是真正發起 http 請求的引擎,這在瀏覽器中一般都是XMLHttpRequest
,而在其它JavaScript執行時下,需要提供相應平臺的Http Engine,Fly 正是通過切換不同平臺的 Http Engine 而實現同時支援不同JavaScript執行時的 。
Http Engine 是一個標準的介面協議,內部實現了真正的HTTP請求邏輯,不同JavaScript執行時只需要實現Http Engine的介面協議,就可以無縫整合到Fly.js中。
如何支援新的JavaScript執行時
如上所述,要支援新的JavaScript執行時時,我們需要實現該平臺下的Http Engine即可,但是從頭實現一個Http Engine 是非常複雜的,為此,Fly 官方提供了一個 EngineWrapper 幫助工具,它可以通過一個adapter(介面卡)生成一個完整的 Http Engine,所以,我們只需要實現一個adapter就行。
一個簡單的例子
var engine= EngineWrapper(function (request,responseCallback) {
responseCallback({
statusCode:200,
responseText:"你變或者不變,我都不變?。",
extraFeild:"自定義欄位"
})
})
fly.engine=engine;
fly.get("../package.json").then(d=>{
log(d.data)
log(d.extraFeild)
})
控制檯輸出
> 你變或者不變,我都不變?。
> 自定義欄位
複製程式碼
EngineWrapper的引數就是adapter, 在這個例子中,adapter 並沒有真正發起 http 請求,而是直接返回了固定內容,這樣 fly 上層請求任何介面收到的內容永遠都是相同的。完整的示例請移步:Fly.js-Http Engine .
遠端Http Engine
我們說過,在瀏覽器環境中,fly 使用的預設engine 就是 XMLHttpRequest
。現在我們想想混合APP, 如果能在 Native(Android、IOS) 上實現一個engine,然後供瀏覽器中的 fly 使用,那麼也就會將原本應該在瀏覽器中發起的請求重定向到了 Native 上。而這個在 Native 上實現的 engine,我們稱其為遠端 Http Engine,這是因為呼叫者和執行者並不在同一個環境。
通過遠端Http Engine, Fly.js可以實現一個逆天的功能--請求重定向。它可以將本來會在瀏覽器中發起的http請求重定向到Native, 這樣就可以在Native 上進行統一的請求管理、cookie同步、證照檢驗、快取和訪問控制等,詳細的內容請參考: Fly.js 請求重定向 。
最後
貼出Fly.js的Github原始碼地址:github.com/wendux/fly , 詳細的文件請移步github, 如果你喜歡Fly.js,歡迎star.