在小程序/mpvue中使用flyio发起网络请求「建议收藏」

在小程序/mpvue中使用flyio发起网络请求「建议收藏」Fly.js一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库.有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、ReactNative、快应用中都能正常运行。同时可以方便配合主流前端框架,最大可能的实现WriteOnceRunEverywhere。上一篇文章介绍了在快应用中使用flyio,本文主要介绍一下如何在…

大家好,又见面了,我是你们的朋友全栈君。如果您正在找激活码,请点击查看最新教程,关注关注公众号 “全栈程序员社区” 获取激活教程,可能之前旧版本教程已经失效.最新Idea2022.1教程亲测有效,一键激活。

Jetbrains全系列IDE使用 1年只要46元 售后保障 童叟无欺

Fly.js 一个基于Promise的、强大的、支持多种JavaScript运行时的http请求库. 有了它,您可以使用一份http请求代码在浏览器、微信小程序、Weex、Node、React Native、快应用中都能正常运行。同时可以方便配合主流前端框架 ,最大可能的实现 Write Once Run Everywhere。上一篇文章介绍了在快应用中使用flyio,本文主要介绍一下如何在微信小程序中使用flyio。

Flyio Github: https://github.com/wendux/fly

问题

随着 Weex 、mpvue 的发布,他们都是支持Vue.js语法。目前vue已经你能够运行在浏览器、小程序和Native了。尽管各个平台仍有差异,但已经基本能实现 Write Once Run Everywhere 。这使得我们可以在多个端上实现尽可能大限度在代码复用。但是无论是 vue 还是Weex 、mpvue,它们本质上都只是一个View层,也就说最好的情况,也只能实现UI复用。但对于一个应用程序来说,除了UI,最重要的就是数据了,而数据来源一般都是来自网络请求(大多数都是http)。在使用这些框架时,您的网络请求,都需要使用平台特定的API!这很糟糕,意味着您网络请求的代码不能复用,所以尽管UI可以复用,但我们还需要去适配网络请求部分的代码。

Flyio简介

要上述问题,就需要一个能支持多个平台网络库,用户层提供统一的API,将平台差异在底层屏蔽。而 Fly.js就是这酱紫的一个网络库,为了方便axios使用者迁移,fly.js API设计风格和axios相似(但不完全相同)!

Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应拦截器、自动转化JSON、请求转发等功能,详情请参考:https://github.com/wendux/fly 。下面我们看看在微信小程序、mpvue中和中如何使用fly.

微信小程序

微信小程序采用web开发技术栈,使用JavaScript语言开发,但是JavaScript运行时和浏览器又有所不同,导致axios、jQuery等库无法在微信小程序中使用,而flyio可以。下面给出具体使用方法

引入fly

Flyio在各个平台下的标准API是一致的,只是入口文件不同,在微信小程序中引入:

Npm安装:npm install flyio --save.

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly

如果您的微信小程序项目没有使用npm来管理依赖,您可以直接下载源码到您的小程序工程,下载链接wx.jswx.umd.min.js .下载任意一个,保存到本地工程目录,假设在“lib”目录,接下来引入:

var Fly=require("../lib/wx") //wx.js为您下载的源码文件
var fly=new Fly; //创建fly实例

引入之后,您就可以对fly实例进行全局配置、添加拦截器、发起网络请求了。

使用

Fly基于Promise提供了Restful API,你可以方便的使用它们,具体请参考fly 文档 。下面给出一个简单的示例

//添加拦截器
fly.interceptors.request.use((config,promise)=>{
    //给所有请求添加自定义header
    config.headers["X-Tag"]="flyio";
    return config;
})
//配置请求基地址
fly.config.baseURL='http://www.dtworkroom.com/doris/1/2.0.0/'
...

Page({
  //事件处理函数
  bindViewTap: function() { 
   
    //发起get请求
    fly.get("/test",{xx:6}).then((d)=>{
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })
    ...
  })
})

在mpvue中使用

mpvue 中您也可以将fly实例挂在vue原型上,这样就可以在任何组件中通过this方便的调用:

var Fly=require("flyio/dist/npm/wx") 
var fly=new Fly
... //添加全局配置、拦截器等
Vue.prototype.$http=fly //将fly实例挂在vue原型上

在组件中您可以方便的使用:

