微信小程序request请求的封装
1,前言
在开发微信小程序的过程中,避免不了和服务端请求数据,微信小程序给我们提供了wx.request
这个API,调用方法如下
wx.request({
url: 'www.baidu.com', //仅为示例,并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res.data)
}
});
作为一个合格的前端开发,为了代码质量和优雅度(其实是因为懒
),避免不了封装一些重复代码和功能,来使开发过程更加酣畅淋漓。
2,实现思路
项目中,wx.request
的很多参数都是固定的,只需要改变data
的值,而一般我们的逻辑处理都是在wx.request
的回调success
,fail
和complete
中操作的,并且有部分逻辑也是相同的,(比如判断接口返回数据是否成功,根据成功或失败显示不同的提示框等等),所以博主在这边用了Promise
来做了一个链式调用封装,少去了大部分重复语句。
3,实现过程
首先我们需要创建一个公共的requestFn.js
文件,在这个文件中写我们的wx.request
的封装,然后还需要创建一个公共的Api.js
文件,这个里面存放我们的接口地址和自定义的function
,最后,在微信小程序根目录下的app.js
中找到globalData
,在里面写上项目常用的请求域名,具体的如下图。
目录结构
app.js
3.1,request的封装
在requestFn.js
中,我们要做到的是创建一个function
,在里面统一处理wx.request
需要的参数和返回值,还有请求过程中的Loading
提示,Toast
提示,然后通过module.exports
将这个function
暴露出去,完整代码如下。
const app = getApp();
const baseURL = app.globalData.baseURL;
const FN = require('../publicFn/public');
const Request = (options) =>{
return new Promise((resolve, reject) => {
FN.Loading(1);
wx.request({
url: baseURL + options.url || '',
data: options.data || {},
method: options.method || 'POST',
header:{'content-type': "application/x-www-form-urlencoded"},
responseType:options.responseType || "",
timeout:15000,
success (res) {
FN.LoadingOff();
if(res.statusCode === 200){
if(res.data.status === "y"){
resolve(res.data);
}else{
FN.Toast(res.data.info);
};
}else{
FN.Toast(res.errMsg);
};
},
fail (res) {
FN.Toast("网络开小差了");
reject(res);
}
})
})
};
module.exports = {
Request
};
其中的FN
,FN.Toast
还有FN.Loading
是博主自己二次封装的一些微信小程序API,可以参考博主的另一篇文章:微信小程序API交互的自定义封装
3.2,api的封装
request
已经封装好了,下面就是将项目需要的请求接口,还有各个模块的数据请求方法定义一下,统一放在api.js
中,方便维护(ps:如果你的模块非常多,可以按模块建立不同的api.js,按需引入)。
详细代码如下
const requestFn = require('../requestFn/requestFn');
const API = {
banner:"/web/getBanner.am",//轮播图
};
const HTTP = {
/**
* banner
* @param {String} userId - 用户ID
* @param {String} appClientTypeCode - 设备端类型DICT_APP_CLIENT_TYPE_CODE_ANDROID(安卓DICT_APP_CLIENT_TYPE_CODE_IOS(苹果)
*/
banner(userId, appClientTypeCode){
return requestFn.Request({
url:API.banner,
data:{
userId:userId,
appClientTypeCode:appClientTypeCode,
}
})
},
}
module.exports = HTTP;
4,实际使用
在这几个步骤之后,我们的一个request
的封装就完成了,接下来就是实际应用了,调用方法如下。
1,在我们的页面对应的js
文件头部先要引入我们对应的api.js
。
import HTTP from "../../requestFn/Api";
2,在Page
对象中定义方法
// 获取banner图
getBanner () {
let userId = null;
if(app.globalData.userMsg !== null && app.globalData.userMsg.userId) userId = app.globalData.userMsg.userId;
let system = app.globalData.systemInfo.system;
let type = "DICT_APP_CLIENT_TYPE_CODE_IOS";
if(system){
if(!~system.indexOf("iOS")) type = "DICT_APP_CLIENT_TYPE_CODE_ANDROID";
};
HTTP.banner(userId, type)
.then(res => {
this.setData({
bannerList:res.infoObject
});
});
}
以上就是全部内容,如有写的不对的,欢迎指出。
如果看了觉得有帮助的,我是@鹏多多,欢迎 点赞 关注 评论;
END
往期文章
个人主页
微信小程序request请求的封装的更多相关文章
- 微信小程序request请求封装,验签
1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false ...
- 微信小程序request请求之GET跟POST的区别
1.GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content ...
- 微信小程序request请求动态获取数据
微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...
- 微信小程序request请求实例,网络请求。
最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...
- 微信小程序 request请求封装
在utils文件夹新建文件utils.js,封装代码如下: 小程序升级后内部不自带Promise方法,需外部引入Promise方法 var sendRequest = function (url, ...
- 微信小程序request请求封装
var app = getApp(); function request(url,postData,doSuccess,doFail,doComplete){ var host = getApp(). ...
- 微信小程序 之 请求函数封装
封装的request的代码 /** * @desc API请求接口类封装 */ /** * POST请求API * @param {String} url 接口地址 * @param {Object} ...
- 微信小程序request(ajax)接口请求封装
微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...
- mpvue学习笔记-之微信小程序数据请求封装
简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...
随机推荐
- 清轩网络引导页HTML源码
本文有216个文字,大小约为1KB,预计阅读时间1分钟后续可以自己修改,模板还是挺好看的 本网站为清轩编写完成,也就是清轩网络自用的网站官网,界面非常好看, 只不过网站无后台,编辑动态的时候需要手动加 ...
- python 全局变量与局部变量 垃圾回收机制
掌握L.E.G.B(作用域) 掌握局部作用域修改全局变量 步骤- 1.命名空间和作用域 命名空间:变量名称与值的映射关系作用域:变量作用的区域,即范围. 注意:class/def/模块会产生作用域:分 ...
- LLVM程序分析日记之插桩BranchInst
1. splitblockandinsertifthenelse() 一个代码例子:StackOverflow 2. SplitBlockAndInsertIfThen() 或者仅仅想插桩if the ...
- 史上最全单链表的增删改查反转等操作汇总以及5种排序算法(C语言)
目录 1.准备工作 2.创建链表 3.打印链表 4.在元素后面插入元素 5.在元素前面增加元素 6.删除链表元素,要注意删除链表尾还是链表头 7.根据传入的数值查询链表 8.修改链表元素 9.求链表长 ...
- Kubernetes【K8S】(四):资源控制器
什么是控制器 Kubernetes中内建了很多controller(控制器),这些相当于一个状态机,用来控制Pod的具体状态和行为. 控制器类型 ReplicationController和Rep ...
- react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)
第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...
- 一劳永逸,解决基于 keep-alive 的后台多级路由缓存问题
用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-ad ...
- 为什么Python多线程无法利用多核
1.全局解释锁 如题: Python的多线程为什么不能利用多核处理器? 全局解释器锁(Global Interpreter Lock)是计算机程序设计语言解释器用于同步线程的一种机制,它使得任何时刻仅 ...
- 制作3D小汽车游戏(上)
之前一段时间家里和公司的事太多,一直没有时间写博客,最近腾出一段时间,看了一遍官方的examples,收货颇多,想整理一点东西出来,又苦于没有好的东西,three写点东西真是太难了.好吧,今天郭先生就 ...
- Spring Cloud 2020.0.0正式发布,再见了Netflix
目录 ✍前言 版本约定 ✍正文 Spring Cloud版本管理 与Spring Boot版本对应关系 当前支持的版本 阻断式升级(不向下兼容) 1.再见了,Netflix Netflix组件替代方案 ...