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

微信小程序

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

引入fly

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

Npm安装：npm install flyio --save.

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

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

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

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

使用

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

1. //添加拦截器
2. fly.interceptors.request.use((config,promise)=>{
3. //给所有请求添加自定义header
4. config.headers["X-Tag"]="flyio";
5. return config;
6. })
7. //配置请求基地址
8. fly.config.baseURL='https://www.dtworkroom.com/doris/1/2.0.0/'
9. ...
10.  
11. Page({
12. //事件处理函数
13. bindViewTap: function() {
14. //发起get请求
15. fly.get("/test",{xx:6}).then((d)=>{
16. //输出请求数据
17. console.log(d.data)
18. //输出响应头
19. console.log(d.header)
20. }).catch(err=>{
21. console.log(err.status,err.message)
22. })
23. ...
24. })
25. })

在mpvue中使用

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

1. var Fly=require("flyio/dist/npm/wx")
2. var fly=new Fly
3. ... //添加全局配置、拦截器等
4. Vue.prototype.$http=fly //将fly实例挂在vue原型上
5. 在组件中您可以方便的使用：
6.  
7. this.$http.get("/test",{xx:6}).then((d)=>{
8. //输出请求数据
9. console.log(d.data)
10. //输出响应头
11. console.log(d.header)
12. }).catch(err=>{
13. console.log(err.status,err.message)
14. })