this.$http.get("/test",{xx:6}).then((d)=>{
      //输出请求数据
      console.log(d.data)
      //输出响应头
      console.log(d.header)
    }).catch(err=>{
      console.log(err.status,err.message)
    })

反馈

如果您有问题欢迎在 在github 提issue . fly.js github: github.com/fly

版权声明:本文内容由互联网用户自发贡献,该文观点仅代表作者本人。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如发现本站有涉嫌侵权/违法违规的内容, 请联系我们举报,一经查实,本站将立刻删除。

发布者:全栈程序员-站长,转载请注明出处:https://javaforall.net/196103.html原文链接:https://javaforall.net

(0)
全栈程序员-站长的头像全栈程序员-站长


相关推荐

  • 【Android】Android长按复制文本功能[通俗易懂]

    【Android】Android长按复制文本功能[通俗易懂]安卓一般能用到长按复制的控件Textview,Editext,可能也有WebView在开始之前先说一个我遇到的一个坑:viewGroup中有一个这个属性android:descendantFocusability=”blocksDescendants”这个属性有三个值:beforeDescendants:viewgroup会优先其子类控件而获取到焦点afterDescendants:viewgroup只有当其子类控件不需要获取焦点时才获取焦点blocksDescendants:vie

    2022年9月28日
    2
  • 关于DLL注入的理解

    关于DLL注入的理解DLL注入方式较多,包括API拦截与替换、消息钩子、远程进程。这些注入都是针对第三方程序(下面简称目标程序)的操作。目标程序主要分为两种,解释型和编译型。解析型可以在解释权解释之前做很多事情,比较简单,也比较可行。编译型则无法在编译前做任何事情,因为目标程序一般是第三方编译完成之后发布出来的。编译完成后就是二进制代码(即使能反汇编),就不存在变量名、函数名等标识符,因为这些标识符已经转换成响应的地址。这种情况下,如果拿不到真正的地址,则即使注入到主线程(UI线程)中,依然没有任何作用。除非程序调用的dll包

    2022年5月13日
    29
  • Unity3D 去色Shader实现[通俗易懂]

    Unity3D 去色Shader实现[通俗易懂]一般为了达到一些特殊的渲染效果会降低纹理所使用的颜色数量,不管是在后处理里实现还是对单个物体实现,思路都是差不多的。在unity里颜色值分量可以看成[0,1]的连续值,但是其实也只能取到256个值,因此可以直接把[0,1]的值无损的映射到256个格子里,然后再根据需要,对这256个格子进行一定的合并,例如[0,9]原来是10种颜色,现在用0代表的颜色代替。[10,19]用10这种颜色代替,依次类推。关键代码,_DiscreteLevel为需要用的颜色数量,我们这里使用向下取整,因此所有落在这个区间内的颜

    2022年9月27日
    3
  • vuerouter配置_vue面包屑

    vuerouter配置_vue面包屑介绍VueRouter是Vue.js官方的路由管理器。它和Vue.js的核心深度集成,让构建单页面应用变得易如反掌。包含的功能有:嵌套的路由/视图表模块化的、基于组件的路由配置路由参

    2022年8月7日
    5
  • MDK(KEIL5)如何生成.bin文件(亲测可用)「建议收藏」

    MDK(KEIL5)如何生成.bin文件(亲测可用)「建议收藏」    最近师傅要求我们利用keil5生成.bin文件,但是在网上查找了很多资料,也按照网上的方法来设计,但是结果都不如意,没有出来。今天早上有折腾了一段时间,历经千辛万苦,终于生成了.bin文件了。下面分享一下,希望能帮到各位小伙伴。由于语言和能力不足,如果有错,还劳烦大佬斧正。    生产.bin文件方法有两种,一种是打开安装路径中的中的fromelf.exe,另一种是如我下图所示…

    2022年10月20日
    4
  • Sublime Text3 的 Markdown 实时预览全面总结

    Sublime Text3 的 Markdown 实时预览全面总结如前文《SublimeText3的插件管理工具(PackageControl)的安装及使用方法》所说,Sublime有强大的插件扩展功能,本文介绍如何在用Sublime写Markdown文档时,做到效果预览。1.插件介绍先介绍两个有关Markdown的常用插件:MarkdownEditing和MarkdownPreviewMarkdownEditing顾名思义,Ma…

    2022年7月27日
    2

发表回复

您的邮箱地址不会被公开。 必填项已用 * 标注

关注全栈程序员社区公众号