uni-app 接口封装,token过期,自动获取最新的token

一、文件路径截图

        

2、新建一个文件app.js

let host='http://172.16.192.40:8083/jeecg-boot/'  //本地接口
let myApi = {
	login: `${host}wx/wxUser/login`, //登录
}
module.exports = myApi

3、新建一个文件request.js
        

import myApi from '@/utils/app.js';
export const request = (options) => {
	console.log(options, `调用接口`)
	return new Promise((resolve, reject) => {
		const WXUSER = uni.getStorageSync('WXUSER');
		if (!options.url)  return console.error('请传入URL')
		else  sendRequest(options, resolve, reject);
		
	})
};
//封装的发送请求函数
function sendRequest(options, resolve, reject) {
	const WXUSER = uni.getStorageSync('WXUSER');
	uni.request({
		url: options.url,
		data: options.data || '',
		method: options.method || 'POST',
		header: {
			"X-Access-Token": WXUSER.rememberToken,  //传递的token
		},
		success: (res) => {
			if (res.data.code == 401) {
				console.log('返回401,token失效')
				wxlogin(options).then(() => {
					sendRequest(options, resolve, reject);
				});
			} else resolve(res.data)
		}
	})
}
//封装的登录 登陆成功后获取信息
export async function wxlogin(options) {
	return new Promise((resolve, reject) => {
		uni.getUserInfo({
			success: (UserRes) => {
				uni.login({
					desc: 'weixin',
					success: res => {
						wx.request({
							url: myApi.login,
							method: 'POST',
							data: {
								weappCode: res.code,
							},
							success: res => {
								if (res.data.success) {
									console.log(res.data.result.wxUser)
									const WXUSER = res.data.result.wxUser
									const SYSUSER = res.data.result.sysUser
									uni.setStorageSync('WXUSER',WXUSER);
									uni.setStorageSync('SYSUSER',SYSUSER);
									resolve(); // 登录成功后,返回resolve
								} else {
									console.log('登录错误', res)
									reject(); // 登录失败时,返回reject
								}
							}
						});
					}
				});
			}
		})
	});
}

4、页面使用
        

<!-- 首页 -->
<template>
	
</template>

