当前位置 博文首页 > 你见过思念放过谁的博客：**微信小程序常用方法、API封装之网络
首先了解一下，为什么要封装网络请求和API。
我认为一切封装都是为了简化开发，便于维护。比如，wx,request这个网络请求的方法，完整的写下来，是这样的：
wx.request({
url: 'test.php', //仅为示例，并非真实的接口地址
data: {
x: '',
y: ''
},
header: {
'content-type': 'application/json' // 默认值
},
success (res) {
console.log(res)
},
fail(err){
console.log(err)
}
})
如果每个请求都这么写的话，首先你的代码实在是太繁琐了，其次api就直接暴露了，在web上可能人家一眼就能看到你的接口地址，不安全，而且一旦API有改动，你还得找到对应的页面去进行修改。工作量无形之中会增加很多。
那么我们就需要对网络请求和接口进行统一的封装和管理。
**
**
首先，封装网络请求，这里采用es6的promise进行封装，我直接写在util.js里（关于promise，不懂的同学自行百度）：
/**
* 封装微信的的request
*/
function request(url, data = {}, method = "GET",contenType="") {
let _this = this
var token = wx.getStorageSync('token') //现在很多都是通过token来判断登录态的
return new Promise(function (resolve, reject) {
wx.request({
url: url,//网络请求的url（接口地址）
data: data,//网络请求的参数
method: method,//网络请求的类型，默认get，传入post则为post
header:contenType === "json" ? {'content-type':'application/json'} : {'content-type':'application/x-www-form-urlencoded'},//传入“json”这个字符串就是json请求头，否则是form请求头，这里甚至可以写“四元运算添加更多请求头”
success: function (res) {
if (res.statusCode == 200) {
if (res.data.errno == 401) { //具体的值由自己后台决定，我是401，且字段为errno，有的可能是code
//我这里401表示未登录，需要进行登录处理
let pages = getCurrentPages();
let currPage = null;
if (pages.length) {
currPage = pages[pages.length - 1];
}
//需要登录后才可以操作
//(登录页不需要提醒)
if(currPage.__route__ !== 'pages/me/me'){
console.log(currPage.__route__)
//这里的wx.showMoadl可以封装为alert，具体请见我的另一篇文章**微信小程序常用方法、API封装之alert + showToast + 节流函数** https://blog.csdn.net/qq_43156398/article/details/91982034
wx.showModal({
title: '提示',
content: '请先登录',
showCancel:false,
success: function (res) {
if (res.confirm) {
wx.removeStorageSync("userInfo");
wx.removeStorageSync("token");
wx.switchTab({
url: '/pages/me/me'
});
}
}
});
}
} else {
resolve(res.data);
}
} else {
reject(res.errMsg);
}
},
fail: err=> {
reject(err)
_this.showErrorToast('请求超时')
}
})
});
}
//输出该方法，便于子页面调用
module.exports = {
request
}
第二步，创建api.js文件。这里介绍两种封装且管理api接口的方法：
1.单独封装
如果你是像我上面写的那样把网络请求当做变量传入的，就用这种方法
var baseUrl = 'http://localhost:8080/api' //定义域名+端口号+公共路径
module.exports = {
//登录，比如你的登录接口是http://localhost:8080/api/login,且是post请求，由于在request封装里已经写了http://localhost:8080/api/，所以这里不用多写了,
AuthLoginByWeixin:`${baseUrl}/login`, //登录,post请求
getNewsList:`${baseUrl}/newsList`
}
//子页面
const util = require('../../utils/util.js');
const api = require('../../config/api.js');
login(){
let data = {userName:'',password:''} //对应封装里的data
util.request(api.login,'POST',data).then(res=>{
console.log(res) //成功回调
}).catch(err=>{
console.log(err) //失败回调
})
}
getNewsList(){
let data = {page:1,size:10}
util.request(api.getNewsList,data).then(res=>{
console.log(res) //成功回调
}).catch(err=>{
console.log(err) //失败回调
})
}
2.独立封装，我们在项目中常用的网络请求一般是以下几种：get,post,upLoad,deletes，put，那么，我们可以将这些请求进行独立封装，其实就是复制粘贴，命名不同，然后请求类型写死，比如：
var baseUrl = 'http://localhost:8080/api' //注意，现在把baseUrl写到封装里了
function _get(url, data = {},contenType="") { //函数名为_get
//function _post(url, data = {},contenType="") {//函数名为_post。这里我就不复制整段了，有变动的地方，我就注释起来标注
let _this = this
url = baseUrl + url
var token = wx.getStorageSync('token') //现在很多都是通过token来判断登录态的
return new Promise(function (resolve, reject) {
wx.request({
url: url,//网络请求的url（接口地址）
data: data,//网络请求的参数
method: 'GET',//网络请求的类型，写死GET
//method: 'POST',//网络请求的类型，写死POST
header:contenType === "json" ? {'content-type':'application/json'} : {'content-type':'application/x-www-form-urlencoded'},//传入“json”这个字符串就是json请求头，否则是form请求头，这里甚至可以写“四元运算添加更多请求头”
success: function (res) {
if (res.statusCode == 200) {
if (res.data.errno == 401) { //具体的值由自己后台决定，我是401，且字段为errno，有的可能是code
//我这里401表示未登录，需要进行登录处理
let pages = getCurrentPages();
let currPage = null;
if (pages.length) {
currPage = pages[pages.length - 1];
}
//需要登录后才可以操作
//(登录页不需要提醒)
if(currPage.__route__ !== 'pages/me/me'){
console.log(currPage.__route__)
//这里的wx.showMoadl可以封装为alert，具体请见我的另一篇文章**微信小程序常用方法、API封装之alert + showToast + 节流函数** https://blog.csdn.net/qq_43156398/article/details/91982034
wx.showModal({
title: '提示',
content: '请先登录',
showCancel:false,
success: function (res) {
if (res.confirm) {
wx.removeStorageSync("userInfo");
wx.removeStorageSync("token");
wx.switchTab({
url: '/pages/me/me'
});
}
}
});
}
} else {
resolve(res.data);
}
} else {
reject(res.errMsg);
}
},
fail: err=>
