【微信小程序篇】-请求封装

最近自己在尝试使用AIGC写一个小程序，页面、样式、包括交互函数AIGC都能够帮我完成(不过这里有一点问题AIGC的上下文关联性还是有限制，会经常出现对于需求理解跑偏情况，需要不断的重复强调，并纠正错误，才能得到你想要的内容)。

因为最近某些原因，所处的环境网络没办法科学上网，剩下的网络交互需要自己完成。

请求封装

常用的请求方式：POST、GET
了解了一些网友们封装的方式，使用 Promise 来完成，Let’s do it。

1.动态配置环境：

env.config.js

const envConf = {//本地环境develop: {mode: 'dev',DEBUG: false,VCONSOLE: true,appid: '***',VUE_APP_BASE_URL: 'https://***',},//测试环境test: {mode: 'test',DEBUG: false,VCONSOLE: false,appid: '***',VUE_APP_BASE_URL: 'https://***',},//开发环境prod: {mode: 'prod',DEBUG: false,VCONSOLE: false,appid: '***',VUE_APP_BASE_URL: 'https://***',}
}
module.exports = {// 获取 envVersion是true的环境env: envConf[__wxConfig.envVersion]
}

2.封装请求

第一部分：基本信息处理

基本的环境信息及用户、租户、信息获取，不需要token的请求地址配置，需要统一处理code的数组配置

const app = getApp();
var tokenKey = "token";
var login_path = '/pages/login/login';
//请求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', ];
// 跳转到登录页的 code
var jumpLoginCodes = [1001,1002,1007,1009,1010,
]

第二部分：请求头设置

//请求头处理函数
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还有租户idheader['X-Access-Token'] = token;header['tenant-id'] = tenantid;}return header;
}

第三部分：请求封装

POST请求部分

//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.statusCode === 200 && res.data && res.data.code === 200) {resolve(res)}//Token失效  跳转至登录页面else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {//移除失效tokenwx.removeStorageSync('token')//移除失效的用户信息wx.removeStorageSync('userInfo')//属于tabbar的页面，只能通过wx.switchTab来跳转// wx.switchTab({// 	url: login_path,// }) // 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转wx.navigateTo({url: login_path});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.statusCode === 200 && res.data && res.data.code === 200) {resolve(res)}//Token失效  跳转至登录页面else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {//移除失效的用户信息wx.removeStorageSync('userInfo')//移除失效tokenwx.removeStorageSync('token')//属于tabbar的页面，只能通过wx.switchTab来跳转// wx.switchTab({// 	url: login_path,// }) // 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转wx.navigateTo({url: login_path});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请求部分

//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.statusCode === 200 && res.data && res.data.code === 200) {resolve(res)}//Token失效  跳转至登录页面else if (res.data && jumpLoginCodes.indexOf(res.data.code) > -1) {//移除失效的用户信息wx.removeStorageSync('userInfo')//移除失效tokenwx.removeStorageSync('token')//属于tabbar的页面，只能通过wx.switchTab来跳转// wx.switchTab({// 	url: login_path,// }) // 不属于 tabbar 的页面，需要通过 wx.navigateTo 来跳转wx.navigateTo({url: login_path});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)})})})
}

参考部分别人的内容，自己做了一些适合自己的判定改造，搞定。