Fly.js 一個(gè)基于Promise的、強(qiáng)大的、支持多種JavaScript運(yùn)行時(shí)的http請(qǐng)求庫(kù). 有了它，您可以使用一份http請(qǐng)求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應(yīng)用中都能正常運(yùn)行。同時(shí)可以方便配合主流前端框架 ，最大可能的實(shí)現(xiàn) Write Once Run Everywhere。

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

問題

隨著 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層，也就說最好的情況，也只能實(shí)現(xiàn)UI復(fù)用。但對(duì)于一個(gè)應(yīng)用程序來(lái)說，除了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)求部分的代碼。

Flyio簡(jiǎ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 通過在不同 JavaScript 運(yùn)行時(shí)通過在底層切換不同的 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 。下面我們看看在微信小程序、mpvue中和中如何使用fly.

支持快應(yīng)用

快應(yīng)用是九大手機(jī)廠商基于硬件平臺(tái)共同推出的新型應(yīng)用生態(tài)。用戶無(wú)需下載安裝，即點(diǎn)即用，享受原生應(yīng)用的性能體驗(yàn)?？鞈?yīng)用采用web開發(fā)技術(shù)棧，使用JavaScript語(yǔ)言開發(fā)，flyio官方在第一時(shí)間支持了快應(yīng)用。具體使用參照下面文檔。

標(biāo)準(zhǔn)的API

Fly在上層提供了一套標(biāo)準(zhǔn)的API，這樣，您就可以在各個(gè)JavaScript環(huán)境中，以相同的方式發(fā)起網(wǎng)絡(luò)請(qǐng)求，不同平臺(tái)對(duì)應(yīng)一個(gè)平臺(tái)相關(guān)的adapter，將平臺(tái)差異在底層屏蔽，使用時(shí)不同平臺(tái)只需要引入flyio npm包中相應(yīng)平臺(tái)的入口文件即可，也正是因?yàn)槿绱?，fly在各個(gè)平臺(tái)下都可以保證輕量（沒有冗余代碼）。

同時(shí)，為了方便axios使用者遷移，fly.js API設(shè)計(jì)風(fēng)格和axios相似（但不完全相同）！

Fly.js 通過在不同 JavaScript 運(yùn)行時(shí)通過在底層切換不同的 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)參考：

github.com/wendux/fly

已支持的平臺(tái)

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

微信小程序

微信小程序采用web開發(fā)技術(shù)棧，使用JavaScript語(yǔ)言開發(fā)，但是JavaScript運(yùn)行時(shí)和瀏覽器又有所不同，導(dǎo)致axios、jQuery等庫(kù)無(wú)法在微信小程序中使用，而flyio可以。下面給出具體使用方法

引入fly

Flyio在各個(gè)平臺(tái)下的標(biāo)準(zhǔn)API是一致的，只是入口文件不同，在微信小程序中引入：

Npm安裝：npm install flyio --save.

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

如果您的微信小程序項(xiàng)目沒有使用npm來(lái)管理依賴，您可以直接下載源碼到您的小程序工程，下載鏈接wx.js 或wx.umd.min.js 下載任意一個(gè)，保存到本地工程目錄，假設(shè)在“l(fā)ib”目錄，接下來(lái)引入：

var Fly=require("../lib/wx") //wx.js為您下載的源碼文件
var fly=new Fly; //創(chuàng)建fly實(shí)例

引入之后，您就可以對(duì)fly實(shí)例進(jìn)行全局配置、添加攔截器、發(fā)起網(wǎng)絡(luò)請(qǐng)求了。

使用

Fly 基于Promise提供了Restful API，你可以方便的使用它們，具體請(qǐng)參考fly 文檔 。下面給出一個(gè)簡(jiǎn)單的示例

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

Page({
 //事件處理函數(shù)
 bindViewTap: function() {
  //發(fā)起get請(qǐng)求
  fly.get("/test",{xx:6}).then((d)=>{
   //輸出請(qǐng)求數(shù)據(jù)
   console.log(d.data)
   //輸出響應(yīng)頭
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })
  ...
 })
})

在mpvue中使用
在mpvue  中您也可以將fly實(shí)例掛在vue原型上，這樣就可以在任何組件中通過this方便的調(diào)用：

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //添加全局配置、攔截器等
Vue.prototype.$http=fly //將fly實(shí)例掛在vue原型上

在組件中您可以方便的使用：

this.$http.get("/test",{xx:6}).then((d)=>{
   //輸出請(qǐng)求數(shù)據(jù)
   console.log(d.data)
   //輸出響應(yīng)頭
   console.log(d.header)
  }).catch(err=>{
   console.log(err.status,err.message)
  })

反饋

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

以上就是本文的全部?jī)?nèi)容，希望對(duì)大家的學(xué)習(xí)有所幫助，也希望大家多多支持腳本之家。

最新評(píng)論