• Wechat mini program mpvue+vantUI+ Flyio +vuex into the pit (1)
  • Wechat mini program mpvue+vantUI+ Flyio +vuex into the pit (3)

The configuration of the mpvue+ Router + UI library was briefly written in the previous article. This article continues to write the interface request flyio

A brief introduction to Flyio

Fly.js is a promising, request-forwarding, powerful HTTP request library that supports all JavaScript runtime environments. This allows you to reuse as much code as possible across multiple ends.

Browser support

Chrome Firefox Safari Opera Edge IE
✔ ✔ ✔ ✔ ✔ > 8

Currently, Fly.js supports Node.js, wechat applets, Weex, React Native, Quick App and browsers, all of which have different JavaScript runtime. More platforms are being added, so stay tuned.

Fly.js is a promise based, lightweight and powerful Javascript HTTP web library with the following features:

  • Provide a unified Promise API.
  • Lightweight and very lightweight in the browser environment.
  • Supports a variety of JavaScript runtime environments
  • Support for request/response interceptors.
  • Automatically convert JSON data.
  • Supports switching of the underlying Http Engine, easily adapted to various operating environments.
  • Browser-side support for global Ajax interception.
  • H5 pages, when embedded in Native apps, support forwarding HTTP requests to Native. Support direct request for images.

The Flyio help document fly.js can be found in the documentation

The installation

npm install flyio -S
Copy the code

Begin to use

Create an API folder in the SRC directory and create apiconfig.js to write the basic configuration of fly

const Fly = require('flyio/dist/npm/wx')
const fly = new Fly()
Copy the code

The official documentation says “new Fly”, since I’m using ESlint, this will give an error, so it actually means the same thing

Common Base configuration

Headers ={token: test_token} // // set timeout // fly.config.timeout=10000; // // set the request base address // fly.config.baseURL ='http://180.76.246.122/api/'
fly.config.baseURL = 'https://api.xxxx.com/api/'
Copy the code

Interceptor configuration

Request interceptor

/ / add request interceptor fly. Interceptors. Request. Use (config = > {letToken = store.state.user.token console.log(token) // Add custom header config.headers['token'] = token config.body = qs.stringify(config.body) // The interceptor returns request by default if no value is returnedreturn config
}, error => {
  Promise.reject(error)
})
Copy the code

Response interceptor

Fly. Interceptors. Response. Use ((response) = > {/ / / / agree with some response code statedoSthing // Returns only the data field of the request resultreturnResponse. data}, (err) => {console.log(err) // after a network error occursreturn Promise.resolve(err)
  }
)
Copy the code

Use fly to initiate the request

I did a public process on my side. After apiconfig was processed, I exported the instantiated fly, for example, I used it in userapi.js

import fly from './apiconfig'// Log in to obtain the token according to codeexport function loginByCode (data) {
  return fly.request(
    'User/LoginByCode',
    data,
    {method: 'post'})}export function getUserInfo () {
  return fly.request(
    'User/GetUserInfo',
    null,
    {method: 'get'})}Copy the code

Post and GET are listed here, but you can also write them directly, see the manual for more details

fly.get('url', {id: 1}).then()
fly.post('url', {id: 1}).then()
Copy the code

The order of the FLY request parameters is fixed because it is not passed as an object. Once you’ve written it, just use it on the page

The introduction of the file

import {loginByCode} from '@/api/userApi'
Copy the code
loginByCode(params).then(res => {
    console.log(res)
})
Copy the code

— — — — — — — — — — — — — — — — — — —

emm… That’s about it. It took so long to write… I’ve been really busy lately