Fly.js is a promising, powerful HTTP request library that supports multiple JavaScript runtimes. With it, you can use HTTP request code to run in browsers, wechat applets, Weex, Node, React Native, and fast applications. At the same time, it can easily cooperate with mainstream front-end frameworks to achieve Write Once Run Everywhere. The last article introduced using Flyio in fast apps. This article mainly introduces how to use Flyio in wechat mini programs.

Flyio Github: github.com/wendux/fly

The problem

With the release of Weex and MPvue, both support vue.js syntax. Vue already runs in browsers, applets, and Native. Although there are still differences between platforms, Write Once Run Everywhere can be basically implemented. This allows us to achieve maximum code reuse on multiple ends. But both VUE and Weex and MPVUE are essentially a View layer, and at best, only UI reuse is possible. But after the UI, the most important thing for an application is data, and that data usually comes from web requests (mostly HTTP). When using these frameworks, you need to use platform-specific apis for your network requests! This is bad, and means that the code for your network request cannot be reused, so although the UI can be reused, we still need to adapt the code for the network request part.

Flyio profile

To address these issues, you need a network library that can support multiple platforms, a unified API at the user level, and the platform differences are shielded at the bottom. The fly.js API is designed in a similar (but not identical) style to Axios to make it easier for Axios users to migrate.

Fly.js enables multi-environment support by switching between different Http engines underneath different JavaScript runtimes, but at the same time provides a unified, standard Promise API for the user layer. Fly.js also supports request/response interceptors, automatic JSON conversion, request forwarding, and more. For details, see github.com/wendux/fly. Let’s take a look at how fly is used in wechat miniprograms, MPvue and in wechat.

Wechat applets

Wechat applet adopts Web development technology stack and uses JavaScript language to develop, but JavaScript runtime and browser are different, resulting in axios, jQuery and other libraries cannot be used in wechat applet, while Flyio can. The specific usage method is given below

The introduction of fly

Flyio standard API in each platform is consistent, but the entry file is different, introduced in wechat mini program:

Npm install: Npm install flyio –save

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
Copy the code

If your wechat applet project does not use NPM to manage dependencies, you can download the source code directly to your applet project by linking wx.js or wx.umd.min.js. Download any of them, save to the local project directory, say in the “lib” directory, and then introduce:

var Fly=require(".. /lib/wx") //wx.js is the source file you downloaded
var fly=new Fly; // Create a fly instance
Copy the code

Once introduced, you can configure the FLY instance globally, add interceptors, and make network requests.

use

Fly provides Restful apis based on Promise that you can easily use, as described in the Fly documentation. A simple example is given below

// Add interceptor
fly.interceptors.request.use((config,promise) = >{
    // Add custom headers to all requests
    config.headers["X-Tag"] ="flyio";
    return config;
})
// Configure the request base address
fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'. Page({// Event handlers
  bindViewTap: function() {
    // Initiate a GET request
    fly.get("/test", {xx:6}).then((d) = >{
      // Output the request data
      console.log(d.data)
      // Outputs the response header
      console.log(d.header)
    }).catch(err= >{
      console.log(err.status,err.message) }) ... })})Copy the code

Used in MPvue

In MPVue you can also hang fly instances on vue prototypes, which can be easily called from any component via this:

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... // Add global configuration, interceptors, etc
Vue.prototype.$http=fly // Hang the FLY instance on the Vue prototype
Copy the code

In the component you can easily use:

this.$http.get("/test", {xx:6}).then((d) = >{
      // Output the request data
      console.log(d.data)
      // Outputs the response header
      console.log(d.header)
    }).catch(err= >{
      console.log(err.status,err.message)
    })
Copy the code

feedback

If you have any questions, please send them to issue.fly.js at github: github.com/fly