在前后端数据交互中,数据请求是一个很重要的环节,request请求也是出现在交互中的重点,进行请求方式的封装是为了减轻数据请求的体量,最大化进行代码的复用,也是面向对象编程的基础思想。

//这个是一个小程序的全局变量设置,其中的url地址是在app.js中的 globalData设置中取出。

var AppLestUrl = getApp().globalData.wxurl;

//简单的函数封装
/url:表示请求地址,
header:表示请求头数据组,
cd:表示请求返回函数
sc:表示请求返回的编码,(可根据后台返回编码的复杂程度来改变)
/
//GET请求方式
function getReq(url,header,cb,sc) {
//加载动画
wx.showLoading({
title: '加载中',
})
console.log(header);
wx.request({
url: AppLestUrl + url,
method: 'GET',
header: header,
//正确请求流程
success: function (res) {
wx.hideLoading();
console.log(res);
var JsonData = res.data;
var JsonCode = res.statusCode;
return typeof cb == "function" && cb(JsonData, JsonCode);
},
//异常请求流程
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错,请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})
}
//POST请求方式
/*data:表示的是上传数据体*/
function postReq(url, data, header,cb) {
wx.showLoading({
title: '提交中',
})
console.log(header),
wx.request({
url: AppLestUrl + url,
header: header,
data: data,
method: 'POST',
success: function (res) {
wx.hideLoading();
var JsonData = res.data;
console.log(JsonData);
var JsonCode = res.statusCode;
return typeof cb == "function" && cb(JsonData, JsonCode)
},
fail: function () {
wx.hideLoading();
wx.showModal({
title: '网络错误',
content: '网络出错,请刷新重试',
showCancel: false
})
return typeof cb == "function" && cb(false)
}
})

}
微信小程序里面request请求不像JavaScript里面的数据请求,在小程序里面必须要进行方法暴露,才可以在其他的js文件里面请求到先前封装的方法。

在公共文件里面暴露封装方法

module.exports = {
getReq: getReq,
postReq: postReq,
}
对于公共方法js的调用,里面的http.js就是你公共方法的js

var HttpRequest = require("../../http.js"); //HTTP请求request封装 调用

getReq: HttpRequest.getReq,//GET数据请求函数
postReq: HttpRequest.postReq,//POST数据请求

//GET请求
HttpRequest.getReq(infoUrl, headmode, function (res,code) {
console.log(res);
})
//POST请求
HttpRequest.postReq(url, JsonData, headers,function (res,code) {
console.log(res);
})

转载于:https://www.cnblogs.com/Victory-peng/articles/9355280.html

