微信小程式中使用Fly.js 發起http請求

wendux發表於2017-10-25
微信小程式JSHTTP

微信小程式的 javascript執行環境和瀏覽器不同，頁面的指令碼邏輯是在JsCore中執行，JsCore是一個沒有視窗物件的環境，所以不能在指令碼中使用window，也無法在指令碼中操作元件，JsCore中也沒有 XmlhttpRequest物件，所以jquery 、zepto、axios這些在小程式中都不能用，而此時，正是 fly 大顯身手的時候。

這是fly的第三篇文章，幫助您在微信小程式中使用fly。在閱讀本文之前，如果您還不瞭解 fly。 請先閱讀前兩篇文章：

第一篇： JS HTTP 請求終極解決方案 - fly.js

第二篇： Fly vs axios

下載

github.com/wendux/fly/…
github.com/wendux/fly/… (8kb)
下載任意一個, 然後將其拷貝到您的工程目錄下。

使用

var Fly=require("../lib/wx.js") //wx.js為您下載的原始碼檔案
var fly=new Fly();建立fly例項
...
Page({
  //事件處理函式
  bindViewTap: function() {
    //呼叫
    fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{
      console.log(d.data)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
  })
})複製程式碼

如果您只是單純的使用者，不用往下看了，到這裡就可以了，先別急著關啊，來，star一下再走 github.com/wendux/fly 。 如果你對原理感興趣，下面介紹一下背後的原理。

原理

Fly對小程式的支援實際上是通過自定義 http engine的方式，我們來看一下wx.js原始碼：

//微信小程式入口
var  Fly=require("../dist/fly")
var EngineWrapper = require("../dist/engine-wrapper")
var adapter = require("../dist/adapter/wx") //微信小程式adapter
var wxEngine = EngineWrapper(adapter)
module.exports=function (engine) {
    return new Fly(engine||wxEngine);
}複製程式碼

可以看出，關鍵程式碼就在adapter/wx中，我們看看微信小程式的adapter程式碼：

//微信小程式介面卡
module.exports=function(request, responseCallback) {
    var con = {
        method: request.method,
        url: request.url,
        dataType: request.dataType||"text",
        header: request.headers,
        data: request.body||{},
        success(res) {
            responseCallback({
                statusCode: res.statusCode,
                responseText: res.data,
                headers: res.header,
                statusMessage: res.errMsg
            })
        },
        fail(res) {
            responseCallback({
                statusCode: res.statusCode||0,
                statusMessage: res.errMsg
            })
        }
    }
    //呼叫微信介面發出請求
    wx.request(con)
}複製程式碼

這就是所有的實現，很簡單！通過這個例子，可以幫助您理解 “fly正是通過不同的adpter來支援不同的環境” 這句話，至於其它的環境，我們完全可以照貓畫虎。

最後

再次貼出fly github地址，如果你喜歡，歡迎star，以使更多的人知道fly，感謝您的支援：github.com/wendux/fly

相關文章