在小程序/mpvue中使用flyio發起網絡請求的方法

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

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

問題

隨著 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語言開發，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 、微信小程序 、Weex、React Native 、Quick App 和瀏覽器，這些平臺的 JavaScript 運行時都是不同的。更多的平臺正在持續添加中，請保持關注。

微信小程序

微信小程序采用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.js 或wx.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)=>{
 //

在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)=>{
 //

反饋

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

聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com