小程序Request的另类用法详解


Posted in Javascript onAugust 09, 2019

前言

小程序中唯一能发送网络请求接口数据的是wx.request接口,当然这个接口存在诸多的限制,例如:10个并发请求限制,https限制(当然在开发阶段是可以关闭此限制),除了wx.request还有其他方法可以实现类型的功能吗?当然是有的,这个思路也源于我之前看到的一篇文章,随便笔记下来

思路

使用云开发来发送网络请求并把数据返回给小程序端。还不了解的云开发的同学请速度移步到官方【云开发】
新建一个http的云函数

// 云函数入口文件
const cloud = require('wx-server-sdk')
const axios = require('axios')
cloud.init()
// 云函数入口函数
exports.main = async (event, context) => {
 const wxContext = cloud.getWXContext()
 const { method, url, data } = event;
 const res = await axios.request({
  method: method,
  url: url,
  data: data
 });
 return { code: 1, data: res.data } || {code: -1, msg: 'error', data: null}
}

小程序端二次封装云函数调用

async http(options = {}) {
  return wx.cloud.callFunction({
    name: 'http',
    data: {
      method: options.method || 'GET',
      url: options.url || '',
      data: options.data || {}
    }
  }).then(res => {
    return res.result
  })
},

小程序端使用

async onLoad() {
  this.http({
   method: 'GET',
   url: 'https://www.baidu.com'
  }).then(res => {
   console.log(res)
  })
 },

总结

这种方法可以很好绕过https的限制,当然这只是提供一个简单的思路,我们可以进一步细一点封装,包括配置header proxy 等等功能,其实原理就是借助云函数做了二次转发,性能上肯定比不上原生的request

注意

async 和 await 语法糖在最新的开发工具中已经实现了,开启增强编译即可使用,具体更新内容请移步官方社区 微信小程序社区

以上就是本文的全部内容,希望对大家的学习有所帮助,也希望大家多多支持三水点靠木。

Javascript 相关文章推荐
Mootools 1.2教程 函数
Sep 15 Javascript
jquery全选/全不选/反选另一种实现方法(配合原生js)
Apr 07 Javascript
解析JavaScript中点号“.”的多义性
Dec 02 Javascript
纯Javascript实现ping功能的方法
Mar 20 Javascript
javascript获取文档坐标和视口坐标
May 26 Javascript
AngularJS入门教程之数据绑定用法示例
Nov 01 Javascript
Bootstrap Img 图片样式(推荐)
Dec 13 Javascript
非常优秀的JS图片轮播插件Swiper的用法
Jan 03 Javascript
Vue组件之极简的地址选择器的实现
May 31 Javascript
Angular使用cli生成自定义文件、组件的方法
Sep 04 Javascript
微信小程序开发之点击按钮退出小程序的实现方法
Apr 26 Javascript
JS中的函数与对象的创建方式
May 12 Javascript
一篇文章弄懂javascript中的执行栈与执行上下文
Aug 09 #Javascript
vue中组件通信的八种方式(值得收藏!)
Aug 09 #Javascript
Vue全局loading及错误提示的思路与实现
Aug 09 #Javascript
使用Vue CLI创建typescript项目的方法
Aug 09 #Javascript
详解vue beforeRouteEnter 异步获取数据给实例问题
Aug 09 #Javascript
微信小程序如何连接Java后台
Aug 08 #Javascript
vue 实现Web端的定位功能 获取经纬度
Aug 08 #Javascript
You might like
生成静态页面的php函数,php爱好者站推荐
2007/03/19 PHP
php定义数组和使用示例(php数组的定义方法)
2014/03/29 PHP
PHP常用技术文之文件操作和目录操作总结
2014/09/27 PHP
整理php防注入和XSS攻击通用过滤
2015/09/13 PHP
根据分辩率调用不同的CSS.
2007/01/08 Javascript
JS实现遮罩层效果的简单实例
2013/11/12 Javascript
jquery实现背景墙聚光灯效果示例分享
2014/03/02 Javascript
avascript中的自执行匿名函数应用示例
2014/09/15 Javascript
Angular中的Promise对象($q介绍)
2015/03/03 Javascript
Javascript编程之继承实例汇总
2015/11/28 Javascript
javascript实现瀑布流加载图片原理
2016/02/02 Javascript
在js代码拼接dom对象到页面上去的模板总结(必看)
2017/02/14 Javascript
HTML5+Canvas调用手机拍照功能实现图片上传(上)
2017/04/21 Javascript
vue实现动态数据绑定
2017/04/28 Javascript
Javascript继承机制详解
2017/05/30 Javascript
Bootstrap Table使用整理(五)之分页组合查询
2017/06/09 Javascript
关于Mac下安装nodejs、npm和cnpm的教程
2018/04/11 NodeJs
微信小程序使用map组件实现检索(定位位置)周边的POI功能示例
2019/01/23 Javascript
小程序实现短信登录倒计时
2019/07/12 Javascript
layui table 表格模板按钮的实例代码
2019/09/21 Javascript
vuex入门最详细整理
2020/03/04 Javascript
[50:28]2018DOTA2亚洲邀请赛 3.31 小组赛 A组 Newbee vs KG
2018/04/01 DOTA
详解django中自定义标签和过滤器
2017/07/03 Python
详解Python 序列化Serialize 和 反序列化Deserialize
2017/08/20 Python
pytorch使用Variable实现线性回归
2019/05/21 Python
Django网络框架之创建虚拟开发环境操作示例
2019/06/06 Python
浅析Python+OpenCV使用摄像头追踪人脸面部血液变化实现脉搏评估
2019/10/17 Python
意大利奢侈品购物网站:Giglio
2018/01/05 全球购物
What is view? why do we have view?
2012/06/22 面试题
化学实验员岗位职责
2013/12/28 职场文书
老师给学生的表扬信
2014/01/17 职场文书
12岁生日感言
2014/01/21 职场文书
初三学习决心书
2014/03/11 职场文书
高校教师岗位职责
2014/03/18 职场文书
大学新生军训方案
2014/05/03 职场文书
选对餐饮营销策略,营业额才会上涨
2019/08/27 职场文书