微信小程序 之 请求函数封装
封装的request的代码
/**
* @desc API请求接口类封装
*/
/**
* POST请求API
* @param {String} url 接口地址
* @param {Object} params 请求的参数
* @param {Object} sourceObj 来源对象
* @param {Function} successFun 接口调用成功返回的回调函数
* @param {Function} failFun 接口调用失败的回调函数
* @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
*/
function requestPostApi(url, params, sourceObj, successFun, failFun, completeFun) {
requestApi(url, params, 'POST', sourceObj, successFun, failFun, completeFun)
}
/**
* GET请求API
* @param {String} url 接口地址
* @param {Object} params 请求的参数
* @param {Object} sourceObj 来源对象
* @param {Function} successFun 接口调用成功返回的回调函数
* @param {Function} failFun 接口调用失败的回调函数
* @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
*/
function requestGetApi(url, params, sourceObj, successFun, failFun, completeFun) {
requestApi(url, params, 'GET', sourceObj, successFun, failFun, completeFun)
}
/**
* 请求API
* @param {String} url 接口地址
* @param {Object} params 请求的参数
* @param {String} method 请求类型
* @param {Object} sourceObj 来源对象
* @param {Function} successFun 接口调用成功返回的回调函数
* @param {Function} failFun 接口调用失败的回调函数
* @param {Function} completeFun 接口调用结束的回调函数(调用成功、失败都会执行)
*/
function requestApi(url, params, method, sourceObj, successFun, failFun, completeFun) {
if (method == 'POST') {
var contentType = 'application/x-www-form-urlencoded'
} else {
var contentType = 'application/json'
}
wx.request({
url: url,
method: method,
data: params,
header: {'Content-Type': contentType},
success: function (res) {
typeof successFun == 'function' && successFun(res.data, sourceObj)
},
fail: function (res) {
typeof failFun == 'function' && failFun(res.data, sourceObj)
},
complete: function (res) {
typeof completeFun == 'function' && completeFun(res.data, sourceObj)
}
})
}
module.exports = {
requestPostApi,
requestGetApi
}
使用第一步
在app.js中引入封装的文件const request = require(‘./utils/request.js’) ,然后定义接口域名apiUrl: ‘https://www.geekxz.com‘,
/**
* @desc 简单API请求示例
*/
const request = require('./utils/request.js')
App({
request: request,
getUserInfo:function(cb){
var that = this
if(this.globalData.userInfo){
typeof cb == "function" && cb(this.globalData.userInfo)
}else{
//调用登录接口
wx.login({
success: function () {
wx.getUserInfo({
success: function (res) {
that.globalData.userInfo = res.userInfo
typeof cb == "function" && cb(that.globalData.userInfo)
}
})
}
})
}
},
/**
* 定义的接口域名
*/
apiUrl: 'https://www.geekxz.com',
globalData:{
userInfo:null
}
})
调用封装好的方法
var app = getApp()
Page({
/**
* 存储页面数据
*/
data: {
expressData : {},
},
/**
* 接口调用成功处理
*/
successFun: function(res, selfObj) {
selfObj.setData({
expressData : res,
})
},
/**
* 接口调用失败处理
*/
failFun: function(res, selfObj) {
console.log('failFun', res)
},
/**
* 页面加载时初始化数据
*/
onLoad: function() {
var url = app.apiUrl+'/query'
var params = {
type : 'zhongtong',
postid : '424621263550',
}
//@todo 网络请求API数据
app.request.requestGetApi(url, params, this, this.successFun, this.failFun)
}
})
.
微信小程序 之 请求函数封装的更多相关文章
- 微信小程序request请求的封装
目录 1,前言 2,实现思路 3,实现过程 3.1,request的封装 3.2,api的封装 4,实际使用 1,前言 在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx. ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
- 微信小程序数据请求方法wx.request小测试
微信小程序数据请求方法 wx.request wxml文件: <view> <textarea value="{{textdata}}"/> </vi ...
- 微信小程序POST请求参数传递不到后台, 前台获取不到后端返回的数据, 以及 post 请求返回 404 但后台能收到数据
1 微信小程序POST请求参数传递不到后台 需要在微信请求 wx.request 改变默认 header 配置为如下 wx.request({ url: 'test.php', //仅为示例,并非真实 ...
- 微信小程序 网络请求之re.request 和那些坑
微信小程序有四种网络请求类型,下面只详细介绍普通HTTPS请求(wx.request) 普通HTTPS请求(wx.request) 上传文件(wx.uploadFile) 下载文件(wx.downlo ...
- 微信小程序 -- 数据请求
微信小程序 -- 数据请求 微信小程序请求数据,并不是一个可以在url打开有数据就可以拿到数据那么简单 浏览器地址输入 可以获取参数的url 微信小程序中 代码展示 wxml <view> ...
- 微信小程序跳转函数总结
微信小程序跳转函数总结 笔者在微信小程序前端的开发过程中,在不同的情况下遇到了需要使用不同的页面跳转逻辑的情况,以下是我对这些函数的使用场景的一个总结介绍. wx.navigateTo 这是最常用 ...
- 让微信小程序每次请求的时候不改变session_id的方法
让微信小程序每次请求的时候不改变session_id的方法 每次微信小程序请求的时候都会改变session id, 还好他的请求方法内可以设置header头 所以只需要在启动程序后第一次请求服务器获得 ...
- 微信小程序开发——使用promise封装异步请求
前言: 有在学vue的网友问如何封装网络请求,这里以正在写的小程序为例,做一个小程序的请求封装. 关于小程序发起 HTTPS 网络请求的Api,详情可以参考官方文档:wx.request(Object ...
随机推荐
- matlab 分析wav波形
[x,fs,bits]=wavread('d.wav', [1 5000]); % sound(x, fs, bits); N = length(x); n = 0 : N-1; t = n/fs; ...
- c中结构体的4种定义
1.常规的标准方式: 1 #include <stdio.h> 2 3 struct student{ 4 int age; 5 float score; 6 ...
- 戴文的Linux内核专题:02 源代码【转】
转自:https://linux.cn/article-2190-1.html?pr 在下载并解压内核源代码后,用户可以看到许多文件夹和文件.尝试去找一个特定的文件或许是一个挑战.谢天谢地,源代码以一 ...
- c/c++类型转换相关总结
在c语言中存在两种类型转换:显式类型转换和隐式类型转换: 显示类型转换:在类型前加上(type)变量,对变量进行的转换,程序员自己显式添加: char *ptra = (char*)ptrb; voi ...
- Java HotSpot(TM) 64-Bit Server VM warning: Insufficient space for shared memory file: /tmp/hsperfdata_hadoop/44512
早上登录hbase shell,出现异常: [hadoop@node002 ~]$ hbase shell Java HotSpot(TM) 64-Bit Server VM warning: Ins ...
- [BZOJ1069][SCOI2007]最大土地面积 凸包+旋转卡壳
1069: [SCOI2007]最大土地面积 Time Limit: 1 Sec Memory Limit: 128 MBSubmit: 3669 Solved: 1451[Submit][Sta ...
- AC日记——Little Elephant and Shifts codeforces 221e
E - Little Elephant and Shifts 思路: 一次函数线段树(疯狂debug): b不断循环左移,判断每次最小的|i-j|,a[i]=b[j]: 仔细观察发现,每个bi移动时, ...
- elasticsearch配置文件(elasticsearch.yml)详解
来自:http://www.searchtech.pro/articles/2013/02/18/1361194291548.html elasticsearch的config文件夹里面有两个配置文 ...
- Wannafly挑战赛22 A-计数器(gcd,裴蜀定理)
原题地址 题目描述 有一个计数器,计数器的初始值为0,每次操作你可以把计数器的值加上a1,a2,...,an中的任意一个整数,操作次数不限(可以为0次),问计数器的值对m取模后有几种可能. 输入描述: ...
- 【bzoj3687】【简单题】bitset
[pixiv] https://www.pixiv.net/member_illust.php?mode=medium&illust_id=64333782 这次的图是自己画的,方便的话点个赞 ...