微信小程序中使用Fly 发起http请求

微信小程序的 javascript运行环境和浏览器不同，页面的脚本逻辑是在JsCore中运行，JsCore是一个没有窗口对象的环境，所以不能在脚本中使用window，也无法在脚本中操作组件，JsCore中也没有 XmlhttpRequest对象，所以jquery 、zepto、axios这些在小程序中都不能用，而此时，正是 fly 大显身手的时候。

您需要在 https://unpkg.com/flyio/dist/ 或 https://github.com/wendux/fly/tree/master/dist 下载wx.js(未压缩) 或 wx.umd.min.js(已压缩，12k)任意一个, 然后将其拷贝到您的工程目录下。

使用

1. var Fly=require("../lib/wx.js") //wx.js为您下载的源码文件 
2. var fly=new Fly();创建fly实例 
3. ... 
4. Page({ 
5.   //事件处理函数 
6.   bindViewTap: function() { 
7.     //调用 
8.     fly.get("http://10.10.180.81/doris/1/1.0.0/user/login",{xx:6}).then((d)=>{ 
9.       console.log(d.data) 
10.     }).catch(err=>{ 
11.       console.log(err.status,err.message) 
12.     }) 
13.   }) 
14. }) 
15.  
16.  
17. 作者：lazydu 
18. 链接：http://www.jianshu.com/p/2d0a1ad94ed5 
19. 來源：简书 
20. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 

如果您只是单纯的使用者，不用往下看了，到这里就可以了，先别急着关啊，来，star一下再走 https://github.com/wendux/fly 。 如果你对原理感兴趣，下面介绍一下背后的原理。

原理

Fly对小程序的支持实际上是通过自定义 http engine的方式，我们来看一下wx.js源码：

1. //微信小程序入口 
2. var  Fly=require("../dist/fly") 
3. var EngineWrapper = require("../dist/engine-wrapper") 
4. var adapter = require("../dist/adapter/wx") //微信小程序adapter 
5. var wxEngine = EngineWrapper(adapter) 
6. module.exports=function (engine) { 
7.     return new Fly(engine||wxEngine); 
8. } 
9.  
10.  
11. 作者：lazydu 
12. 链接：http://www.jianshu.com/p/2d0a1ad94ed5 
13. 來源：简书 
14. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 

可以看出，关键代码就在adapter/wx中，我们看看微信小程序的adapter代码：

1. //微信小程序适配器 
2. module.exports=function(request, responseCallback) { 
3.     var con = { 
4.         method: request.method, 
5.         url: request.url, 
6.         dataType: request.dataType||"text", 
7.         header: request.headers, 
8.         data: request.body||{}, 
9.         success(res) { 
10.             responseCallback({ 
11.                 statusCode: res.statusCode, 
12.                 responseText: res.data, 
13.                 headers: res.header, 
14.                 statusMessage: res.errMsg 
15.             }) 
16.         }, 
17.         fail(res) { 
18.             responseCallback({ 
19.                 statusCode: res.statusCode||0, 
20.                 statusMessage: res.errMsg 
21.             }) 
22.         } 
23.     } 
24.     //调用微信接口发出请求 
25.     wx.request(con) 
26. } 
27.  
28.  
29. 作者：lazydu 
30. 链接：http://www.jianshu.com/p/2d0a1ad94ed5 
31. 來源：简书 
32. 著作权归作者所有。商业转载请联系作者获得授权，非商业转载请注明出处。 

这就是所有的实现，很简单!通过这个例子，可以帮助您理解 “fly正是通过不同的adpter来支持不同的环境” 这句话，至于其它的环境，我们完全可以照猫画虎。 

原文发布时间为：2017-10-26

本文作者：lazydu

本文来自云栖社区合作伙伴“51CTO”，了解相关信息可以关注。