小程序mpvue中flyio的使用方法

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ，最大可能的实现 Write Once Run Everywhere。本文主要介绍一下如何在微信小程序中使用flyio。

简单用法请直接移步官方文档查看，https://github.com/wendux/fly

下面主要说一下它的拦截器的使用方法：

/**
 * Created by zhengyi.fu on 2018/8/31.
 */
import Fly from 'flyio/dist/npm/wx'
const fly = new Fly()
const host = "https://rmall.ukelink.net"
//添加请求拦截器
fly.interceptors.request.use((request) => {
  wx.showLoading({
    title: "加载中",
    mask:true
  });
  console.log(request);
  // request.headers["X-Tag"] = "flyio";
  // request.headers['content-type']= 'application/json';
  request.headers = {
    "X-Tag": "flyio",
    'content-type': 'application/json'
  };

  let authParams = {
    //公共参数
    "categoryType": "SaleGoodsType@sim",
    "streamNo": "wxapp153570682909641893",
    "reqSource": "MALL_H5",
    "appid": "string",
    "timestamp": new Date().getTime(),
    "sign": "string"
  };

  request.body && Object.keys(request.body).forEach((val) => {
    if(request.body[val] === ""){
      delete request.body[val]
    };
  });
  request.body = {
    ...request.body,
    ...authParams
  }
  return request;
});

//添加响应拦截器
fly.interceptors.response.use(
  (response) => {
    wx.hideLoading();
    return response.data;//请求成功之后将返回值返回
  },
  (err) => {
    //请求出错，根据返回状态码判断出错原因
    console.log(err);
    wx.hideLoading();
    if(err){
      return "请求失败";
    };
  }
);

fly.config.baseURL = host;

export default fly;

用法：将此文件引入main.js然后直接挂载到vue原型上

import fly from './utils/fly'

Vue.prototype.$fly = fly;

 

然后在页面或者组件中直接使用：

this.$fly.request({
     method:"post", //post/get 请求方式
     url:"/mms/country/queryValidZoneListForMallHome",
     body:{}
   }).then(res =>{
     console.log(res)
})

下面在介绍一种微信小程序内置的请求接口的方法：

/**
 * Created by zhengyi.fu on 2018/8/31.
 */
const host = 'https://rmall.ukelink.net';
function request(url, method, data, header = {}) {
  wx.showLoading({
    title: '加载中' //数据请求前loading
  })
  return new Promise((resolve, reject) => {
      wx.request({
        url: host + url, //仅为示例，并非真实的接口地址
        method: method,
        data: data,
        headers: {
          'content-type': 'application/json' // 默认值
        },
        success: function (res) {
          wx.hideLoading();
          resolve(res.data)
        },
        fail: function (error) {
          wx.hideLoading();
          reject(false)
        },
        complete: function () {
          wx.hideLoading();
        }
      })
  })
}
function get(obj) {
  return request(obj.url, 'GET', obj.data)
}
function post(obj) {
  return request(obj.url, 'POST', obj.data)
}

export default {
  request,
  get,
  post,
  host
}

用法：将此文件引入main.js然后直接挂载到vue原型上

import request from './utils/request'

Vue.prototype.$http = request;

 

然后在页面或者组件中直接使用：

this.$http.post({
        url:"/mms/country/queryValidZoneListForMallHome",
        data:{
            "categoryType":"SaleGoodsType@sim",
            "streamNo":"web_bss153570682909641893",
            "reqSource":"MALL_H5",
            "appid":"string",
            "timestamp":1535706829096,
            "sign":"string"
        }
    }).then(res =>{
        console.log(res)
    })