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. 清轩网络引导页HTML源码

    本文有216个文字,大小约为1KB,预计阅读时间1分钟后续可以自己修改,模板还是挺好看的 本网站为清轩编写完成,也就是清轩网络自用的网站官网,界面非常好看, 只不过网站无后台,编辑动态的时候需要手动加 ...

  2. python 全局变量与局部变量 垃圾回收机制

    掌握L.E.G.B(作用域) 掌握局部作用域修改全局变量 步骤- 1.命名空间和作用域 命名空间:变量名称与值的映射关系作用域:变量作用的区域,即范围. 注意:class/def/模块会产生作用域:分 ...

  3. LLVM程序分析日记之插桩BranchInst

    1. splitblockandinsertifthenelse() 一个代码例子:StackOverflow 2. SplitBlockAndInsertIfThen() 或者仅仅想插桩if the ...

  4. 史上最全单链表的增删改查反转等操作汇总以及5种排序算法(C语言)

    目录 1.准备工作 2.创建链表 3.打印链表 4.在元素后面插入元素 5.在元素前面增加元素 6.删除链表元素,要注意删除链表尾还是链表头 7.根据传入的数值查询链表 8.修改链表元素 9.求链表长 ...

  5. Kubernetes【K8S】(四):资源控制器

    什么是控制器 ​ Kubernetes中内建了很多controller(控制器),这些相当于一个状态机,用来控制Pod的具体状态和行为. 控制器类型 ReplicationController和Rep ...

  6. react第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制)

    第五单元(事件系统-原生事件-react中的合成事件-详解事件的冒泡和捕获机制) 课程目标 深入理解和掌握事件的冒泡及捕获机制 理解react中的合成事件的本质 在react组件中合理的使用原生事件 ...

  7. 一劳永逸,解决基于 keep-alive 的后台多级路由缓存问题

    用过 vue-element-admin 的同学一定很清楚,路由的配置直接关系侧边栏导航菜单的展示,也得益于这种设计思路,几乎大部分后台框架都采用这个方案,当然也包括了我写的 Fantastic-ad ...

  8. 为什么Python多线程无法利用多核

    1.全局解释锁 如题: Python的多线程为什么不能利用多核处理器? 全局解释器锁(Global Interpreter Lock)是计算机程序设计语言解释器用于同步线程的一种机制,它使得任何时刻仅 ...

  9. 制作3D小汽车游戏(上)

    之前一段时间家里和公司的事太多,一直没有时间写博客,最近腾出一段时间,看了一遍官方的examples,收货颇多,想整理一点东西出来,又苦于没有好的东西,three写点东西真是太难了.好吧,今天郭先生就 ...

  10. Spring Cloud 2020.0.0正式发布,再见了Netflix

    目录 ✍前言 版本约定 ✍正文 Spring Cloud版本管理 与Spring Boot版本对应关系 当前支持的版本 阻断式升级(不向下兼容) 1.再见了,Netflix Netflix组件替代方案 ...