微信小程序中使用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)任意一个, 然后将其拷贝到您的工程目录下。

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

使用


 
 
  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. 作者:lazydu 
  11. 链接:http://www.jianshu.com/p/2d0a1ad94ed5 
  12. 來源:简书 
  13. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 

可以看出,关键代码就在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. 作者:lazydu 
  29. 链接:http://www.jianshu.com/p/2d0a1ad94ed5 
  30. 來源:简书 
  31. 著作权归作者所有。商业转载请联系作者获得授权,非商业转载请注明出处。 

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


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

本文作者:lazydu

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

相关文章
|
8天前
|
缓存 前端开发 API
|
2天前
|
前端开发 JavaScript Java
如何捕获和处理HTTP GET请求的异常
如何捕获和处理HTTP GET请求的异常
|
4天前
|
开发者
HTTP 协议请求方法的发展历程
【10月更文挑战第21天】
|
4天前
|
安全
HTTP 协议的请求方法
【10月更文挑战第21天】
|
4天前
|
缓存 安全 前端开发
HTTP 协议的请求方法在实际应用中有哪些注意事项?
【10月更文挑战第29天】HTTP协议的请求方法在实际应用中需要根据具体的业务场景和需求,合理选择和使用,并注意各种方法的特点和限制,以确保网络通信的安全、高效和数据的一致性。
|
8天前
|
安全 API 数据安全/隐私保护
常见的HTTP请求方法
【10月更文挑战第25天】这些HTTP请求方法共同构成了客户端与服务器之间交互的基础,使得客户端能够根据不同的需求对服务器资源进行各种操作。在实际应用中,开发者需要根据具体的业务场景和资源的性质选择合适的请求方法来实现客户端与服务器之间的有效通信。
|
13天前
|
存储 安全 网络协议
HTTP 请求方法
【10月更文挑战第22天】HTTP 请求方法
26 2
|
22天前
|
JSON 小程序 JavaScript
uni-app开发微信小程序的报错[渲染层错误]排查及解决
uni-app开发微信小程序的报错[渲染层错误]排查及解决
341 7
|
22天前
|
小程序 JavaScript 前端开发
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
uni-app开发微信小程序:四大解决方案,轻松应对主包与vendor.js过大打包难题
418 1
|
1月前
|
小程序 前端开发 测试技术
微信小程序的开发完整流程是什么?
微信小程序的开发完整流程是什么?
97 7