微信小程序中使用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 监控 API
掌握使用 requests 库发送各种 HTTP 请求和处理 API 响应
本课程全面讲解了使用 Python 的 requests 库进行 API 请求与响应处理,内容涵盖环境搭建、GET 与 POST 请求、参数传递、错误处理、请求头设置及实战项目开发。通过实例教学,学员可掌握基础到高级技巧,并完成天气查询应用等实际项目,适合初学者快速上手网络编程与 API 调用。
544 130
|
5月前
HTTP协议中请求方式GET 与 POST 什么区别 ?
GET和POST的主要区别在于参数传递方式、安全性和应用场景。GET通过URL传递参数,长度受限且安全性较低,适合获取数据;而POST通过请求体传递参数,安全性更高,适合提交数据。
608 2
|
6月前
|
Go 定位技术
Golang中设置HTTP请求代理的策略
在实际应用中,可能还需要处理代理服务器的连接稳定性、响应时间、以及错误处理等。因此,建议在使用代理时增加适当的错误重试机制,以确保网络请求的健壮性。此外,由于网络编程涉及的细节较多,彻底测试以确认代理配置符合预期的行为也是十分重要的。
292 8
|
5月前
|
JSON JavaScript API
Python模拟HTTP请求实现APP自动签到
Python模拟HTTP请求实现APP自动签到
|
5月前
|
数据采集 JSON Go
Go语言实战案例:实现HTTP客户端请求并解析响应
本文是 Go 网络与并发实战系列的第 2 篇,详细介绍如何使用 Go 构建 HTTP 客户端,涵盖请求发送、响应解析、错误处理、Header 与 Body 提取等流程,并通过实战代码演示如何并发请求多个 URL,适合希望掌握 Go 网络编程基础的开发者。
|
6月前
|
缓存 JavaScript 前端开发
Vue 3 HTTP请求封装导致响应结果无法在浏览器中获取,尽管实际请求已成功。
通过逐项检查和调试,最终可以定位问题所在,修复后便能正常在浏览器中获取响应结果。
295 0
|
6月前
|
Go
如何在Go语言的HTTP请求中设置使用代理服务器
当使用特定的代理时,在某些情况下可能需要认证信息,认证信息可以在代理URL中提供,格式通常是:
489 0
|
移动开发 小程序
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
thinkphp+uniapp开发的多端商城系统源码/H5/小程序/APP支持DIY模板直播分销
571 0
|
小程序 前端开发 JavaScript
在线课堂+工具组件小程序uniapp移动端源码
在线课堂+工具组件小程序uniapp移动端源码
309 0
在线课堂+工具组件小程序uniapp移动端源码
|
移动开发 小程序 数据可视化
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
基于npm CLI脚手架的uniapp项目创建、运行与打包全攻略(微信小程序、H5、APP全覆盖)
3238 3

热门文章

最新文章