微信小程序中如何使用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实现的可编辑下拉框实现代码
Aug 02 Javascript
Bootstrap Fileinput文件上传组件用法详解
May 10 Javascript
bootstrap和jQuery.Gantt的css冲突 如何解决
May 29 Javascript
js仿百度切换皮肤功能(html+css)
Jul 10 Javascript
JavaScript实现汉字转换为拼音的库文件示例
Dec 22 Javascript
ES6中Proxy与Reflect实现重载(overload)的方法
Mar 30 Javascript
利用Node.js检测端口是否被占用的方法
Dec 07 Javascript
Vue.js 实现微信公众号菜单编辑器功能(二)
May 08 Javascript
解决Vue-cli npm run build生产环境打包,本地不能打开的问题
Sep 20 Javascript
vue里input根据value改变背景色的实例
Sep 29 Javascript
JS实现横向轮播图(中级版)
Jan 18 Javascript
vue本地构建热更新卡顿的问题“75 advanced module optimization”完美解决方案
Aug 05 Vue.js
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语法(2)
2006/10/09 PHP
PHP开发规范手册之PHP代码规范详解
2011/01/13 PHP
ThinkPHP3.1新特性之动态设置自动完成及自动验证示例代码
2014/06/23 PHP
PHP+AJAX实现投票功能的方法
2015/09/28 PHP
PHP入门教程之面向对象基本概念实例分析
2016/09/11 PHP
修改jquery里的dialog对话框插件为框架页(iframe) 的方法
2010/09/14 Javascript
JQuery处理json与ajax返回JSON实例代码
2014/01/03 Javascript
three.js绘制地球、飞机与轨迹的效果示例
2017/02/28 Javascript
详解Angular6.0使用路由步骤(共7步)
2018/06/29 Javascript
在Node.js下运用MQTT协议实现即时通讯及离线推送的方法
2019/01/24 Javascript
Vue.js特性Scoped Slots的浅析
2019/02/20 Javascript
使用Webpack提升Vue.js应用程序的4种方法(翻译)
2019/10/09 Javascript
浅谈JS for循环中使用break和continue的区别
2020/07/21 Javascript
关于vue属性使用和不使用冒号的区别说明
2020/10/22 Javascript
[03:22]DAC最前线(第二期)—DOTA2亚洲邀请赛主赛场周边及线路探访
2015/01/24 DOTA
使用Python的判断语句模拟三目运算
2015/04/24 Python
Python写入数据到MP3文件中的方法
2015/07/10 Python
python实现外卖信息管理系统
2018/01/11 Python
Python网络编程基于多线程实现多用户全双工聊天功能示例
2018/04/10 Python
Python 操作mysql数据库查询之fetchone(), fetchmany(), fetchall()用法示例
2019/10/17 Python
Django 实现Admin自动填充当前用户的示例代码
2019/11/18 Python
python GUI库图形界面开发之PyQt5 UI主线程与耗时线程分离详细方法实例
2020/02/26 Python
如何Tkinter模块编写Python图形界面
2020/10/14 Python
CSS3 linear-gradient线性渐变生成加号和减号的方法
2017/11/21 HTML / CSS
美国正宗设计师眼镜在线零售商:EYEZZ
2019/03/23 全球购物
Easy Spirit官网:美国休闲鞋履中的代表品牌
2019/04/12 全球购物
文件中有一组整数,要求排序后输出到另一个文件中
2012/01/04 面试题
MYSQL支持事务吗
2013/08/09 面试题
银行求职信个人范文
2013/12/16 职场文书
考试不及格检讨书
2014/01/09 职场文书
餐厅总厨求职信
2014/03/04 职场文书
职称评定自我鉴定
2014/03/18 职场文书
《陈涉世家》教学反思
2014/04/12 职场文书
2014年感恩母亲演讲稿
2014/05/27 职场文书
2014高中生入党思想汇报范文
2014/09/13 职场文书
2016年五四青年节校园广播稿
2015/12/17 职场文书