微信小程序 之 请求函数封装
2023-09-11 14:15:30 时间
封装的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) } })
.
相关文章
- 基于递归算法,树形结构数据下业务场景,封装解决方法
- 微信小程序-封装请求(GET、POST)
- 如何使用热风枪焊接特殊的QFN封装的芯片
- 微信小程序 - 函数防抖 / 函数节流(轮子封装)
- JS功能封装 - 小数四则运算精度丢失缺陷
- 封装ajax请求
- 【Python】+系列教程(1、封装)
- 微信小程序class封装http
- 微信小程序前端function封装
- java 方法作为参数封装在map
- macOS SwiftUI 封装之NSTableView实现多行多列表格plist转table(教程含源码)
- macOS SwiftUI 封装组件之日期选择器图形日历和钟表模式NSDataPicker (教程含源码)
- 微信小程序原生开发功能合集十一:定时器组件的封装
- 微信小程序原生开发功能合集三:列表选择扩展组件封装
- 微信小程序原生开发功能合集二:下拉选择组件封装
- 微信小程序request请求库封装
- uni-app 微信JSSDK分享封装
- C#Web异步操作封装
- 一个java的http请求的封装工具类
- iOS开发 - 写一个刷新的控件(未封装,适合新手学习,查看原理)
- Java小白入门200例79之Java类的封装
- .Net Core 简单定时任务框架封装