微信小程序中使用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”,了解相关信息可以关注。

相关文章
|
7天前
|
API 数据安全/隐私保护
Haskell中的HTTP请求:代理与响应状态检查
Haskell中的HTTP请求:代理与响应状态检查
|
1月前
|
缓存 应用服务中间件 Apache
HTTP 范围Range请求
HTTP范围请求是一种强大的技术,允许客户端请求资源的部分内容,提高了传输效率和用户体验。通过正确配置服务器和实现范围请求,可以在视频流、断点续传下载等场景中发挥重要作用。希望本文提供的详细介绍和示例代码能帮助您更好地理解和应用这一技术。
92 19
|
2月前
|
JSON 数据格式
.net HTTP请求类封装
`HttpRequestHelper` 是一个用于简化 HTTP 请求的辅助类,支持发送 GET 和 POST 请求。它使用 `HttpClient` 发起请求,并通过 `Newtonsoft.Json` 处理 JSON 数据。示例展示了如何使用该类发送请求并处理响应。注意事项包括:简单的错误处理、需安装 `Newtonsoft.Json` 依赖,以及建议重用 `HttpClient` 实例以优化性能。
89 2
|
2月前
|
JSON JavaScript 前端开发
什么是HTTP POST请求?初学者指南与示范
HTTP POST请求是一种常用的HTTP方法,主要用于向服务器发送数据。通过合理设置请求头和请求主体,可以实现数据的可靠传输。无论是在客户端使用JavaScript,还是在服务器端使用Node.js,理解和掌握POST请求的工作原理和应用场景,对于Web开发至关重要。
369 18
|
2月前
|
Web App开发 大数据 应用服务中间件
什么是 HTTP Range请求(范围请求)
HTTP Range 请求是一种非常有用的 HTTP 功能,允许客户端请求资源的特定部分,从而提高传输效率和用户体验。通过合理使用 Range 请求,可以实现断点续传、视频流播放和按需加载等功能。了解并掌握 HTTP Range 请求的工作原理和应用场景,对开发高效的网络应用至关重要。
223 15
|
2月前
|
Web App开发 网络安全 数据安全/隐私保护
Lua中实现HTTP请求的User-Agent自定义
Lua中实现HTTP请求的User-Agent自定义
|
2月前
|
JSON Java 数据格式
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
107 25
java操作http请求针对不同提交方式(application/json和application/x-www-form-urlencoded)
监控微信小程序中的慢HTTP请求
请求时间太长,影响用户体验,使用 Fundebug 监控慢请求。
1421 0
Fundebug 微信小程序BUG 监控插件更新至 1.3.1,新增 httpTimeout 配置选项,支持监控 HTTP 慢请求
摘要: 1.3.1新增 httpTimeout 配置选项,支持监控 HTTP 慢请求,同时修复了记录的 HTTP 响应时间偏小的 BUG。 Fundebug是专业微信小程序 BUG 监控服务,可以第一时间捕获线上环境中小程序的异常、错误或者 BUG,及时给开发者推送报警,帮助您快速修复 BUG。
1132 0
微信小程序之HTTPS请求
1.wx.request wx.request发起的是 HTTPS 请求,以下是它的基本用法,这里不再啰嗦 https://mp.weixin.qq.com/debug/wxadoc/dev/api/network-request.
1049 0