微信小程序中如何使用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异步请求实例代码
Jun 21 Javascript
Javascript 实现图片无缝滚动
Dec 19 Javascript
jQuery源码解读之hasClass()方法分析
Feb 20 Javascript
纯js代码制作的网页时钟特效【附实例】
Mar 30 Javascript
理解 Node.js 事件驱动机制的原理
Aug 16 Javascript
vue checkbox 全选 数据的绑定及获取和计算方法
Feb 09 Javascript
vue-cli3全面配置详解
Nov 14 Javascript
react-native滑动吸顶效果的实现过程
Jun 03 Javascript
Ant Design Pro 下实现文件下载的实现代码
Dec 03 Javascript
Vue执行方法,方法获取data值,设置data值,方法传值操作
Aug 05 Javascript
vue3.0 项目搭建和使用流程
Mar 04 Vue.js
TypeScript中条件类型精读与实践记录
Oct 05 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
Amazon Prime Video平台《无限住人 -IMMORTAL-》2020年开始TV放送!
2020/03/06 日漫
第五节--克隆
2006/11/16 PHP
PHP 长文章分页函数 带使用方法,不会分割段落,翻页在底部
2009/10/22 PHP
解析PHP跨站刷票的实现代码
2013/06/18 PHP
PHP实现删除多重数组对象属性并重新赋值的方法
2017/06/07 PHP
thinkPHP5项目中实现QQ第三方登录功能
2017/10/20 PHP
Javascript 对象的解释
2008/11/24 Javascript
JavaScript学习笔记(十)
2010/01/17 Javascript
JS画5角星方法介绍
2013/09/17 Javascript
使用js Math.random()函数生成n到m间的随机数字
2014/10/09 Javascript
jquery中radio checked问题
2015/03/16 Javascript
JS获得图片alt信息的方法
2015/04/01 Javascript
jQuery Validate设置onkeyup验证的实例代码
2016/12/09 Javascript
jQuery事件详解
2017/02/23 Javascript
vue.js 初体验之Chrome 插件开发实录
2017/05/13 Javascript
使用Vue实现调用接口加载页面初始数据
2019/10/28 Javascript
微信小程序实现图片压缩
2019/12/03 Javascript
js实现简单贪吃蛇游戏
2020/05/15 Javascript
vue 使用async写数字动态加载效果案例
2020/07/18 Javascript
[04:11]2014DOTA2国际邀请赛 CIS遗憾出局梦想不灭
2014/07/09 DOTA
纯用NumPy实现神经网络的示例代码
2018/10/24 Python
pandas数据筛选和csv操作的实现方法
2019/07/02 Python
numpy ndarray 按条件筛选数组,关联筛选的例子
2019/11/26 Python
Python实现遗传算法(二进制编码)求函数最优值方式
2020/02/11 Python
CSS实现的一闪而过的图片闪光效果
2014/04/23 HTML / CSS
Sperry澳大利亚官网:源自美国帆船鞋创始品牌
2019/07/29 全球购物
成教毕业生自我鉴定
2013/10/23 职场文书
大学生学业生涯规划
2014/01/05 职场文书
环卫工人节活动总结
2014/08/29 职场文书
个人三严三实对照检查材料思想汇报
2014/09/22 职场文书
2015年党员自我剖析材料
2014/12/17 职场文书
财务总监岗位职责
2015/02/03 职场文书
2015学习委员工作总结范文
2015/04/03 职场文书
西部计划志愿者工作总结
2015/08/11 职场文书
Python连接Postgres/Mysql/Mongo数据库基本操作大全
2021/06/29 Python
浅谈MySql整型索引和字符串索引失效或隐式转换问题
2021/11/20 MySQL