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


Posted in Javascript onJuly 03, 2019

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("收藏成功");
    }
   });
  }
 }

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

Javascript 相关文章推荐
jquery autocomplete自动完成插件的的使用方法
Aug 07 Javascript
javascript学习笔记(十九) 节点的操作实现代码
Jun 20 Javascript
javascript跟随滚动效果插件代码(javascript Follow Plugin)
Aug 03 Javascript
javascript页面加载完执行事件代码
Feb 11 Javascript
使用node+vue.js实现SPA应用
Jan 28 Javascript
jQuery基于Ajax方式提交表单功能示例
Feb 10 Javascript
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
AngularJs用户登录问题处理(交互及验证、阻止FQ处理)
Oct 26 Javascript
vue2.0组件之间传值、通信的多种方式(干货)
Feb 10 Javascript
解决Angular2 router.navigate刷新页面的问题
Aug 31 Javascript
微信小程序如何通过用户授权获取手机号(getPhoneNumber)
Jan 21 Javascript
mapboxgl实现带箭头轨迹线的代码
Jan 04 Javascript
JQuery+Bootstrap 自定义全屏Loading插件的示例demo
Jul 03 #jQuery
使用vue实现各类弹出框组件
Jul 03 #Javascript
elementUI vue this.$confirm 和el-dialog 弹出框 移动 示例demo
Jul 03 #Javascript
使用微信SDK自定义分享的方法
Jul 03 #Javascript
微信小程序判断页面是否从其他页面返回的实例代码
Jul 03 #Javascript
8 个有用的JS技巧(推荐)
Jul 03 #Javascript
vue swipe自定义组件实现轮播效果
Jul 03 #Javascript
You might like
PHP写杨辉三角实例代码
2011/07/17 PHP
php将url地址转化为完整的a标签链接代码(php为url地址添加a标签)
2014/01/17 PHP
Zend Framework实现具有基本功能的留言本(附demo源码下载)
2016/03/22 PHP
PHP缩略图生成和图片水印制作
2017/01/07 PHP
jQuery插件-jRating评分插件源码分析及使用方法
2012/12/28 Javascript
JavaScript数组去重的3种方法和代码实例
2015/07/01 Javascript
JavaScript选取(picking)和反选(rejecting)对象的属性方法
2017/08/16 Javascript
浅谈express 中间件机制及实现原理
2017/08/31 Javascript
Swiper自定义分页器使用详解
2017/12/28 Javascript
在 Vue 项目中引入 tinymce 富文本编辑器的完整代码
2018/05/04 Javascript
10行代码实现微信小程序滑动tab切换
2018/12/28 Javascript
JS尾递归的实现方法及代码优化技巧
2019/01/19 Javascript
原生JavaScript实现的无缝滚动功能详解
2020/01/17 Javascript
[58:59]完美世界DOTA2联赛PWL S3 access vs CPG 第一场 12.13
2020/12/16 DOTA
python计算时间差的方法
2015/05/20 Python
python 计算文件的md5值实例
2017/01/13 Python
pyinstaller打包多个py文件和去除cmd黑框的方法
2019/06/21 Python
python 实现return返回多个值
2019/11/19 Python
解决springboot yml配置 logging.level 报错问题
2020/02/21 Python
Python sklearn库实现PCA教程(以鸢尾花分类为例)
2020/02/24 Python
css3实现冲击波效果的示例代码
2018/01/11 HTML / CSS
英国高端食品和葡萄酒超市:Waitrose
2016/08/23 全球购物
Ralph Lauren拉夫·劳伦美国官网:带有浓郁美国气息的高品味时装品牌
2017/11/01 全球购物
美国领先的机场停车聚合商:Airport Parking Reservations
2020/02/28 全球购物
LightInTheBox法国站:中国跨境电商
2020/03/05 全球购物
澳洲CFL商城:CHEMIST FOR LESS(中文)
2021/02/28 全球购物
环境科学毕业生自荐信
2013/11/21 职场文书
求职信范文英文版
2014/01/05 职场文书
商超业务员岗位职责
2014/03/12 职场文书
学习经验交流会主持词
2014/04/01 职场文书
室内设计专业毕业生求职信
2014/05/02 职场文书
优秀团员事迹材料2000字
2014/08/20 职场文书
授权委托书样本及填写说明
2014/09/19 职场文书
小升初自荐信范文
2015/03/05 职场文书
企业法人代表证明书
2015/06/18 职场文书
SQL Server数据库基本概念、组成、常用对象与约束
2022/03/20 SQL Server