flyio支援快應用了

wendux發表於2018-03-26

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

Github: github.com/wendux/fly

支援快應用

快應用是九大手機廠商基於硬體平臺共同推出的新型應用生態。使用者無需下載安裝,即點即用,享受原生應用的效能體驗。快應用採用web開發技術棧,使用JavaScript語言開發,flyio官方在第一時間支援了快應用。具體使用參照下面文件。

標準的API

Fly在上層提供了一套標準的API,這樣,您就可以在各個JavaScript環境中,以相同的方式發起網路請求,不同平臺對應一個平臺相關的adapter,將平臺差異在底層遮蔽,使用時不同平臺只需要引入flyio npm包中相應平臺的入口檔案即可,也正是因為如此,fly在各個平臺下都可以保證輕量(沒有冗餘程式碼)。

同時,為了方便axios使用者遷移,fly.js API設計風格和axios相似(但不完全相同)!

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

已支援的平臺

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

Fly簡單使用示例

快應用中引入

快應用 中使用,快應用中依賴 fetch模組,需要先在 manifest.json中新增引用:

  "features": [
     ...
    {"name": "system.fetch"}
  ]
複製程式碼

然後建立fly例項

 //依賴快應用中的fetch模組,需要在
 var fetch = require("@system.fetch")
 var Fly=require("flyio/dist/npm/hap")
 var fly=new Fly(fetch)
 
複製程式碼

接下來,您就可以使用fly了!下面示例如無特殊說明,則在所有支援的平臺下都能執行。

發起GET請求


//通過使用者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例項發起的所有請求, 如:

//定義公共headers
fly.config.headers={xx:5,bb:6,dd:7}
//設定超時
fly.config.timeout=10000;
//設定請求基地址
fly.config.baseURL="https://wendux.github.io/"
複製程式碼

單次請求配置只對當次請求有效:

fly.request("/test",{hh:5},{
    method:"post",
    timeout:5000 //本次請求超時設定為5s
})
複製程式碼

攔截器

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.

將Fly掛在app例項上

將Fly掛在app例項上後,您就可以在全域性方便使用,這只是一種推薦做法,您完全可以不這麼做:

  var fetch = require("@system.fetch")
  var Fly=require("flyio/dist/npm/hap")
  var fly=new Fly(fetch)
  fly.config.baseURL = 'http://www.dtworkroom.com/doris/1/2.0.0/'
  export default {
    showMenu: util.showMenu,
    createShortcut: util.createShortcut,
    onCreate(){
      this.$http=fly;
    }
  }
複製程式碼

然後,您就可以在所有頁面中使用:

this.$app.$http.post("test").then((d)=>{
    this.data=d.data;
   //console.log(JSON.stringify(d))
})
複製程式碼

反饋

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

相關文章