小程序模板網(wǎng)

強(qiáng)烈推薦:支持Vue家族全系框架的跨平臺(tái)http請(qǐng)求庫(kù)-fly.js

發(fā)布時(shí)間:2018-05-08 11:01 所屬欄目:小程序開發(fā)教程
Fly.js 一個(gè)基于Promise的、強(qiáng)大的、支持多種JavaScript運(yùn)行時(shí)的http請(qǐng)求庫(kù). 有了它,您可以使用一份http請(qǐng)求代碼在瀏覽器、微信小程序、Weex、Node中都能正常運(yùn)行。同時(shí)可以方便配合 Vue家族的框架,最大可能的實(shí)現(xiàn) Write Once Run Everywhere。

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

問(wèn)題

隨著 Weex 、mpvue 的發(fā)布,他們都是支持Vue.js語(yǔ)法。目前vue已經(jīng)你能夠運(yùn)行在瀏覽器、小程序和Native了。盡管各個(gè)平臺(tái)仍有差異,但已經(jīng)基本能實(shí)現(xiàn) Write Once Run Everywhere 。這使得我們可以在多個(gè)端上實(shí)現(xiàn)盡可能大限度在代碼復(fù)用。但是無(wú)論是 vue 還是Weex 、mpvue,它們本質(zhì)上都只是一個(gè)View層,也就說(shuō)最好的情況,也只能實(shí)現(xiàn)UI復(fù)用。但對(duì)于一個(gè)應(yīng)用程序來(lái)說(shuō),除了UI,最重要的就是數(shù)據(jù)了,而數(shù)據(jù)來(lái)源一般都是來(lái)自網(wǎng)絡(luò)請(qǐng)求(大多數(shù)都是http)。在使用這些框架時(shí),您的網(wǎng)絡(luò)請(qǐng)求,都需要使用平臺(tái)特定的API!這很糟糕,意味著您網(wǎng)絡(luò)請(qǐng)求的代碼不能復(fù)用,所以盡管UI可以復(fù)用,但我們還需要去適配網(wǎng)絡(luò)請(qǐng)求部分的代碼。

一致的網(wǎng)絡(luò)請(qǐng)求

要解決這個(gè)問(wèn)題,就需要一個(gè)能支持多個(gè)平臺(tái)網(wǎng)絡(luò)庫(kù),用戶層提供統(tǒng)一的API,將平臺(tái)差異在底層屏蔽。而 Fly.js就是這醬紫的一個(gè)網(wǎng)絡(luò)庫(kù),為了方便axios使用者遷移,fly.js API設(shè)計(jì)風(fēng)格和axios相似(但不完全相同)!

Fly.js 通過(guò)在不同 JavaScript 運(yùn)行時(shí)通過(guò)在底層切換不同的 Http Engine來(lái)實(shí)現(xiàn)多環(huán)境支持,但同時(shí)對(duì)用戶層提供統(tǒng)一、標(biāo)準(zhǔn)的Promise API。不僅如此,F(xiàn)ly.js還支持請(qǐng)求/響應(yīng)攔截器、自動(dòng)轉(zhuǎn)化JSON、請(qǐng)求轉(zhuǎn)發(fā)等功能,詳情請(qǐng)參考:https://github.com/wendux/fly

已支持的平臺(tái)

目前Fly.js支持的平臺(tái)包括:Node.js 、微信小程序 、Weex 和瀏覽器,這些平臺(tái)的 JavaScript 運(yùn)行時(shí)都是不同的。更多的平臺(tái)正在持續(xù)添加中,請(qǐng)保持關(guān)注。

Fly簡(jiǎn)單使用示例

下面示例如無(wú)特殊說(shuō)明,則在所有支持的平臺(tái)下都能執(zhí)行。

發(fā)起GET請(qǐng)求

//不同平臺(tái)可能需要引入不同文件,詳情見文檔
var fly=require("flyio")

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

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

發(fā)起POST請(qǐng)求

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

發(fā)起多個(gè)并發(fā)請(qǐng)求

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) {
    //兩個(gè)請(qǐng)求都完成
  }))
  .catch(function(error){
    console.log(error)
  })

攔截器

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


//添加請(qǐng)求攔截器
fly.interceptors.request.use((request)=>{
    //給所有請(qǐng)求添加自定義header
    request.headers["X-Tag"]="flyio";
      //打印出請(qǐng)求體
      console.log(request.body)
      //終止請(qǐng)求
      //var err=new Error("xxx")
      //err.request=request
      //return Promise.reject(new Error(""))
  
    //可以顯式返回request, 也可以不返回,沒有返回值時(shí)攔截器中默認(rèn)返回request
    return request;
})

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

除過(guò)以上這些使用,F(xiàn)ly.js 還有很多其它強(qiáng)大的功能,詳情請(qǐng)移步Fly.js.

反饋


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開源 碼云倉(cāng)庫(kù):starfork
本文地址:http://m.u-renovate.com/wxmini/doc/course/24317.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢:800182392 點(diǎn)擊咨詢
QQ在線咨詢
AI智能客服 ×