<script>
	import myApi from '@/utils/app.js' //调用接口使用
	export default {
		components: {
			
		},
		data() {
			return {
				dataSource: [],
			};
		},
		onLoad() {
			this.loadData()
		},
		
		methods: {
			async loadData() {
				try {
					const res = await this.$request({
						url: myApi.CcrUgcList,
						method: 'GET',
					});
					console.log(res)
					if (res.code === 200) {
						this.dataSource = res.result.records
					}
				} catch (e) {
                    // 失败执行
					console.log(`这个接口错误:${myApi.CcrUgcList}`)
				} finally {
					// 执行代码正确、报错都执行
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>

</style>

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

如若内容造成侵权/违法违规/事实不符,请联系我们进行投诉反馈qq邮箱809451989@qq.com,一经查实,立即删除!

相关文章

【云原生】Docker的镜像创建

目录 1&#xff0e;基于现有镜像创建 &#xff08;1&#xff09;首先启动一个镜像&#xff0c;在容器里做修改 ​编辑&#xff08;2&#xff09;然后将修改后的容器提交为新的镜像&#xff0c;需要使用该容器的 ID 号创建新镜像 实验 2&#xff0e;基于本地模板创建 3&am…

uniapp上传音频文件到服务器

视频教程地址&#xff1a; 【uniapp录音上传组件&#xff0c;将录音上传到django服务器】 https://www.bilibili.com/video/BV1wi4y1p7FL/?share_sourcecopy_web&vd_sourcee66c0e33402a09ca7ae1f0ed3d5ecf7c uniapp 录制音频文件上传到django服务器保存到服务器 &#xf…

svn和git的本质区别是什么

参考&#xff1a; https://blog.csdn.net/feiying0canglang/article/details/126550676 上边图中&#xff0c;跨越了区的箭头&#xff0c;它中间的区数据都会同步。例如&#xff1a;git checkout &#xff0c;它是将本地仓库数据更新到暂存区和工作区的。\ 理解 gitlab和svn都…

【深度优先搜索】【C++算法】834 树中距离之和

作者推荐 【动态规划】【map】【C算法】1289. 下降路径最小和 II 本文涉及知识点 深度优先搜索 树 图论 LeetCode834 树中距离之和 给定一个无向、连通的树。树中有 n 个标记为 0…n-1 的节点以及 n-1 条边 。 给定整数 n 和数组 edges &#xff0c; edges[i] [ai, bi]表…

【AIGC】Diffusers:训练扩散模型

前言 无条件图像生成是扩散模型的一种流行应用&#xff0c;它生成的图像看起来像用于训练的数据集中的图像。通常&#xff0c;通过在特定数据集上微调预训练模型来获得最佳结果。你可以在HUB找到很多这样的模型&#xff0c;但如果你找不到你喜欢的模型&#xff0c;你可以随时训…

vue常用指令(v-for)

一、v-for 指令 作用: 根据数据生成列表结构 二、代码演示 1、在li标签中获取数组元素 代码 <!DOCTYPE html> <html lang"en"><head><meta charset"UTF-8" /><meta name"viewport" content"widthdevice-wid…

2024年 复习 HTML5+CSS3+移动web 笔记 之CSS遍

第一天第二天第三天 1.1 引入方式 1.2 选择器 1.3 画盒子 1.4 文字控制 1.5 综合案例 一 新闻详情 2.1 复合选择器 2.2 伪类选择器 2.3 CSS 特性 2.4 Emmet 写法 2.5 背景属性 2.6 显示模式 2.6 综合案例 一 热词 &#xff08;设计稿&#xff1f;&#xff09; 2.7 综合案例 一…

金蝶云星空-表单插件,点击事件(一)

表单插件&#xff0c;点击事件 BarItemClick、AfterBarItemClick 有时候我们在不通的场景中使用到自己的企业的逻辑思维 业务场景&#xff1a;采购订单上&#xff0c;增加一个按钮tbCeShi&#xff0c;添加下面的插件&#xff0c;弹出一个对话框&#xff1b; 添加一个按钮&am…

前端怎么监听手机键盘是否弹起

摘要&#xff1a; 开发移动端中&#xff0c;经常会遇到一些交互需要通过判断手机键盘是否被唤起来做的&#xff0c;说到判断手机键盘弹起和收起&#xff0c;应该都知道&#xff0c;安卓和ios判断手机键盘是否弹起的写法是有所不同的&#xff0c;下面讨论总结一下两端的区别以及…

前端学习生产环境、开发环境、测试环境

1、路径 定义是什么环境 NODE_ENVdevelopment 开发环境 2、.env 端口号 3、.env.development 开发环境 4、.env.production 生产环境 5、.env.test 测试环境 6、如何访问&#xff0c;通过process.env进行访问 学习中.......

SqlAlchemy使用教程(六) -- ORM 表间关系的定义与CRUD操作

SqlAlchemy使用教程(一) 原理与环境搭建SqlAlchemy使用教程(二) 入门示例及编程步骤SqlAlchemy使用教程(三) CoreAPI访问与操作数据库详解SqlAlchemy使用教程(四) MetaData 与 SQL Express Language 的使用SqlAlchemy使用教程(五) ORM API 编程入门 本章内容&#xff0c;稍微有…

SpringMVC-对静态资源的访问

1.工程中加入静态资源 在webapp下创建static文件夹&#xff0c;此文件夹专门放入静态资源 2.使项目可以处理静态资源的请求 在SpringMVC配置文件中添加以下语句 1.引入命名空间 xmlns:mvc"http://www.springframework.org/schema/mvc" xsi:schemaLocation“http…

Laravel 10.x 里如何使用ffmpeg

原理上很简单&#xff0c;就是使用命令行去调用ffmpeg&#xff0c;然后分析一下输出是不是有错误。 安装 首先安装 symfony/process&#xff0c;主要用于包装一下&#xff0c;用来代替 exec, passthru, shell_exec and system 。 composer require symfony/process composer…

75 C++对象模型探索。C++关于 虚函数表指针位置分析

如果一个类中&#xff0c;有虚函数&#xff0c;针对这个类会产生一个虚函数表。 生成这个类对象的时候&#xff0c;会有一个虚函数表指针&#xff0c;这个指针会指向这个虚函数表的开始地址。 我们本节就研究这个vptr指针。注意&#xff0c;vptr指针在 类对象中的位置。 证明…

【算法】糖果(差分约束)

题目 幼儿园里有 N 个小朋友&#xff0c;老师现在想要给这些小朋友们分配糖果&#xff0c;要求每个小朋友都要分到糖果。 但是小朋友们也有嫉妒心&#xff0c;总是会提出一些要求&#xff0c;比如小明不希望小红分到的糖果比他的多&#xff0c;于是在分配糖果的时候&#xff…

echarts 绘制垂直滚动热力图

问题1&#xff1a;提示功能无效 问题2&#xff1a;值筛选无效 效果 在线浏览 下载echarts官网例子(heatmap Examples - Apache ECharts) 稍作改动&#xff1a; generateData 入参改为长度和宽度noise.perlin2(i / 40, j / 20) Math.random() * 5y轴倒置指定zlevel为2 通过定…

链表--226. 翻转二叉树/medium 理解度A

226. 翻转二叉树 1、题目2、题目分析3、复杂度最优解代码示例4、适用场景 1、题目 给你一棵二叉树的根节点 root &#xff0c;翻转这棵二叉树&#xff0c;并返回其根节点。 示例 1&#xff1a; 输入&#xff1a;root [4,2,7,1,3,6,9] 输出&#xff1a;[4,7,2,9,6,3,1]示例 2&…

python:socket基础操作(3)-《udp接收消息》

收跟发基本核心思想差不多&#xff0c;只不过收信息需要去绑定一下端口&#xff0c;如果我们发信息没有绑定端口&#xff0c;那系统会随机分配一个&#xff0c;如果是收信息&#xff0c;那我们必须要求自己绑定端口才行 基础的接收数据 import socketudp_socket socket.socke…

华清远见作业第三十三天——C++(第二天)

思维导图&#xff1a; 题目&#xff1a; 自己封装一个矩形类(Rect)&#xff0c;拥有私有属性:宽度(width)、高度(height)&#xff0c; 定义公有成员函数&#xff1a; 初始化函数&#xff1a;void init(int w, int h) 更改宽度的函数&#xff1a;set_w(int w) 更改高度的函数…

如何使用 WebRTC 与 Kurento 建立视频会议 App

本文作者 WebRTC Ventures 工程师。在 RTC 2018 实时互联网大会上&#xff0c;WebRTC Ventures 的资深软件工程师&#xff0c;将围绕 WebRTC 开发带来经验分享。欢迎访问RTC 开发者社区&#xff0c;与更多WebRTC开发者交流经验。 了解 WebRTC 如何工作的一种简单方式是通过学习…