支持快應用的http網絡庫-flyio

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

Github: https://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來實現多環境支持，但同時對用戶層提供統1、標準的Promise API。不只如此，Fly.js還支持請求/響應攔截器、自動轉化JSON、請求轉發等功能，詳情請參考：https://github.com/wendux/fly

已支持的平臺

目前Fly.js支持的平臺包括：Node.js 、微信小程序 、Weex、React Native 、Quick 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: https://github.com/wendux/fly