微信小程序中使用Fly.js 发起http请求

微信小程序的 javascript运行环境和浏览器不一样,页面的脚本逻辑是在JsCore中运行,JsCore是一个没有窗口对象的环境,因此不能在脚本中使用window,也没法在脚本中操做组件,JsCore中也没有 XmlhttpRequest对象,因此jquery 、zepto、axios这些在小程序中都不能用,而此时,正是 fly 大显身手的时候。javascript

这是fly的第三篇文章,帮助您在微信小程序中使用fly。在阅读本文以前,若是您还不了解 fly。 请先阅读前两篇文章:java

第一篇: JS HTTP 请求终极解决方案 - fly.js jquery

第二篇: Fly vs axiosios

下载

github.com/wendux/fly/…
github.com/wendux/fly/… (8kb)
下载任意一个, 而后将其拷贝到您的工程目录下。git

使用

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 。 若是你对原理感兴趣,下面介绍一下背后的原理。github

原理

Fly对小程序的支持其实是经过自定义 http engine的方式,咱们来看一下wx.js源码:npm

//微信小程序入口
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代码:axios

//微信小程序适配器
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微信小程序

相关文章
相关标签/搜索