小程序模板網(wǎng)

在小程序/mpvue中使用flyio發(fā)起網(wǎng)絡(luò)請(qǐng)求

發(fā)布時(shí)間:2018-05-08 14:20 所屬欄目:小程序開(kāi)發(fā)教程

				
  1. 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。上一篇文章介紹了在快應(yīng)用中使用flyio,本文主要介紹一下如何在微信小程序中使用flyio。
  2. Flyio Github: https://github.com/wendux/fly
 

問(wèn)題

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

要上述問(wèn)題,就需要一個(gè)能支持多個(gè)平臺(tái)網(wǎng)絡(luò)庫(kù),用戶(hù)層提供統(tǒng)一的API,將平臺(tái)差異在底層屏蔽。而 Fly.js就是這醬紫的一個(gè)網(wǎng)絡(luò)庫(kù),為了方便axios使用者遷移,fly.js API設(shè)計(jì)風(fēng)格和axios相似(但不完全相同)!

Fly.js 通過(guò)在不同 JavaScript 運(yùn)行時(shí)通過(guò)在底層切換不同的 Http Engine來(lái)實(shí)現(xiàn)多環(huán)境支持,但同時(shí)對(duì)用戶(hù)層提供統(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.

 

微信小程序

微信小程序采用web開(kāi)發(fā)技術(shù)棧,使用JavaScript語(yǔ)言開(kāi)發(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.

 

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

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

 

				
  1. var Fly=require("../lib/wx") //wx.js為您下載的源碼文件
  2. 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)單的示例

 

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

在mpvue中使用

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

 

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


易優(yōu)小程序(企業(yè)版)+靈活api+前后代碼開(kāi)源 碼云倉(cāng)庫(kù):starfork
本文地址:http://22321a.com/wxmini/doc/course/24340.html 復(fù)制鏈接 如需定制請(qǐng)聯(lián)系易優(yōu)客服咨詢(xún):800182392 點(diǎn)擊咨詢(xún)
QQ在線咨詢(xún)