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

fly.js 一个基于promise的、强大的、支持多种javascript运行时的http请求库. 有了它，您可以使用一份http请求代码在浏览器、微信小程序、weex、node、react native、快应用中都能正常运行。同时可以方便配合主流前端框架 ，最大可能的实现 write once run everywhere。

flyio github:

问题

随着 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、请求转发等功能，详情请参考： 。下面我们看看在微信小程序、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、请求转发等功能，详情请参考：

已支持的平台

目前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来管理依赖，您可以直接下载源码到您的小程序工程，下载链接或下载任意一个，保存到本地工程目录，假设在“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:

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