1. 程式人生 > 其它 >支援Vue家族全系框架的跨平臺http請求庫-fly.js

支援Vue家族全系框架的跨平臺http請求庫-fly.js

官方文件:https://wendux.github.io/dist/#/doc/flyio/readme

Fly.js 一個基於Promise的、強大的、支援多種JavaScript執行時的http請求庫. 有了它,您可以使用一份http請求程式碼在瀏覽器、微信小程式、Weex、Node中都能正常執行。同時可以方便配合 Vue家族的框架,最大可能的實現 Write Once, Run Everywhere。

Github: https://github.com/wendux/fly

問題
隨著 Weex 、mpvue 的釋出,他們都是支援Vue.js語法。目前vue已經你能夠執行在瀏覽器、小程式和Native了。儘管各個平臺仍有差異,但已經基本能實現 Write Once Run Everywhere 。這使得我們可以在多個端上實現儘可能大限度在程式碼複用。但是無論是 vue 還是Weex 、mpvue,它們本質上都只是一個View層,也就說最好的情況,也只能實現UI複用。但對於一個應用程式來說,除了UI,最重要的就是資料了,而資料來源一般都是來自網路請求(大多數都是http)。在使用這些框架時,您的網路請求,都需要使用平臺特定的API!這很糟糕,意味著您網路請求的程式碼不能複用,所以儘管UI可以複用,但我們還需要去適配網路請求部分的程式碼。

一致的網路請求
要解決這個問題,就需要一個能支援多個平臺網路庫,使用者層提供統一的API,將平臺差異在底層遮蔽。而 Fly.js就是這醬紫的一個網路庫,為了方便axios使用者遷移,fly.js API設計風格和axios相似(但不完全相同)!

Fly.js 通過在不同 JavaScript 執行時通過在底層切換不同的 Http Engine來實現多環境支援,但同時對使用者層提供統一、標準的Promise API。不僅如此,Fly.js還支援請求/響應攔截器、自動轉化JSON、請求轉發等功能,詳情請參考:https://github.com/wendux/fly

已支援的平臺
目前Fly.js支援的平臺包括:Node.js 、微信小程式 、Weex 和瀏覽器,這些平臺的 JavaScript 執行時都是不同的。更多的平臺正在持續新增中,請保持關注。

Fly簡單使用示例
下面示例如無特殊說明,則在所有支援的平臺下都能執行。

發起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支援請求/響應攔截器,可以通過它在請求發起之前和收到響應資料之後做一些預處理。


//新增請求攔截器
fly.interceptors.request.use((request)=>{
//給所有請求新增自定義header
request.headers["X-Tag"]="flyio";
//打印出請求體
console.log(request.body)
//終止請求
//var err=new Error("xxx")
//err.request=request
//return Promise.reject(new Error(""))

//可以顯式返回request, 也可以不返回,沒有返回值時攔截器中預設返回request
return request;
})

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

除過以上這些使用,Fly.js 還有很多其它強大的功能,詳情請移步Fly.js.

反饋
如果您有問題歡迎在 在github 提issue . fly.js github: https://github.com/wendux/fly
————————————————
版權宣告:本文為CSDN博主「lazy杜」的原創文章,遵循CC 4.0 BY-SA版權協議,轉載請附上原文出處連結及本宣告。
原文連結:https://blog.csdn.net/duwen90/article/details/79624029