网友真实露脸自拍10p,成人国产精品秘?久久久按摩,国产精品久久久久久无码不卡,成人免费区一区二区三区

小程序模板網

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

發布時間:2018-05-08 14:20 所屬欄目:小程序開發教程

				
  1. Fly.js 一個基于Promise的、強大的、支持多種JavaScript運行時的http請求庫. 有了它,您可以使用一份http請求代碼在瀏覽器、微信小程序、Weex、Node、React Native、快應用中都能正常運行。同時可以方便配合主流前端框架 ,最大可能的實現 Write Once Run Everywhere。上一篇文章介紹了在快應用中使用flyio,本文主要介紹一下如何在微信小程序中使用flyio。
  2. 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語言開發,但是JavaScript運行時和瀏覽器又有所不同,導致axios、jQuery等庫無法在微信小程序中使用,而flyio可以。下面給出具體使用方法

 

引入fly

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

Npm安裝:npm install flyio --save.

 

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

如果您的微信小程序項目沒有使用npm來管理依賴,您可以直接下載源碼到您的小程序工程,下載鏈接wx.js 或 wx.umd.min.js .下載任意一個,保存到本地工程目錄,假設在“lib”目錄,接下來引入:

 

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

引入之后,您就可以對fly實例進行全局配置、添加攔截器、發起網絡請求了。

使用

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

 

				
  1. //添加攔截器
  2. fly.interceptors.request.use((config,promise)=>{
  3. //給所有請求添加自定義header
  4. config.headers["X-Tag"]="flyio";
  5. return config;
  6. })
  7. //配置請求基地址
  8. fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'
  9. ...
  10.  
  11. Page({
  12. //事件處理函數
  13. bindViewTap: function() {
  14. //發起get請求
  15. fly.get("/test",{xx:6}).then((d)=>{
  16. //輸出請求數據
  17. console.log(d.data)
  18. //輸出響應頭
  19. console.log(d.header)
  20. }).catch(err=>{
  21. console.log(err.status,err.message)
  22. })
  23. ...
  24. })
  25. })
 

在mpvue中使用

在mpvue 中您也可以將fly實例掛在vue原型上,這樣就可以在任何組件中通過this方便的調用:

 

				
  1. var Fly=require("flyio/dist/npm/wx")
  2. var fly=new Fly
  3. ... //添加全局配置、攔截器等
  4. Vue.prototype.$http=fly //將fly實例掛在vue原型上
  5. 在組件中您可以方便的使用:
  6.  
  7. this.$http.get("/test",{xx:6}).then((d)=>{
  8. //輸出請求數據
  9. console.log(d.data)
  10. //輸出響應頭
  11. console.log(d.header)
  12. }).catch(err=>{
  13. console.log(err.status,err.message)
  14. })


易優小程序(企業版)+靈活api+前后代碼開源 碼云倉庫:starfork
本文地址:http://www.xiuhaier.com/wxmini/doc/course/24340.html 復制鏈接 如需定制請聯系易優客服咨詢:800182392 點擊咨詢
在線客服
易小優 ×