微信小程序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请求的代码,发现如果在 ...
随机推荐
- Docker 安装Mysql,RabbitMQ
安装Mysql 拉取镜像 docker pull mysql:5.7.30 运行容器 docker run -itd --name mysql5.7 -p 33006:3306 --restart=a ...
- Python中open函数怎么操作文件
在 Python 中,如果想要操作文件,首先需要创建或者打开指定的文件,并创建一个文件对象,而这些工作可以通过内置的 open() 函数实现. open() 函数用于创建或打开指定文件,该函数的常用语 ...
- postgresql修改postgres用户密码
[postgres@pg01 ~]$ psql -Upostgres -dpostgres postgres=# alter user postgres with password 'postgres ...
- MySQL5.7 主主复制配置
MySQL 5.7 主主复制配置 一.简介: MySQL主主复制其实就是两个MySQL主从复制组合到一起,接着我的上一篇博客<centos 7 配置 mysql 5.7 主从复制>配置即可 ...
- Private jre vs Public jre
今天说一下java环境构建中,jre相关的小知识点. private jre:一般是C:\Program Files\jdk1.8.0\jre,必须安装,它为jdk的运行提供必需的环境. public ...
- Python之格式化unix时间戳
就瞎倒腾,格式化时间: 1 import time 2 3 unixTime = time.time() #定义unixTime以存储系统当前的unix时间戳 4 print(unixTime); # ...
- 如何使用iis发布多个ftp,为何ftp 503错误?
使用iis做网站时,需要每个网站都是80端口,所以用到了域名,为了方便发布应用,故将所有网站均添加了ftp发布,当我添加ftp域名绑定后,发现根本无法登陆ftp服务器,后经过百度+博客发现,解决方案: ...
- element-ui 表单 v-if 不能验证问题
element-ui 表单v-if 很多人会遇到无法验证的问题,网上很多是在el-form-item标签前加一个div然后把v-if拿到div上去像这样 <div v-if="addc ...
- python-使用python获取一段录音
需要安装pyaudio库. 直接上代码: import pyaudio import wave AUDIO_FILE = '录音文件.wav' def get_audio(filepath, audi ...
- 【kinetic】操作系统探索总结(八)键盘控制
如果尝试过前面的例子,有没有感觉每次让机器人移动还要在终端里输入指令,这也太麻烦了,有没有办法通过键盘来控制机器人的移动呢?答案室当然的了.我研究了其他几个机器人键盘控制的代码,还是有所收获的,最后移 ...