微信小程序中如何使用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 相关文章推荐
Jqyery中同等与js中windows.onload的应用
May 10 Javascript
jQuery News Ticker 基于jQuery的即时新闻行情展示插件
Nov 05 Javascript
jquery 提示信息显示后自动消失的具体实现
Dec 18 Javascript
javascript绘制漂亮的心型线效果完整实例
Feb 02 Javascript
JS中数组重排序方法
Nov 11 Javascript
JS异步文件分片断点上传的实现思路
Dec 25 Javascript
vue做网页开场视频的实例代码
Oct 20 Javascript
VueJs 搭建Axios接口请求工具
Nov 20 Javascript
webstrom Debug 调试vue项目的方法步骤
Jul 17 Javascript
JavaScript Dom 绑定事件操作实例详解
Oct 02 Javascript
Vue实现导航栏的显示开关控制
Nov 01 Javascript
详解template标签用法(含vue中的用法总结)
Jan 12 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下打开URL地址的几种方法小结
2010/05/16 PHP
set_include_path和get_include_path使用及注意事项
2013/02/02 PHP
yii的CURD操作实例详解
2014/12/04 PHP
PHP编译configure时常见错误的总结
2017/08/17 PHP
详解PHP的抽象类和抽象方法以及接口总结
2019/03/15 PHP
PHP中用Trait封装单例模式的实现
2019/12/18 PHP
js实现权限树的更新权限时的全选全消功能
2009/02/17 Javascript
浏览器常用高宽的jquery插件
2011/02/24 Javascript
js中eval详解
2012/03/30 Javascript
JavaScript不刷新实现浏览器的前进后退功能
2014/11/05 Javascript
node.js中的fs.rmdir方法使用说明
2014/12/16 Javascript
js与jquery实时监听输入框值的oninput与onpropertychange方法
2015/02/05 Javascript
Javascript writable特性介绍
2015/02/27 Javascript
Jquery中Event对象属性小结
2015/02/27 Javascript
Javascript实现鼠标右键特色菜单
2015/08/04 Javascript
jquery弹出遮掩层效果【附实例代码】
2016/04/28 Javascript
jQuery+ajax+asp.net获取Json值的方法
2016/06/08 Javascript
js实现不提示直接关闭网页窗口
2017/03/30 Javascript
vue中使用element-ui进行表单验证的实例代码
2018/06/22 Javascript
JavaScript实现新年倒计时效果
2018/11/17 Javascript
使用Layer组件弹出多个对话框(非嵌套)与关闭及刷新的例子
2019/09/25 Javascript
tensorflow TFRecords文件的生成和读取的方法
2018/02/06 Python
python五子棋游戏的设计与实现
2019/06/18 Python
python同步windows和linux文件
2019/08/29 Python
Pytorch DataLoader 变长数据处理方式
2020/01/08 Python
python设置代理和添加镜像源的方法
2020/02/14 Python
pytorch masked_fill报错的解决
2020/02/18 Python
关于多元线性回归分析——Python&SPSS
2020/02/24 Python
使用python操作lmdb对数据读取的实例
2020/12/11 Python
python+opencv3.4.0 实现HOG+SVM行人检测的示例代码
2021/01/28 Python
电脑饰品店的创业计划书
2014/01/21 职场文书
人力资源管理专业自荐书范文
2014/02/10 职场文书
汉字听写大会观后感
2015/06/12 职场文书
于丹论语心得观后感
2015/06/15 职场文书
三十年同学聚会致辞
2015/07/28 职场文书
一文带你探究MySQL中的NULL
2021/11/11 MySQL