Use Fly to initiate http requests in WeChat applet

The javascript running environment of WeChat applet is different from that of the browser. The script logic of the page runs in JsCore, which is an environment without window objects. Therefore, window cannot be used in the script, and components cannot be operated in the script. There is no XmlhttpRequest object in JsCore, so jquery, zepto, axios cannot be used in the applet. This is when fly comes into play.

You need to download wx.js (uncompressed) or wx.umd.min.js (compressed, 12k) from https://unpkg.com/flyio/dist/ or https://github.com/wendux/fly/tree/master/dist, and then copy it to your project directory.

[[207726]]

use

 var Fly = require ( "../lib/wx.js" ) //wx.js is the source code file you downloaded
 var fly = new Fly(); create a fly instance
 ...
 Page({
 //Event processing function
 bindViewTap: function () {
 //Call
    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)
 })
 })
 }) 
 
 
 Author: lazydu
 Link: http://www.jianshu.com/p/2d0a1ad94ed5
 Source: Jianshu
 The copyright belongs to the author. For commercial reproduction, please contact the author for authorization. For non-commercial reproduction, please indicate the source.

If you are just a simple user, you don't need to read on, just stop here, don't close it in a hurry, come and star it before leaving https://github.com/wendux/fly. If you are interested in the principle, the following introduces the principle behind it.

principle

Fly's support for mini-programs is actually through a custom http engine. Let's take a look at the wx.js source code:

 // WeChat applet entry
 var Fly=require( "../dist/fly" )
 var EngineWrapper = require( "../dist/engine-wrapper" )
 var adapter = require( "../dist/adapter/wx" ) //WeChat applet adapter
 var wxEngine = EngineWrapper(adapter)
 module.exports= function (engine) {
 return new Fly(engine||wxEngine);
 } 
 
 
 Author: lazydu
 Link: http://www.jianshu.com/p/2d0a1ad94ed5
 Source: Jianshu
 The copyright belongs to the author. For commercial reproduction, please contact the author for authorization. For non-commercial reproduction, please indicate the source.

It can be seen that the key code is in adapter/wx. Let's take a look at the adapter code of the WeChat applet:

 //WeChat applet 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
 })
 }
 }
 //Call the WeChat API to make a request
 wx.request(con)
 } 
 
 
 Author: lazydu
 Link: http://www.jianshu.com/p/2d0a1ad94ed5
 Source: Jianshu
 The copyright belongs to the author. For commercial reproduction, please contact the author for authorization. For non-commercial reproduction, please indicate the source.

That's all the implementation, very simple! This example can help you understand the sentence "Fly supports different environments through different adapters". As for other environments, we can just follow suit.