Java学习者论坛

 找回密码
 立即注册

QQ登录

只需一步,快速开始

手机号码,快捷登录

恭喜Java学习者论坛(https://www.javaxxz.com)已经为数万Java学习者服务超过8年了!积累会员资料超过10000G+
成为本站VIP会员,下载本站10000G+会员资源,购买链接:点击进入购买VIP会员
JAVA高级面试进阶视频教程Java架构师系统进阶VIP课程

分布式高可用全栈开发微服务教程

Go语言视频零基础入门到精通

Java架构师3期(课件+源码)

Java开发全终端实战租房项目视频教程

SpringBoot2.X入门到高级使用教程

大数据培训第六期全套视频教程

深度学习(CNN RNN GAN)算法原理

Java亿级流量电商系统视频教程

互联网架构师视频教程

年薪50万Spark2.0从入门到精通

年薪50万!人工智能学习路线教程

年薪50万!大数据从入门到精通学习路线年薪50万!机器学习入门到精通视频教程
仿小米商城类app和小程序视频教程深度学习数据分析基础到实战最新黑马javaEE2.1就业课程从 0到JVM实战高手教程 MySQL入门到精通教程
查看: 809|回复: 0

[默认分类] mpvue微信小程序http请求终极解决方案-fly.js

[复制链接]
  • TA的每日心情
    开心
    2021-12-13 21:45
  • 签到天数: 15 天

    [LV.4]偶尔看看III

    发表于 2020-8-17 10:31:44 | 显示全部楼层 |阅读模式
    fly.js是什么?
      一个支持所有javaScript运行环境的基于Promise的、支持请求转发、强大的http请求库。可以让您在多个端上尽可能大限度的实现代码复用(官网解释)
    fly.js有什么特点:

    提供统一的 Promise API。
    浏览器环境下,轻量且非常轻量
    支持多种JavaScript 运行环境
    支持请求/响应拦截器。
    自动转换 JSON 数据。
    支持切换底层 Http Engine,可轻松适配各种运行环境。
    浏览器端支持全局Ajax拦截 。
    H5页面内嵌到原生 APP 中时,支持将 http 请求转发到 Native。支持直接请求图片

    定位与目标:
      Fly 的定位是成为 Javascript http请求的终极解决方案。也就是说,在任何能够执行 Javascript 的环境,只要具有访问网络的能力,Fly都能运行在其上,提供统一的API。
    使用方法: 
    1.结合npm
    1. [code]npm install flyio
    复制代码
    [/code]
    2.使用CDN(浏览器中)
    1. [code]<script src="https://unpkg.com/flyio/dist/fly.min.js"></script>
    复制代码
    [/code]
    3.UMD(浏览器中
    1. [code]https://unpkg.com/flyio/dist/umd/fly.umd.min.js
    复制代码
    [/code]
    因为作者使用npm在mpvue微信小程序中用到,下面将经验详细与大家分享:
    npm下载好组建后,我在微信小程序的src/main.js目录下引用了官网的这段代码:
    1. [code]var Fly=require("flyio/dist/npm/wx") var fly=new Fly
    复制代码
    [/code]
    刚开始在后面加入了这段代码,

    1. Vue.prototype.$http = fly // 将fly实例挂在vue原型上
    复制代码


    但是在post传参时一直失败,最后不得不放弃。老老实实在每次使用是用上以下代码来请求数据:
    发起GET请求:

    1. var fly=require("flyio")
    2. //通过用户id获取信息,参数直接写在url中
    3. fly.get("/user?id=133")
    4.   .then(function (response) {
    5.     console.log(response);
    6.   })
    7.   .catch(function (error) {
    8.     console.log(error);
    9.   });
    10. //query参数通过对象传递
    11. fly.get("/user", {
    12.       id: 133
    13.   })
    14.   .then(function (response) {
    15.     console.log(response);
    16.   })
    17.   .catch(function (error) {
    18.     console.log(error);
    19.   });
    复制代码


    发起POST请求:

    1. fly.post("/user", {
    2.     name: "Doris",
    3.     age: 24
    4.     phone:"18513222525"
    5.   })
    6.   .then(function (response) {
    7.     console.log(response);
    8.   })
    9.   .catch(function (error) {
    10.     console.log(error);
    11.   });
    复制代码


    发起多并发请求:

    1. function getUserRecords() {
    2.   return fly.get("/user/133/records");
    3. }
    4. function getUserProjects() {
    5.   return fly.get("/user/133/projects");
    6. }
    7. fly.all([getUserRecords(), getUserProjects()])
    8.   .then(fly.spread(function (records, projects) {
    9.     //两个请求都完成
    10.   }))
    11.   .catch(function(error){
    12.     console.log(error)
    13.   })
    复制代码


    直接用
    1. request请求数据:
    复制代码


    1. /直接调用request函数发起post请求
    2. fly.request("/test",{hh:5},{
    3.     method:"post",
    4.     timeout:5000 //超时设置为5s
    5. })
    6. .then(d=>{ console.log("request result:",d)})
    7. .catch((e) => console.log("error", e))
    复制代码


    以上由于传递参数用上了 { } 花括号,这是传递JSON数据参数,很多时候我们只需要传递一个【type=type】就可以,
    所以我们还可以用如下方式:
    main.js
      

    1. var Fly = require("flyio/dist/npm/wx")
    2. var fly = new Fly
    3. Vue.prototype.$http = fly // 将fly实例挂在vue原型上
    复制代码


      
    index.vue
      

    1. var newest = String(this.$mp.query.type); this.$http .post( "https://tashimall.miniprogram.weixin-api-test.yokead.com/bulletin/getBulletin.json", "type=" + newest ) .then(res => { //输出请求数据
    2.         this.allBulletin = res.data.data; }) .catch(err => { console.log(err.status, err.message); });[/i]
    复制代码


      
    注意⚠️:红色标出部分
    回复

    使用道具 举报

    您需要登录后才可以回帖 登录 | 立即注册

    本版积分规则

    QQ|手机版|Java学习者论坛 ( 声明:本站资料整理自互联网,用于Java学习者交流学习使用,对资料版权不负任何法律责任,若有侵权请及时联系客服屏蔽删除 )

    GMT+8, 2024-3-28 17:08 , Processed in 0.400997 second(s), 50 queries .

    Powered by Discuz! X3.4

    © 2001-2017 Comsenz Inc.

    快速回复 返回顶部 返回列表