微信小程序 封装请求
在写小程序的时候,每个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头 所以只需要在启动程序后第一次请求服务器获得 ...
随机推荐
- 记一次安装VS2015后启动失败的修复过程
安装过程没有提示任何问题,然而启动vs时提示没有安装 .Net Framework 4.6,那就安装吧,但是安装 4.6 时却提示 Windows Moudle Installer 服务没有启动,于是 ...
- Dev修改gridview 背景色
private void gridView1_RowCellStyle(object sender, DevExpress.XtraGrid.Views.Grid.RowCellStyleEventA ...
- 接之前的文章,VS2017中使用Spring.NET配置以及使用方法(framework4.6.1超详细)
众所周知,Spring在java中是很常见的框架,Spring.Net虽然体积比较大,但是功能相对齐全,本文介绍在VS2017 .Net FrameWork 4.6.1环境下,如何快速使用Spring ...
- Codeforces Round #553 (Div. 2) C. Problem for Nazar 数学
题意:从奇数列 1 3 5 7 9 .... 偶数列2 4 6 8 10...分别轮流取 1 2 4 ....2^n 个数构成新数列 求新数列的区间和 (就一次询问) 思路:首先单次区间和就是一个简 ...
- Turtle库学习笔记
一.Turtle库是Python语言中一个很流行的绘制图像的函数库,想象一个小乌龟,在一个横轴为x.纵轴为y的坐标系原点,(0,0)位置开始,它根据一组函数指令的控制,在这个平面坐标系中移动,从而在它 ...
- what does GIT PUSH do exactly?
有效理解 git 的对象模型 https://stackoverflow.com/questions/26005031/what-does-git-push-do-exactly 所谓分支, 就是一个 ...
- WebMvcConfigurer
[传送门]:详解WebMvcConfigurer接口 1. 设置跨域规则 @Configuration public class CrossOriginConfig implements WebMvc ...
- U-boot的编译方式及目录结构解析
U-boot的整体结构和linux基本类似,编译方式一般也是非常类似的,一般的编译命令: make CROSS_COMPILE=arm-linux-gnueabihf- XXX(目标名) 清除命令: ...
- Mac-让 Finder 显示隐藏文件和文件夹
打开「终端」,输入以下内容,然后「Return」键,这样就把隐藏的文件和文件夹显示了: defaults write com.apple.finder AppleShowAllFiles -boole ...
- setInterval()、clearInterval()、setTimeout()和clearTimeout() js计数器方法(还有第三个参数)
用法是会用,但是之前一直以为接函数的 var a = setInterval(function(){},1000) 比如a是函数名,最近才发现它是一个ID, var intervalID = wind ...