微信小程序 封装请求
在写小程序的时候,每个JS文件都一大堆的请求,看得自己都眼花缭乱,下面看一下怎么对请求方法进行封装。
1,方法封装,在util文件夹下新建文件,创建request.js文件,工具文件,用于对方法封装)
request.js
- var app = getApp();
- //项目URL相同部分,减轻代码量,同时方便项目迁移
- //调用url配置文件 文件config.js是对项目的所有url进行封装 便于管理
- const CONFIG = require('../..//utils/config.js');
- /** * POST请求, * URL:接口 * postData:参数,json类型 * doSuccess:成功的回调函数 * doFail:失败的回调函数 */
- function request(url, postData, doSuccess, doFail) {
- wx.request({ //项目的真正接口,通过字符串拼接方式实现
- url: CONFIG.API_UEL.url,//后面的url并非真实接口 真正的接口要看你前端请求后端 后端提供的接口
- header: {
- "content-type": "application/json;charset=UTF-8"
- },
- data: postData,
- method: 'POST',
- success: function(res) { //参数值为res.data,直接将返回的数据传入
- doSuccess(res.data);
- },
- fail: function() {
- doFail();
- },
- })
- }
- //GET请求,不需传参,直接URL调用,
- function getData(url, doSuccess, doFail) {
- wx.request({
- url: CONFIG.API_UEL.url,//后面的url并非真实接口 真正的接口要看你前端请求后端 后端提供的接口
- header: {
- "content-type": "application/json;charset=UTF-8"
- },
- method: 'GET',
- success: function(res) {
- doSuccess(res.data);
- },
- fail: function() {
- doFail();
- },
- })
- } /** * module.exports用来导出代码 * js文件中通过var call = require("../util/request.js") 加载 * 在引入引入文件的时候" "里面的内容通过../../../这种类型,小程序的编译器会自动提示,因为你可能 * 项目目录不止一级,不同的js文件对应的工具类的位置不一样 */
- //对于抛出的方法较多的时候 我们可以以对象的形式抛出
- module.exports = {
- request:request,
- getData:getData
- }
上面提到了url配置文件config.js,看看是怎么封装的吧。
- const BASE = 'http://xxxx.com';//服务器域名
- const CONFIG = {
- API_URL: {
- URL: BASE, //根路径
- //所有轮播图
- index: BASE + '/index', //首页的轮播图
- // rotation: BASE +'/rotation',//总轮播图请求
- //主页请求类型
- screen: BASE + '/screen',
- // 个人登录s
- checklogin: BASE + '/checklogin',
- getphone: BASE + '/getphone', //获取手机号
- // 子分类接口
- submenu: BASE + '/submenu',
- //合作接口
- cooperation: BASE + '/cooperation',
- //教师选择类型
- teachertype: BASE + '/teachertype',
- edit_teacher: BASE + '/edit_teacher', //教师入驻更改
- personal: BASE + '/personal',//个人中心请求
- }
- }
- module.exports = CONFIG;
2.page里面的页面要请求的话,在JS代码中
- //引入代码
- var call = require("../util/request.js");
- Page({
- data: {
- pictureList: [],
- },
- onLoad: function() {
- var that = this; //调用封装的方法,为了方便我直接在页面加载的时候执行这个方法
- call.getData('lunbo.do', this.shuffleSuc, this.fail); //this可以换成前面定义的that
- //this.shuffleSuc调用成功的参数
- this.loadMsgData(that);
- },
- shuffleSuc: function(data) {
- var that = this;
- that.setData({
- pictureList: data.rows
- })
- //我后面测试了一下,直接this.setData也可以,但是因为我在没有使用封装方法的时候
- //this.setData报过错,不能直接用this,所以我在赋值的时候一般都会加上var that = this;
- //这句话算是一个不是习惯的习惯
- },
- fail: function() {
- console.log("失败")
- },
- })
调用this.shuffleSuc方法 其实就是执行传入getData的参数doSuccess 返回数据,这样就可以减少代码冗余,
微信小程序 封装请求的更多相关文章
- 微信小程序-封装请求(GET、POST)
使用:先导入到util.js 最后在页面上导入util.js(路径自改) var util = require('../../util.js'); 使用示例GET:util.SEND(url,'GET ...
- 微信小程序封装请求接口
var rootDocment = 'https://123.com';//你的域名 function postData(url, data, cb) { wx.request({ url: root ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- 微信小程序 网络请求之re.request 和那些坑
微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- 微信小程序 -- 数据请求
微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> ...
- 微信小程序封装storage(含错误处理)
这次给你们安利的是微信小程序封装storage,先说下微信官方的 wx.getStorage({ key:"", success: function (res) { }, fail ...
- 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据
1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...
- 让微信小程序每次请求的时候不改变session_id的方法
让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...
随机推荐
- 【leetcode】 算法题3 无重复字符的最长子串
问题 给定一个字符串,找出不含有重复字符的最长子串的长度. 示例: 给定 "abcabcbb" ,没有重复字符的最长子串是 "abc" ,那么长度 ...
- 转---深入浅出妙用 Javascript 中 apply、call、bind
作者:伯乐在线专栏作者 - chokcoco 如有好文章投稿,请点击 → 这里了解详情 如需转载,发送「转载」二字查看说明 这篇文章实在是很难下笔,因为网上相关文章不胜枚举. 巧合的是前些天看到阮老师 ...
- Nginx的安装与部署
1:安装工具包 wget.vim和gcc yum install -y wget yum install -y vim-enhanced yum install -y make cmake gcc g ...
- 13-部署traefik-ingress插件
Kubernetes traefik ingress安装 Ingress简介 如果你还不了解,ingress是什么,可以先看下我翻译的Kubernetes官网上ingress的介绍Kubernetes ...
- Koa 框架教程
Koa 框架教程 作者: 阮一峰 日期: 2017年8月 9日 Node 主要用在开发 Web 应用.这决定了使用 Node,往往离不开 Web 应用框架. Koa 就是一种简单好用的 Web 框 ...
- IDA远程调试 在内存中dump Dex文件
1. 首先使用调试JNI_OnLoad函数的方法,先将apk以调试状态挂起,使用IDA附加上去. 2. 然后在libdvm.so中的dvmDexFileOpenPartial函数上下一个断点 3. 然 ...
- Apache Commons Digester 三(规则注解)
前言 Digester规则的定义除了可以在代码中直接new规则添加到 Digester对象外,还可以用xml配置规则,如下所示: <digester-rules> <pattern ...
- 和我一起打造个简单搜索之SpringDataElasticSearch关键词高亮
前面几篇文章详细讲解了 ElasticSearch 的搭建以及使用 SpringDataElasticSearch 来完成搜索查询,但是搜索一般都会有搜索关键字高亮的功能,今天我们把它给加上. 系列文 ...
- Java并发编程笔记之StampedLock锁源码探究
StampedLock是JUC并发包里面JDK1.8版本新增的一个锁,该锁提供了三种模式的读写控制,当调用获取锁的系列函数的时候,会返回一个long 型的变量,该变量被称为戳记(stamp),这个戳记 ...
- 【详解】WebSocket相关知识整理
前言 记得大概半年前就产生了疑惑,即后台如何主动向前端推送数据.问了下专业老师,知道了原来有一个叫WebSocket的技术可以用于推送数据.于是,当时我就找了个教程,用的是Spring WebSock ...