1. 程式人生 > >在小程式/mpvue中使用flyio發起網路請求

在小程式/mpvue中使用flyio發起網路請求

Fly.js 一個基於Promise的、強大的、支援多種JavaScript執行時的http請求庫. 有了它,您可以使用一份http請求程式碼在瀏覽器、微信小程式、Weex、Node、React Native、快應用中都能正常執行。同時可以方便配合主流前端框架 ,最大可能的實現 Write Once Run Everywhere。上一篇文章介紹了在快應用中使用flyio,本文主要介紹一下如何在微信小程式中使用flyio。

問題

隨著 Weex 、mpvue 的釋出,他們都是支援Vue.js語法。目前vue已經你能夠執行在瀏覽器、小程式和Native了。儘管各個平臺仍有差異,但已經基本能實現 Write Once Run Everywhere

。這使得我們可以在多個端上實現儘可能大限度在程式碼複用。但是無論是 vue 還是Weex 、mpvue,它們本質上都只是一個View層,也就說最好的情況,也只能實現UI複用。但對於一個應用程式來說,除了UI,最重要的就是資料了,而資料來源一般都是來自網路請求(大多數都是http)。在使用這些框架時,您的網路請求,都需要使用平臺特定的API!這很糟糕,意味著您網路請求的程式碼不能複用,所以儘管UI可以複用,但我們還需要去適配網路請求部分的程式碼。

Flyio簡介

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

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

微信小程式

微信小程式採用web開發技術棧,使用JavaScript語言開發,但是JavaScript執行時和瀏覽器又有所不同,導致axios、jQuery等庫無法在微信小程式中使用,而flyio可以。下面給出具體使用方法

引入fly

Flyio在各個平臺下的標準API是一致的,只是入口檔案不同,在微信小程式中引入:

Npm安裝:npm install flyio --save.

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly

如果您的微信小程式專案沒有使用npm來管理依賴,您可以直接下載原始碼到您的小程式工程,下載連結wx.jswx.umd.min.js .下載任意一個,儲存到本地工程目錄,假設在“lib”目錄,接下來引入:

var Fly=require("../lib/wx") //wx.js為您下載的原始碼檔案
var fly=new Fly; //建立fly例項

引入之後,您就可以對fly例項進行全域性配置、新增攔截器、發起網路請求了。

使用

Fly基於Promise提供了Restful API,你可以方便的使用它們,具體請參考fly 文件 。下面給出一個簡單的示例

//新增攔截器
fly.interceptors.request.use((config,promise)=>{
    //給所有請求新增自定義header
    config.headers["X-Tag"]="flyio";
    return config;
})
//配置請求基地址
fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'
...

Page({
  //事件處理函式
  bindViewTap: function() {
    //發起get請求
    fly.get("/test",{xx:6}).then((d)=>{
      //輸出請求資料
      console.log(d.data)
      //輸出響應頭
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
    ...
  })
})

在mpvue中使用

mpvue 中您也可以將fly例項掛在vue原型上,這樣就可以在任何元件中通過this方便的呼叫:

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //新增全域性配置、攔截器等
Vue.prototype.$http=fly //將fly例項掛在vue原型上

在元件中您可以方便的使用:

this.$http.get("/test",{xx:6}).then((d)=>{
      //輸出請求資料
      console.log(d.data)
      //輸出響應頭
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })

反饋

如果您有問題歡迎在 在github 提issue . fly.js github: github.com/fly