最新文章专题视频专题问答1问答10问答100问答1000问答2000关键字专题1关键字专题50关键字专题500关键字专题1500TAG最新视频文章推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37视频文章20视频文章30视频文章40视频文章50视频文章60 视频文章70视频文章80视频文章90视频文章100视频文章120视频文章140 视频2关键字专题关键字专题tag2tag3文章专题文章专题2文章索引1文章索引2文章索引3文章索引4文章索引5123456789101112131415文章专题3
当前位置: 首页 - 科技 - 知识百科 - 正文

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

来源:动视网 责编:小采 时间:2020-11-27 21:54:13
文档

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

微信小程序中如何使用flyio封装网络请求:Flyio简介 Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应、自动转化JSON、请求转发等功能,详情请参考:https://
推荐度:
导读微信小程序中如何使用flyio封装网络请求:Flyio简介 Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应、自动转化JSON、请求转发等功能,详情请参考:https://


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

    文档

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

    微信小程序中如何使用flyio封装网络请求:Flyio简介 Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应、自动转化JSON、请求转发等功能,详情请参考:https://
    推荐度:
    • 热门焦点

    最新推荐

    猜你喜欢

    热门推荐

    专题
    Top