在小程序/mpvue中使用flyio发起网络请求的方法


Posted in Javascript onSeptember 13, 2018

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

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语言开发,flyio官方在第一时间支持了快应用。具体使用参照下面文档。

标准的API

Fly在上层提供了一套标准的API,这样,您就可以在各个JavaScript环境中,以相同的方式发起网络请求,不同平台对应一个平台相关的adapter,将平台差异在底层屏蔽,使用时不同平台只需要引入flyio npm包中相应平台的入口文件即可,也正是因为如此,fly在各个平台下都可以保证轻量(没有冗余代码)。

同时,为了方便axios使用者迁移,fly.js API设计风格和axios相似(但不完全相同)!

Fly.js 通过在不同 JavaScript 运行时通过在底层切换不同的 Http Engine来实现多环境支持,但同时对用户层提供统一、标准的Promise API。不仅如此,Fly.js还支持请求/响应拦截器、自动转化JSON、请求转发等功能,详情请参考:

github.com/wendux/fly

已支持的平台

目前Fly.js支持的平台包括:Node.js 、微信小程序 、Weex、React Native 、Quick App 和浏览器,这些平台的 JavaScript 运行时都是不同的。更多的平台正在持续添加中,请保持关注。

微信小程序

微信小程序采用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.js 或wx.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

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
jQuery 入门讲解1
Apr 15 Javascript
JS和jquery获取各种屏幕的宽度和高度的代码
Aug 02 Javascript
jquery ajax post提交数据乱码
Nov 05 Javascript
JavaScript Serializer序列化时间处理示例
Jul 31 Javascript
JS制作简单的三级联动
Mar 18 Javascript
JavaScript动态加载样式表的方法
Mar 21 Javascript
JS中闭包的经典用法小结(2则示例)
Dec 28 Javascript
Jquery中attr与prop的区别详解
May 27 jQuery
vue.js实现刷新当前页面的方法教程
Jul 05 Javascript
微信小程序自定义导航栏
Dec 31 Javascript
jQuery操作cookie的示例代码
Jun 05 jQuery
Vue(定时器)解决mounted不能获取到data中的数据问题
Jul 30 Javascript
解决angular2在双向数据绑定时[(ngModel)]无法使用的问题
Sep 13 #Javascript
mpvue中使用flyjs全局拦截的实现代码
Sep 13 #Javascript
AngularJS修改model值时,显示内容不变的实例
Sep 13 #Javascript
在vue中使用vue-echarts-v3的实例代码
Sep 13 #Javascript
vue的全局变量和全局拦截请求器的示例代码
Sep 13 #Javascript
ios设备中angularjs无法改变页面title的解决方法
Sep 13 #Javascript
vue interceptor 使用教程实例详解
Sep 13 #Javascript
You might like
PHP 存取 MySQL 数据库的一个例子
2006/10/09 PHP
Laravel 5.4向IoC容器中添加自定义类的方法示例
2017/08/15 PHP
Jquery插件 easyUI属性汇总
2011/01/19 Javascript
js出生日期 年月日级联菜单示例代码
2014/01/10 Javascript
angular简介和其特点介绍
2015/01/29 Javascript
JQuery的ON()方法支持的所有事件罗列
2015/02/28 Javascript
JS+CSS实现的经典tab选项卡效果代码
2015/09/16 Javascript
javascript实现的登陆遮罩效果汇总
2015/11/09 Javascript
JQuery点击行tr实现checkBox选中的简单实例
2016/05/26 Javascript
利用js编写网页进度条效果
2017/10/08 Javascript
原生JS实现ajax与ajax的跨域请求实例
2017/12/01 Javascript
利用jQuery+localStorage实现一个简易的计时器示例代码
2017/12/25 jQuery
NodeJS实现一个聊天室功能
2019/11/25 NodeJs
element-ui 实现响应式导航栏的示例代码
2020/05/08 Javascript
深入了解JS之作用域和闭包
2020/06/16 Javascript
JS中的变量作用域(console版)
2020/07/18 Javascript
详解webpack的clean-webpack-plugin插件报错
2020/10/16 Javascript
[01:34]2014DOTA2展望TI 剑指西雅图VG战队专访
2014/06/30 DOTA
python实现Adapter模式实例代码
2018/02/09 Python
Python切片工具pillow用法示例
2018/03/30 Python
Python交互环境下实现输入代码
2018/06/22 Python
python实例化对象的具体方法
2020/06/17 Python
分享一个页面平滑滚动小技巧(推荐)
2019/10/23 HTML / CSS
中国排名第一的外贸销售网站:LightInTheBox.com(兰亭集势)
2016/10/28 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
人力资源部副职的竞聘演讲稿
2014/01/07 职场文书
幼儿园毕业家长感言
2014/02/10 职场文书
夫妻婚内购房协议书
2014/10/05 职场文书
奖学金感谢信
2015/01/21 职场文书
从严治党主题教育活动总结
2015/05/07 职场文书
2015年学校安全管理工作总结
2015/05/11 职场文书
《黄山奇石》教学反思
2016/02/18 职场文书
python 机器学习的标准化、归一化、正则化、离散化和白化
2021/04/16 Python
HTML+css盒子模型案例(圆,半圆等)“border-radius” 简单易上手
2021/05/10 HTML / CSS
linux下导入、导出mysql数据库命令的实现方法
2021/05/26 MySQL
Python+Appium自动化测试的实战
2021/06/30 Python