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

微信(小程序)  /  管理员 发布于 3年前   213

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

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

您可能感兴趣的文章:

• 详解微信小程序网络请求接口封装实例
• 微信小程序网络请求封装示例
• 微信小程序之网络请求简单封装实例详解
• 微信小程序网络请求wx.request详解及实例
• 微信小程序 网络请求（post请求，get请求）
• 微信小程序 POST请求（网络请求）详解及实例代码
• 微信小程序 网络请求API详解
• 微信小程序网络请求实现过程解析