微信小程序中如何使用flyio封装网络请求

 更新时间:2019年07月03日 11:35:03   作者:奋斗的七月  
这篇文章主要介绍了微信小程序中如何使用flyio封装网络请求,Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API,需要的朋友可以参考下

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。支持直接请求图片。

在小程序中使用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("收藏成功");
    }
   });
  }
 }

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持脚本之家。

相关文章

  • JS生成随机数的多种方法汇总(不同范围、类型的随机数)

    JS生成随机数的多种方法汇总(不同范围、类型的随机数)

    js产生随机数通常是使用javascript的Math.random()函数,下面这篇文章主要给大家介绍了关于JS生成随机数的多种方法(不同范围、类型的随机数)的相关资料,文中通过实例代码介绍的非常详细,需要的朋友可以参考下
    2022-11-11
  • js精确的加减乘除实例

    js精确的加减乘除实例

    下面小编就为大家带来一篇js精确的加减乘除实例,具有非常好的参考价值。希望对大家有所帮助。一起跟随小编过来看看吧
    2017-11-11
  • Echarts地图实例详解(地图样式、合并地图、增加地图)

    Echarts地图实例详解(地图样式、合并地图、增加地图)

    ECharts是一个使用JavaScript实现的开源可视化库,涵盖各行业图表,满足各种需求,下面这篇文章主要给大家介绍了关于Echarts地图的相关资料,包括地图样式、合并地图、增加地图,需要的朋友可以参考下
    2022-06-06
  • js实现表格单列按字母排序

    js实现表格单列按字母排序

    这篇文章主要为大家详细介绍了js实现表格单列按字母排序,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2020-08-08
  • 微信小程序实现计算器案例

    微信小程序实现计算器案例

    这篇文章主要为大家详细介绍了微信小程序实现计算器案例,文中示例代码介绍的非常详细,具有一定的参考价值,感兴趣的小伙伴们可以参考一下
    2021-07-07
  • Fixie.js 自动填充内容的插件

    Fixie.js 自动填充内容的插件

    Fixie.js 自动填充内容的插件,需要的朋友可以参考下
    2012-06-06
  • 详解用js代码触发dom事件的实现方案

    详解用js代码触发dom事件的实现方案

    这篇文章主要介绍了详解用js代码触发dom事件的实现方案,文中通过示例代码介绍的非常详细,对大家的学习或者工作具有一定的参考学习价值,需要的朋友们下面随着小编来一起学习学习吧
    2020-06-06
  • 浅谈javascript事件环微任务和宏任务队列原理

    浅谈javascript事件环微任务和宏任务队列原理

    这篇文章主要介绍了javascript事件环 微任务和宏任务队列原理,帮助大家更好的理解和学习JavaScript,感兴趣的朋友可以了解下
    2020-09-09
  • JavaScript实现的简单烟花特效代码

    JavaScript实现的简单烟花特效代码

    这篇文章主要介绍了JavaScript实现的简单烟花特效代码,涉及JavaScript数学运算及页面元素基于定时函数运动的相关技巧,具有一定参考借鉴价值,需要的朋友可以参考下
    2015-10-10
  • 详解js数组的完全随机排列算法

    详解js数组的完全随机排列算法

    本文主要对常见的完全错误的随机排列算法进行介绍分析,并介绍了经典的随机排列算法,具有很好的参考价值,需要的朋友一起来看下吧
    2016-12-12

最新评论