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的用法能够查看官网介绍。
小程序官网api文档
那既然官网曾经提供有api，为什么还须要进行二次封装呢？
2、二次封装的起因
第一点、防止反复代码
防止反复代码次要体现在以下几点：
1） 咱们公司调用后盾接口，除了登录接口外，其它的接口申请都须要在申请头中退出token，如果不做封装的状况下，每次调用网络申请都须要传token，很麻烦。
2）在网络申请的时候往往须要给个加载框，提醒用户正在加载.... 如下图所示：
如果不做封装，在每个网络申请的中央如果须要弹出加载框，都须要反复写这一段代码：
申请开始的时候，显示加载框。
wx.showLoading({ title: message, }), 申请完结的时候，暗藏加载框：wx.hideLoading();
第二点、防止回调天堂
一个页面如果有多个网络申请，并且申请有肯定的程序，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。
对于Promise的介绍能够到廖雪峰的官方网站去查看，有具体的介绍。
Promise介绍
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下面，感兴趣的能够点击下载。
网络封装源码
备注
往期历史文章：
微信小程序开发--个性化头像生成(国庆突变头像、圣诞帽头像)