数据交互之封装request请求(微信小程序篇)相关推荐

  1. 微信小程序的网络请求 —— 微信小程序教程系列(14)

    网络请求,基本上是必须的环节之一. 小程序提供了wx.request(object),与开发者的服务器实现数据交互的一个很重要的api. 最简单的用法如下(以GET请求为例) <view bin ...

  2. 多平台多渠道账号体系绑定第一篇-微信小程序篇

    先奉上本篇实现效果 多平台多渠道账号体系绑定第一篇-微信小程序篇 近来,在对接三方平台时,欲将多方开放平台统一整合入笔者的框架内. 如下为大致思路设计图 由于需对接多方平台关联账号体系,思来之后,将设 ...

  3. 微信小程序篇】四. 案例:根据单号查询快递编号

    快递查询(2020-1-7亲测) 项目准备 创建项目demo4-expressQuery(因为练习取过这个名所以案例里面是demo-expressQuery ) 操作步骤同demo3 不过second ...

  4. 从0开发《工程测绘大师》小程序之什么是微信小程序篇(一)

    我们今天来讲讲如何从0开发<工程测绘大师>小程序之什么是微信小程序篇.先来说说什么是微信小程序,什么是微信小程序?为什么会有微信小程序诞生?它到底解决了什么痛点?与传统的网页开发和APP相 ...

  5. 第 7 节:前端面试指南 — 微信小程序篇(附面试题答案)

    这周很多读者朋友都在「微信小程序」的视频了. 前 6 期没看的同学,建议先看完再来看这一期的,传送门: 第 1 期:「简历篇」含简历模板文件 第 2 期:「HTML篇」含面试题&答案 第 3 ...

  6. 微信小程序篇_01 微信小程序与Java后端接口交互

    微信小程序与Java后端接口交互 准备 创建后端项目 创建小程序项目 本文主要介绍小程序前后端数据的交互,实践演示. 准备 创建后端项目 我这里就创建一个SpringBoot项目作为演示. 在创建项目 ...

  7. 微信小程序数据拼接_最佳方式实现微信小程序分页加载数据

    一般小程序做分页加载数据,会做一些下拉加载更多.然后上拉刷新的操作.数据放在一个for循环里去加载,数据源是一个数组对象.在加载下一页数据时,将下一页的数据拼到当前数组后面.这样的确可以实现分页加载数 ...

  8. python写的小程序怎么封装_Promise实现微信小程序接口封装过程

    Promise实现微信小程序接口封装过程 发布时间:2020-06-15 13:40:43 来源:亿速云 阅读:419 作者:鸽子 相信很多开发者都遇到过回调地狱的问题.由于微信小程序的API基本都是 ...

  9. pos请求 微信小程序_微信小程序蓝牙连接小票打印机实例代码详解

    1.连接蓝牙 (第一次发表博客) 第一步打开蓝牙并搜索附近打印机设备// startSearch: function() { var that = this wx.openBluetoothAdapt ...

  10. 微信小程序篇(微信小程序的支付)

    微信小程序的支付和微信公众号的支付是类似的,对比起来还比公众号支付简单了一些,我们只需要调用微信的统一下单接口获取prepay_id之后我们在调用微信的支付即可. 今天我们来封装一般node的支付接口 ...

最新文章

  1. 基于C++的图像散度计算
  2. 《你的灯亮着吗》读书笔记3
  3. Navicat Premium
  4. html audio播放本地语音文件,HTML5+ - audio音频播放及网络音频文件播放
  5. 竞赛准备篇---(一)抽签问题
  6. Windbg在Managed App中设置函数断点的几种方法
  7. RabbitMQ和Kafka的显著差异(6)
  8. poj_3468 线段树
  9. word封面背景及水印背景
  10. 数学基础之列联表分析2——独立性检验(卡方检验)
  11. [python][turtle]闪瞎眼的晶体管报时
  12. 【工业互联网】郭朝晖:工业互联网平台背景下的工业大数据与智能制造
  13. 解决Chrome浏览器百度网页打开很慢的问题
  14. 8 精通matlab入门求微分方程组的通解特解数值解看这篇文章就够了
  15. zynq linux环境移植,ZYNQ 7030 Linux 系统移植
  16. virtualenv virtualenvwrapper
  17. (python)约瑟夫(Josephus)个人围成一圈,并按顺时针依次编号1-n。从编号为1的人开始,按顺时针方向每隔一 人选出一个,剩下的人重新围成一圈,如此循环直到剩下两人,这剩下的两人就是幸运儿
  18. 告别windows、拥抱linux,ThinkPad E485安装XUbuntu实录
  19. 《深入理解Android 卷Ⅰ》深入理解init
  20. 在python IDLE中打开python Shell,就可以直接用import导入当前模块了

热门文章

  1. Leetcode 刷题笔记(二) —— 数组类型解题方法二:双指针法
  2. Ubuntu18.04安装wireshark3.0.6(版本可自己选)
  3. 读取P12格式证书的密钥
  4. 修改 win10 的 CMD 控制台字体
  5. [POJ 3984] 迷宫问题(BFS最短路径的记录和打印问题)
  6. 解决struts2标签在HTML中错位的问题
  7. mysql之高性能索引
  8. ES6学习摘要(03)(新人学习)
  9. gulp错误GulpUglifyError: unable to minify JavaScript解决
  10. JavaScript中JSON的处理心得