小程序中使用flyio封装网络请求

Flyio简介

Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持，但同时对用户层提供统一、标准的Promise API。不仅如此，Fly.js还支持请求/响应拦截器、自动转化JSON、请求转发等功能，详情请参考：https://github.com/wendux/fly 。下面我们看看在微信小程序、mpvue中和中如何使用fly.

Flyio 官方地址 文档

github地址

Flyio的一些特点

fly.js 是一个基于 promise 的，轻量且强大的Javascript http 网络库，它有如下特点：

• 提供统一的 Promise API。
• 浏览器环境下，轻量且非常轻量 。
• 支持多种JavaScript 运行环境
• 支持请求／响应拦截器。
• 自动转换 JSON 数据。
• 支持切换底层 Http Engine，可轻松适配各种运行环境。
• 浏览器端支持全局Ajax拦截 。
• H5页面内嵌到原生 APP 中时，支持将 http 请求转发到 Native。支持直接请求图片。

接着上一篇小程序搭建框架完美使用mpvue搭建小程序框架，继续在小程序中使用flyio请求，封装代码如下

一、src下新建utils/request.js文件

var Fly=require("flyio/dist/npm/wx") 
import { getCache } from '../utils'

const request = new Fly()


// 全局加载提示 - 设定时间
let ltime = 0;

function closeLoading(param) {
    ltime--
 }
request.interceptors.request.use((request) => {
    // 全局加载提示 - 展示提示
    // wx.showNavigationBarLoading() 
    ltime++

    let dataSource = getCache("dataSource")
    request.headers = {
        "Content-Type": "application/x-www-form-urlencoded",
        "source": "miniApp",
        "dataSource": dataSource ? dataSource : ''
    }
    // 没用到
    if (request.url.indexOf('getReviewInfo') != -1) {
        closeLoading()
        return request
    }
    // 登录
    console.log('这是token');
    console.log();
    let type = '';
    if(request.url.indexOf("wxLogin") != -1) {
        type = request.body.loginType;
    }
    console.log(getCache("token"));
    console.log('这是token');
    if (request.url.indexOf("wxLogin") == -1 || type == 'WORKBENCH') {
        // let storeId = getCache("storeId");
        let storeCode = getCache("storeCode");
        let inviter = getCache("inviter");
        let token = getCache("token");
        request.headers = {
            "Content-Type": "application/x-www-form-urlencoded",
            "source": "miniApp",
            "token": token,
            "storeCode": storeCode,
            "inviter": inviter
        }
        console.log('打印request');
        console.log(request);
        console.log('打印request');
        let dataSource = getCache("dataSource")
        if (dataSource) {
            request.headers['dataSource'] = dataSource
        }
    }
    return request
})

request.interceptors.response.use((response, promise) => {
         closeLoading()
        // wx.hideNavigationBarLoading()
        // 微信运维统计
        if (response.status) {
            wx.reportMonitor('0', +(response.status))
        }
        if (response.headers.date) {
            let time = new Date().getTime() - new Date(response.headers.date).getTime()
            wx.reportMonitor('1', +(time))
        }
        // 错误提示
        if (response.status != 200) {
            wx.showToast({
                title: '出错啦！请稍后再试试哦～',
                icon: 'none',
                duration: 2000
            })
        }
        return promise.resolve(response.data)
    },
    (err, promise) => {
        wx.hideNavigationBarLoading()
        return promise.resolve()
    }
)
export default request

二、src下新建utils/api.js文件

 export const baseUrlApi = 'http://192.168.128.242:8080'//---开发调试环境
//export const baseUrlApi = 'https://test.mini.com'//---测试环境https
//export const baseUrlApi = 'https://product.mini.com'//---生产环境https

这个里面可以写不同环境或者调试的接口地址

三、src下新建service文件夹，在这个下面不同的模块简历不同的js文件，例如：login-service.js，order-service.js

里面代码示例如下

import { baseUrlApi } from '../utils/api'
import request from '../utils/request'

export default {
 // 登录
    wxLogin: (data) =>
        request.post(`/store-miniApp-web/external/interface/wechat/wxLogin`, data, { baseURL: baseUrlApi }),

 // 收藏
  addCollect: (goodId, status) =>
    request.get(`/store-miniApp-web/store/member/addCollect?goodId=${goodId}&status=${status}`,
      null, {
        baseURL: baseUrlApi
      }),

}

四、接口请求的使用

import loginApi from "@/service/login-service";

  methods: {
//-登录
    clickLoginBtn() {
      var data = {
        phone: '18709090909',
        password: "123456",
      };
      console.log("登录参数==", data);
      loginApi.wxLogin(data).then(
        data => {
          if (!data) {
            this.$toast(data.msg);
            return;
          }
          if (data.code==0) {
            console.log("登录成功", data);   
          }
        },
        err => {

        }
      );
    },
    //-收藏
    collect() {
      let isCollect = "1"; //1收藏 0取消
      let goodId = "4343434";
      loginApi.addCollect(goodsId, isCollect).then(data => {
        if (data.code != 0) {
          console.log("收藏失败", data);
          return;
        }
        if (isCollect == 1) {
          this.$toast("取消成功");
        } else {
          this.$toast("收藏成功");
        }
      });
    }
  }