本篇文章给大家介绍一下微信小程序开发中的网络请求封装，聊聊二次封装的原因，具体的封装实现，希望对大家有所帮助！
1、背景在做微信小程序开发的时候难免会涉及到网络请求操作，小程序提供的原生网络请求的api如下所示：
wx.request({ url: 'https://test.com/******', //仅为示例，并非真实的接口地址 data: { x: '', y: '' }, header: { 'content-type': 'application/json' // 默认值 }, success (res) { console.log(res.data) }})
其中：
url： 为请求的后台接口地址；
data： 为请求接口需要携带的参数；
header：设置请求的 header，content-type 默认为 application/json，
success： 为请求成功后的回调，res包含请求成功后返回的数据。
更多关于 wx.request的用法可以查看官方介绍。
requesttask | 微信开放文档
那既然官方已经提供有api，为什么还需要进行二次封装呢？
2、二次封装的原因第一点、避免重复代码
避免重复代码主要体现在以下几点：
1） 我们公司调用后台接口，除了登录接口外，其它的接口请求都需要在请求头中加入token，如果不做封装的情况下，每次调用网络请求都需要传token，很麻烦。
2）在网络请求的时候往往需要给个加载框，提示用户正在加载.... 如下图所示：
如果不做封装，在每个网络请求的地方如果需要弹出加载框，都需要重复写这一段代码：
请求开始的时候，显示加载框。
请求结束的时候，隐藏加载框：
第二点、避免回调地狱
一个页面如果有多个网络请求，并且请求有一定的顺序，wx.request 是异步操作，那么最直接的结果就如下所示代码：
onload: function () { wx.request({ url: 'https://test.com/api/test01', success:res=>{ wx.request({ url: 'https://test.com/api/test02', success: res=>{ wx.request({ url: 'https://test.com/api/test03', success: res=>{ testdatalist: res.content } }) } }) } }) },
是不是很像俄罗斯套娃。
为了避免这种写法，当然进行封装了，在这个地方采用了promise。
关于prolise的介绍可以到廖雪峰的官方网站去查看，有详细的介绍。
https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
3、具体的封装实现工程结构：
在utils文件夹下新建了两个文件。
1） httputils.js
网络请求的封装，具体代码如下：
const ui = require('./ui');const base_url = 'https://www.wanandroid.com'/** * 网络请求request * obj.data 请求接口需要传递的数据 * obj.showloading 控制是否显示加载loading 默认为false不显示 * obj.contenttype 默认为 application/json * obj.method 请求的方法 默认为get * obj.url 请求的接口路径 * obj.message 加载数据提示语 */function request(obj) { return new promise(function(resolve, reject) { if(obj.showloading){ ui.showloading(obj.message? obj.message : '加载中...'); } var data = {}; if(obj.data) { data = obj.data; } var contenttype = 'application/json'; if(obj.contenttype){ contenttype = obj.contenttype; } var method = 'get'; if(obj.method){ method = obj.method; } wx.request({ url: base_url + obj.url, data: data, method: method, //添加请求头 header: { 'content-type': contenttype , 'token': wx.getstoragesync('token') //获取保存的token }, //请求成功 success: function(res) { console.log('===============================================================================================') console.log('== 接口地址：' + obj.url); console.log('== 接口参数：' + json.stringify(data)); console.log('== 请求类型：' + method); console.log("== 接口状态：" + res.statuscode); console.log("== 接口数据：" + json.stringify(res.data)); console.log('===============================================================================================') if (res.statuscode == 200) { resolve(res); } else if (res.statuscode == 401) {//授权失效 reject("登录已过期"); jumptologin();//跳转到登录页 } else { //请求失败 reject("请求失败：" + res.statuscode) } }, fail: function(err) { //服务器连接异常 console.log('===============================================================================================') console.log('== 接口地址：' + url) console.log('== 接口参数：' + json.stringify(data)) console.log('== 请求类型：' + method) console.log("== 服务器连接异常") console.log('===============================================================================================') reject("服务器连接异常，请检查网络再试"); }, complete: function() { ui.hideloading(); } }) }); } //跳转到登录页 function jumptologin(){ wx.relaunch({ url: '/pages/login/login', }) } module.exports = { request, }
代码中有详细的注释，在这里就不多做解释了。
2） ui.js
主要是对wx ui操作的一些简单封装，代码如下：
export const showtoast = function(content,duration) { if(!duration) duration = 2000 wx.showtoast({ title: content, icon: 'none', duration: duration, }) } var isshowloading = false export const showloading = function(title) { if(isshowloading) return wx.showloading({ title: title?title:'', mask:true, success:()=>{ isshowloading = true } }) } export const hideloading = function() { if(!isshowloading) return isshowloading = false wx.hideloading() }
3） 具体调用
在index.js 进行了网络请求，具体代码如下：
// index.jsconst httputils = require('../../utils/httputils')const ui = require('../../utils/ui')page({ data: { str:null, }, onload() { }, //获取接口数据 getnetinfo(){ let obj = { method: "post", showloading: true, url:`/user/register?username=pppooo11&password=pppooo&repassword=pppooo`, message:"正在注册..." } httputils.request(obj).then(res=>{ this.setdata({ str:json.stringify(res) }) ui.showtoast(res.data.errormsg) }).catch(err=>{ console.log('error') }); }})
好了，到这里也就结束了，如果上面的内容对你有所帮助不要忘记点个赞哟。
代码已经上传到了github上面，感兴趣的可以点击下载。
https://github.com/ymandroid/networkdemo
更多编程相关知识，请访问：编程入门！！
以上就是小程序中怎么对网络请求进行二次封装的详细内容。