文章摘要：微信小程序封装请求；通过封装请求，我们可以将网络请求相关的代码抽离出来，形成一个独立的请求模块。这样，在多个页面中都可以复用这个模块，避免了代码的重复编写，提高了代码的复用性。
微信小程序封装请求
1. 封装请求的优势
在小程序开发中，我们通常需要与后端服务器进行数据交互，包括获取数据、提交表单等。封装请求的优势如下：
1.1 代码复用性
通过封装请求，我们可以将网络请求相关的代码抽离出来，形成一个独立的请求模块。这样，在多个页面中都可以复用这个模块，避免了代码的重复编写，提高了代码的复用性。
1.2 逻辑解耦
将网络请求封装成一个独立的模块，可以使代码逻辑更加清晰和简洁。不同的业务逻辑可以独立处理，降低了模块间的耦合度，提高了代码的可维护性和可测试性。
1.3 错误处理和异常捕获
封装请求的过程中，我们可以加入错误处理和异常捕获的逻辑。这样，在请求发生错误或异常时，我们可以统一处理，并给予用户友好的提示信息，提升了用户体验。
2. 封装请求的实现步骤
接下来，我们将介绍如何在微信小程序中封装请求。
2.1 封装请求方法
首先,新建一个config文件里面新建一个env.config.js 用来存不同环境的BASE_URL
然后，我们可以创建一个request.js，用于封装请求相关的方法。在该文件中，我们可以定义一个函数，用于发送网络请求。这个函数可以接受请求的参数，例如 URL、请求方法、数据等，并返回一个 Promise 对象，用于异步处理请求结果。
const envConf = {
//本地环境
develop: {
mode: 'dev',
DEBUG: false,
VCONSOLE: true,
appid: '换成自己的',
VUE_APP_BASE_URL: 'https://127.0.0.1:9999',
},
//测试环境
trial: {
mode: 'dev',
DEBUG: false,
VCONSOLE: true,
appid: '换成自己的',
VUE_APP_BASE_URL: '换成自己的',
},
//开发环境
release: {
mode: 'prod',
DEBUG: false,
VCONSOLE: false,
appid: '换成自己的',
VUE_APP_BASE_URL: '换成自己的',
}
}
module.exports = {
env: envConf[__wxConfig.envVersion]
}
const app = getApp();
var tokenKey = "token";
//请求url;引用的是env.config.js中对应环境的
var serverUrl = env.env.VUE_APP_BASE_URL;
var userInfo = wx.getStorageSync('userInfo');
var tenantid= '1'; //租户Id
if(!userInfo===''){
tenantid= userInfo.relTenantIds.split(',')[0];
}
import env from '../config/env.config'
// 例外不用token的地址
var exceptionAddrArr = ['/sys/login', ];
//请求头处理函数
function CreateHeader(url, type) {
let header = {}
if (type == 'POST_PARAMS') {
header = {
'content-type': 'application/x-www-form-urlencoded',
}
} else {
header = {
'content-type': 'application/json',
}
}
if (exceptionAddrArr.indexOf(url) == -1) { //排除请求的地址不需要token的地址
let token = wx.getStorageSync(tokenKey);
// header.Authorization = token;
//请求头携带token还有租户id
header['X-Access-Token'] = token;
header['tenant-id'] = tenantid;
}
return header;
}
//post请求，数据在body中
function postRequest(url, data) {
let header = CreateHeader(url, 'POST');
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + url,
data: {
...data,
tenantId: tenantid
},
header: header,
method: 'POST',
success: (res => {
if (res.data && res.data.code === 200) {
resolve(res)
}
//Token失效 跳转至登录页面
else if (res.data.code === 401) {
//移除失效token
wx.removeStorageSync('token')
//移除失效的用户信息
wx.removeStorageSync('userInfo')
//属于tabbar的页面，只能通过wx.switchTab来跳转
wx.switchTab({
url: '/pages/my/my',
})
console.log("TOKEN失效");
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
} else {
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
reject(res)
}
setTimeout(_ => {
wx.hideLoading();
}, 500)
}),
fail: (res => {
wx.hideLoading();
console.log("err!!!!", err)
wx.showToast({
icon: "none",
title: '请求失败',
});
reject(err)
})
})
})
}
//post请求，数据按照query方式传给后端
function postParamsRequest(url, data) {
let header = CreateHeader(url, 'POST_PARAMS');
let useurl = url;
console.log(useurl);
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + useurl,
header: header,
method: 'POST',
success: (res => {
if (res.data && res.data.code === 200) {
resolve(res)
}
//Token失效 跳转至登录页面
else if (res.data.code === 401) {
//移除失效的用户信息
wx.removeStorageSync('userInfo')
//移除失效token
wx.removeStorageSync('token')
//属于tabbar的页面，只能通过wx.switchTab来跳转
wx.switchTab({
url: '/pages/my/my',
})
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
} else {
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
reject(res)
}
setTimeout(_ => {
wx.hideLoading();
}, 500)
}),
fail: (res => {
wx.hideLoading();
console.log("err!!!!", err)
wx.showToast({
icon: "none",
title: '请求失败',
});
reject(err)
})
})
})
}
//get 请求
function getRequest(url, data) {
let header = CreateHeader(url, 'GET');
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + url,
data: data,
header: header,
method: 'GET',
success: (res => {
//统一处理响应状态码
if ((res.data && res.data.code === 200)||res.statusCode===200) {
resolve(res)
} //Token失效 跳转至登录页面
else if (res.data.code === 401) {
//移除失效的用户信息
wx.removeStorageSync('userInfo')
//移除失效token
wx.removeStorageSync('token')
//属于tabbar的页面，只能通过wx.switchTab来跳转
wx.switchTab({
url: '/pages/my/my',
})
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
} else {
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
reject(res)
}
setTimeout(_ => {
wx.hideLoading();
}, 500)
}),
fail: (res => {
wx.hideLoading();
console.log("err!!!!", err)
wx.showToast({
icon: "none",
title: '请求失败',
});
reject(err)
})
})
})
}
//put请求
function putRequest(url, data) {
let header = CreateHeader(url, 'PUT');
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + url,
data: data,
header: header,
method: 'PUT',
success: (res => {
if (res.data && res.data.code === 200) {
resolve(res)
} //Token失效 跳转至登录页面
else if (res.data.code === 401) {
//移除失效的用户信息
wx.removeStorageSync('userInfo')
//移除失效token
wx.removeStorageSync('token')
//属于tabbar的页面，只能通过wx.switchTab来跳转
wx.switchTab({
url: '/pages/my/my',
})
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
} else {
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
reject(res)
}
setTimeout(_ => {
wx.hideLoading();
}, 500)
}),
fail: (res => {
wx.hideLoading();
console.log("err!!!!", err)
wx.showToast({
icon: "none",
title: '请求失败',
});
reject(err)
})
})
})
}
//delete请求
function deleteRequest(url, data) {
let header = CreateHeader(url, 'DELETE');
return new Promise((resolve, reject) => {
wx.request({
url: serverUrl + url,
data: data,
header: header,
method: 'DELETE',
success: (res => {
if (res.data && res.data.code === 200) {
resolve(res)
} //Token失效 跳转至登录页面
else if (res.data.code === 401) {
//移除失效token
wx.removeStorageSync('token')
//移除失效的用户信息
wx.removeStorageSync('userInfo')
//属于tabbar的页面，只能通过wx.switchTab来跳转
wx.switchTab({
url: '/pages/my/my',
})
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
} else {
wx.showToast({
icon: "none",
title: (res.data && res.data.message) || "请求失败",
});
reject(res)
}
setTimeout(_ => {
wx.hideLoading();
}, 500)
}),
fail: (res => {
wx.hideLoading();
console.log("err!!!!", err)
wx.showToast({
icon: "none",
title: '请求失败',
});
reject(err)
})
})
})
}
module.exports.getRequest = getRequest;
module.exports.postRequest = postRequest;
module.exports.postParamsRequest = postParamsRequest;
module.exports.putRequest = putRequest;
module.exports.deleteRequest = deleteRequest;
2.2 接口管理
首先,新建一个api文件，里面新建一个login.js
import { getRequest, postRequest
} from "../request" //引用刚刚的request
const base = '';
// 登录
export const requst_post_login = data => postRequest(`/sys/login`, data);
//查询角色权限
export const getUserPermissionByToken= data => getRequest(`/sys/permission/getUserPermissionByToken`, data);
2.2 在小程序页面中使用封装的请求
import {
requst_post_login,
getUserPermissionByToken
} from "../../utils/api/login.js"
//登录请求
loginFun() {
const params = {
username: this.data.username, //用户名
password: this.data.password,
captcha: this.data.captcha,
//无验证码登录
wxLogin: "1",
}
requst_post_login(params).then(res => {
if (res.data.code === 200) {
//存储token
wx.setStorageSync('token', res.data.result.token)
var token = wx.getStorageSync('token');
console.log(token);
//存储用户信息
wx.setStorageSync('userInfo', res.data.result.userInfo)
// console.log(wx.getStorageSync('userInfo'));
//存储角色信息
wx.setStorageSync('departs', res.data.result.departs)
this.getUserPermissionByToken();
}
// // 跳转首页
wx.reLaunch({
url: '/pages/home/home',
});
})
},
————————————————
本文采摘于网络，不代表本站立场，转载联系作者并注明出处：https://www.dushilianren.cn/appnews/702.html
