最近自己在尝试使用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的数组配置文章来源：https://www.toymoban.com/news/detail-649346.html
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还有租户id
header['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) {
//移除失效token
wx.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')
//移除失效token
wx.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')
//移除失效token
wx.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)
})
})
})
}
参考部分别人的内容，自己做了一些适合自己的判定改造，搞定。文章来源地址https://www.toymoban.com/news/detail-649346.html
到了这里，关于【微信小程序篇】-请求封装的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！
