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

最近自己在尝试使用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)})})})
}

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

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/33268.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

基于机器学习进行降雨预测 -- 机器学习项目基础篇(13)

在本文中,我们将学习如何构建一个机器学习模型,该模型可以根据一些大气因素预测今天是否会有降雨。这个问题与使用机器学习的降雨预测有关,因为机器学习模型往往在以前已知的任务上表现得更好,而这些任务需要高技能的个人来完成。…

mysql正则表达式

mysql正则表达式 : REGEXP 规则基本和java正则规则一样,有些特殊字符有差异. 举例: -- 匹配以英文开头,4位英文字母8位数字/4位数字-4位数字 select * from tableName where code REGEXP ^[A-Z]{4}[0-9]{8}/[0-9]{3}-[0-9]{3}$ ;将code中的3位数字改成4位.高位补0. -- 数据…

Jmeter快捷方式和应用图标设置

很多人在安装Jmeter,安装到本机却没有icon,每次使用的时候,每次打开应用都要找目录,不太方便。 【解决问题】 使用bin路径下的一个.bat文件,创建快捷方式。 【操作步骤】 Step1、将Jmeter 安装bin路径下的jmeter.bat 发送快捷方…

Linux常见面试题,应对面试分享

操作系统基础 1.cpu占⽤率太⾼了怎么办? 排查思路是什么,怎么定位这个问题,处理流程 其他程序: 1.通过top命令按照CPU使⽤率排序找出占⽤资源最⾼的进程 2.lsof查看这个进程在使⽤什么⽂件或者有哪些线程 3.询问开发或者⽼⼤,是什么业务在使⽤这个进程…

实例036 使窗体标题栏文字右对齐

实例说明 窗口标题栏中的文字是窗口的重要说明,该文字可以标示窗口的功能、状态或名称等信息,一般该文字是居左显示的,在本例中设计一个标题栏文字右对齐的窗口。本实例运行结果如图1.36所示。 技术要点 在C# 2.0中实现这一功能非常容易&am…

smali语法从入门到精通

smali语法从入门到精通 相关资源 视频中提到的apk和源代码资源,到这里下载 Smali是什么 Smali是Android虚拟机的反汇编语言。Android虚拟机的可执行文件并不是普通的class文件,而是再重新整合打包后生成的dex文件。dex文件反编译之后就是Smali代码&am…

如何快速的让自己从月入2000变成月入两万?

从月入2000变成月入两万 前言我们可以这么做:1.提升自己的技能:2.寻找更好的工作机会:寻找更好的工作机会是一个重要的目标,以下是几个建议: 3.开展副业或兼职工作:4.创业或投资:5.构建个人品牌…

题目大解析(3)

题目 字符串中的第一个唯一字符 字符串中的第一个唯一字符 原题链接:字符串中的第一个唯一字符 计数法: class Solution { public:int firstUniqChar(string s) {int arr[130] {0};for(auto x : s){arr[x-0];}int i 0;for(auto x : s){if(arr[x-0] …

微服务与Nacos概述-4

限流规则配置 每次服务重启后 之前配置的限流规则就会被清空因为是内存态的规则对象,所以就要用到Sentinel一个特性ReadableDataSource 获取文件、数据库或者配置中心是限流规则 依赖:spring-cloud-alibaba-sentinel-datasource 通过文件读取限流规则…

centos修改DNS方法

如何修复dns服务器?dns服务器由解析器和域名服务器组成,主要存储网络中所有主机的域名和相应的ip地址。关于dns服务器有很多问题,我们将在这里给出一个具体的答案。 1、什么是dns? dns是指:域名服务器(域…

docker 导入镜像 REPOSITORY和tag都是null怎么解决

当使用 docker import 命令导入镜像时,REPOSITORY 和 TAG 字段可能会为 null,因为 docker import 命令不会保留镜像的元数据,例如镜像名称和标签。这是因为 docker import 命令主要用于将本地文件系统中的文件或目录导入为 Docker 镜像&#…

Android高通8.1 Selinux问题

1、最近客户提了一个需求,说要在user版本上面切分辨率,默认屏幕分辨率是2.5 k 执行adb shell指令之后变成 4k 然后adb shell wm size可以查看 2、一开始我能想到就是在文件节点添加权限,这里不管是mtk还是qcom(高通平台&#xff…

将.doc文档的默认打开方式从WPS修改为word office打开方式的具体方法(以win 10 操作系统为例)

将.doc文档的默认打开方式从WPS修改为word office打开方式的具体方法(以win 10 操作系统为例) 随着近几年WPS软件的不断完善和丰富,在某些方面取得了具有特色的优势。在平时编辑.doc文档时候也常常用到wps软件,不过WPS文献也存在…

WordPress中手动返回404的优雅方式

这篇文章也可以在我的博客中查看 关于本文 WordPress虽然有比较完善的404处理机制,但有时候我们需要手动返回404,这篇文章就来探讨一下这个问题。 何时返回404 根据mdn,404用作示意客户端找不到相应的资源,这可能是&#xff1…

记录第一篇被”华为开发者联盟鸿蒙专区 “收录的文章

记录第一篇被”华为开发者联盟鸿蒙专区 “社区收录的文章。 坚持写作的动力是什么? 是记录、分享,以及更好的思考 。

培训报名小程序报名确认开发

目录 1 创建页面2 创建URL参数3 信息展示4 消息订阅5 页面传参6 程序预览总结 我们上一篇介绍了报名功能的开发,在用户报名成功后需要展示报名的确认信息,如果信息无误提示用户支付,在支付之前需要让用户进行授权,允许小程序给用户…

从零开始搭建个人博客网站(hexo框架)

1.工具及环境搭建 1)注册GitHub并且新建一个repositories 2)下载node.js以及Git 下载链接: 检验安装是否成功: 【注】:MacOS自带Git,可以直接在终端输入git --version进行检验 3)新建一个…

Springboot04--vue前端部分+element-ui

注意点: 这边v-model和value的区别:v-model是双向绑定的,value是单向绑定 li的key的问题 vue的组件化开发: 1. NPM(类似maven,是管理前段代码的工具) 安装完之后可以在cmd里面使用以下指令 2.…

ffmpeg工具实用命令

说明:ffmpeg是一款非常好用的媒体操作工具,包含了许多对于视频、音频的操作,有些视频播放器,实际上就是套了一个ffmpeg的壳子。本文介绍ffmpeg的使用以及一些较为实用的命令。 安装 ffmpeg是命令行操作的,不需要安装…

Vue+SpringBoot后台管理系统:Vue3+TypeScript项目搭建(一)

写在开始:一个搬砖程序员的随缘记录文章目录 一、Node安装二、Vue CLI安装三、相关的版本四、创建Vue3TypeScript项目五、Vue项目初始化六、项目启动 一、Node安装 查看Note版本 node -v查看npm版本 npm -v然后将npm升级至最新版本 npm -g install npm将npm下载源换至http:…