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的回调successfailcomplete中操作的,并且有部分逻辑也是相同的,(比如判断接口返回数据是否成功,根据成功或失败显示不同的提示框等等),所以博主在这边用了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
};

其中的FNFN.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请求的封装的更多相关文章

  1. 微信小程序request请求封装,验签

    1/ 公共文件util添加 request请求 //简单封装请求 function request(params, path, isShowLoading = true, goBack = false ...

  2. 微信小程序request请求之GET跟POST的区别

    1.GET 例子: wx.request({ url: 'test.php', //仅为示例,并非真实的接口地址 data: { x: '' , y: '' }, header: { 'content ...

  3. 微信小程序request请求动态获取数据

    微信小程序开发文档链接 1 后台代码: clickButton:function(){ var that = this; wx.request({ url: 'http://localhost:909 ...

  4. 微信小程序request请求实例,网络请求。

    最近微信小程序开始开放测试了,小程序提供了很多api,极大的方便了开发者,其中网络请求api是wx.request(object),这是小程序与开发者的服务器实现数据交互的一个很重要的api. 官方参 ...

  5. 微信小程序 request请求封装

    在utils文件夹新建文件utils.js,封装代码如下: 小程序升级后内部不自带Promise方法,需外部引入Promise方法   var sendRequest = function (url, ...

  6. 微信小程序request请求封装

    var app = getApp(); function request(url,postData,doSuccess,doFail,doComplete){ var host = getApp(). ...

  7. 微信小程序 之 请求函数封装

    封装的request的代码 /** * @desc API请求接口类封装 */ /** * POST请求API * @param {String} url 接口地址 * @param {Object} ...

  8. 微信小程序request(ajax)接口请求封装

    微信小程序request(ajax)接口请求封装 最近在进行小程序的编写,需要调用后端接口,经常要用到wx.request方法,所以就自己封装了一下,简化一下代码,如果能给大家提供帮助更好,在封装的时 ...

  9. mpvue学习笔记-之微信小程序数据请求封装

    简介 美团出品的mpvue已经开源出来很久了,一直说要进行一次实践,这不最近一次个人小程序开发就用上了它. 看了微信官方的数据请求模块--request,对比了下get和post请求的代码,发现如果在 ...

随机推荐

  1. Docker 安装Mysql,RabbitMQ

    安装Mysql 拉取镜像 docker pull mysql:5.7.30 运行容器 docker run -itd --name mysql5.7 -p 33006:3306 --restart=a ...

  2. Python中open函数怎么操作文件

    在 Python 中,如果想要操作文件,首先需要创建或者打开指定的文件,并创建一个文件对象,而这些工作可以通过内置的 open() 函数实现. open() 函数用于创建或打开指定文件,该函数的常用语 ...

  3. postgresql修改postgres用户密码

    [postgres@pg01 ~]$ psql -Upostgres -dpostgres postgres=# alter user postgres with password 'postgres ...

  4. MySQL5.7 主主复制配置

    MySQL 5.7 主主复制配置 一.简介: MySQL主主复制其实就是两个MySQL主从复制组合到一起,接着我的上一篇博客<centos 7 配置 mysql 5.7 主从复制>配置即可 ...

  5. Private jre vs Public jre

    今天说一下java环境构建中,jre相关的小知识点. private jre:一般是C:\Program Files\jdk1.8.0\jre,必须安装,它为jdk的运行提供必需的环境. public ...

  6. Python之格式化unix时间戳

    就瞎倒腾,格式化时间: 1 import time 2 3 unixTime = time.time() #定义unixTime以存储系统当前的unix时间戳 4 print(unixTime); # ...

  7. 如何使用iis发布多个ftp,为何ftp 503错误?

    使用iis做网站时,需要每个网站都是80端口,所以用到了域名,为了方便发布应用,故将所有网站均添加了ftp发布,当我添加ftp域名绑定后,发现根本无法登陆ftp服务器,后经过百度+博客发现,解决方案: ...

  8. element-ui 表单 v-if 不能验证问题

    element-ui 表单v-if 很多人会遇到无法验证的问题,网上很多是在el-form-item标签前加一个div然后把v-if拿到div上去像这样 <div v-if="addc ...

  9. python-使用python获取一段录音

    需要安装pyaudio库. 直接上代码: import pyaudio import wave AUDIO_FILE = '录音文件.wav' def get_audio(filepath, audi ...

  10. 【kinetic】操作系统探索总结(八)键盘控制

    如果尝试过前面的例子,有没有感觉每次让机器人移动还要在终端里输入指令,这也太麻烦了,有没有办法通过键盘来控制机器人的移动呢?答案室当然的了.我研究了其他几个机器人键盘控制的代码,还是有所收获的,最后移 ...