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

相关文章
|
4月前
|
JSON 安全 网络协议
HTTP/HTTPS协议(请求响应模型、状态码)
本文简要介绍了HTTP与HTTPS协议的基础知识。HTTP是一种无状态的超文本传输协议,基于TCP/IP,常用80端口,通过请求-响应模型实现客户端与服务器间的通信;HTTPS为HTTP的安全版本,基于SSL/TLS加密技术,使用443端口,确保数据传输的安全性。文中还详细描述了HTTP请求方法(如GET、POST)、请求与响应头字段、状态码分类及意义,并对比了两者在请求-响应模型中的安全性差异。
376 20
|
10月前
|
安全 API 网络安全
使用OkHttp进行HTTPS请求的Kotlin实现
使用OkHttp进行HTTPS请求的Kotlin实现
|
12月前
|
小程序 开发者
微信小程序之网络数据请求 wx:request的简单使用
这篇文章介绍了微信小程序中如何使用wx.request进行网络数据请求,包括请求的配置、请求的格式以及如何在开发阶段关闭请求的合法检验。
微信小程序之网络数据请求 wx:request的简单使用
|
11月前
|
安全 网络安全 数据安全/隐私保护
HTTPS 请求中的证书验证详解(Python版)
HTTPS 请求中的证书验证详解(Python版)
686 0
|
12月前
|
小程序 PHP
微信小程序给 thinkphp后端发送请求出现错误 Wrong number of segments 问题的解决 【踩坑记录】
本文记录了微信小程序向ThinkPHP后端发送请求时出现"Wrong number of segments"错误的解决方法。问题原因是小程序请求header中的token变量名写错,导致token未正确传递至后端。作者提供了详细的检查步骤和建议,包括验证URL路径、参数规范和路由配置的匹配,以确保请求能正确发送和处理。
|
安全 Java 网络安全
RestTemplate进行https请求时适配信任证书
RestTemplate进行https请求时适配信任证书
513 3
|
JavaScript 前端开发 Java
【Azure 环境】各种语言版本或命令,发送HTTP/HTTPS的请求合集
【Azure 环境】各种语言版本或命令,发送HTTP/HTTPS的请求合集
|
Web App开发 存储 网络安全
Charles抓包神器的使用,完美解决抓取HTTPS请求unknown问题
本文介绍了在 Mac 上使用的 HTTP 和 HTTPS 抓包工具 Charles 的配置方法。首先,强调了安装证书对于抓取 HTTPS 请求的重要性,涉及 PC 和手机端。在 PC 端,需通过 Charles 软件安装证书,然后在钥匙串访问中设置为始终信任。对于 iOS 设备,需设置 HTTP 代理,通过电脑上的 IP 和端口访问特定网址下载并安装证书,同时在设置中信任该证书。配置 Charles 包括设置代理端口和启用 SSL 代理。完成这些步骤后,即可开始抓包。文章还提及 Android 7.0 以上版本可能存在不信任用户添加 CA 证书的问题,但未提供解决办法。
4187 0
Charles抓包神器的使用,完美解决抓取HTTPS请求unknown问题
|
网络协议 前端开发 Java
网络原理 - HTTP / HTTPS(4)——构造http请求
网络原理 - HTTP / HTTPS(4)——构造http请求
148 1
|
JSON 安全 Java
JAVA Socket 实现HTTP与HTTPS客户端发送POST与GET方式请求
JAVA Socket 实现HTTP与HTTPS客户端发送POST与GET方式请求
215 0

热门文章

最新文章