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

news2024/10/6 2:28:41

一、文件路径截图

        

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.coloradmin.cn/o/1415357.html

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

相关文章

Linux ---- Shell编程之函数与数组

目录 一、函数 1、函数的基本格式 2、查看函数列表 3、删除函数 4、函数的传参数 5、函数返回值 实验&#xff1a; 1.判断输入的ip地址正确与否 2. 判断是否为管理员用户登录 6、函数变量的作用范围 7、函数递归&#xff08;重要、难点&#xff09; 实验&#xff1…

P1024 [NOIP2001 提高组] 一元三次方程求解————C++

目录 [NOIP2001 提高组] 一元三次方程求解题目描述输入格式输出格式样例 #1样例输入 #1样例输出 #1 提示 解题思路Code运行结果 [NOIP2001 提高组] 一元三次方程求解 题目描述 有形如&#xff1a; a x 3 b x 2 c x d 0 a x^3 b x^2 c x d 0 ax3bx2cxd0 这样的一个一元…

【2024-01-27可用】NVM安装太慢,镜像地址失效

安装nvm时&#xff0c; Could not retrieve https://registry.npm.taobao.org/latest/SHASUMS256.txt. 解决如下 ### 具体配置 安装路径 root: D:\Program Files\nvm path: D:\Program Files\nodejs镜像地址 node_mirror: https://npmmirror.com/mirrors/node/ npm_mirror:…

STL容器大总结区分(上)

如图所示 ,按大小说明其重要性 那就先说两个最重要的: vector---数组 list-----链表 vector 基本概念 功能&#xff1a; vector 数据结构和 数组非常 相似 &#xff0c;也称为 单端数组 vector 与普通数组区别&#xff1a; 不同之处在于数组是静态空间&…

vue3添加pinia

概述&#xff1a;Pinia 是一个专为 Vue.js 开发的状态管理库。Vue.js 是一个流行的 JavaScript 框架&#xff0c;用于构建用户界面。Pinia 旨在提供一个简单、灵活且性能高效的状态管理方案&#xff0c;使开发者能够更容易地管理应用的状态。 以下是 Pinia 的一些特点和概念&a…

在 React 组件中使用 JSON 数据文件,怎么去读取请求数据呢?

要在 React 组件中使用 JSON 数据&#xff0c;有多种方法。 常用的有以下几种方法&#xff1a; 1、直接将 JSON 数据作为一个变量或常量引入组件中。 import jsonData from ./data.json;function MyComponent() {return (<div><h1>{jsonData.title}</h1>&…

Vue3中ElementPlus组件二次封装,实现原组件属性、插槽、事件监听、方法的透传

本文以el-input组件为例&#xff0c;其它组件类似用法。 一、解决数据绑定问题 封装组件的第一步&#xff0c;要解决的就是数据绑定的问题&#xff0c;由于prop数据流是单向传递的&#xff0c;数据只能从父流向子&#xff0c;子想改父只能通过提交emit事件通知父修改。 父&a…

第十八讲_HarmonyOS应用开发实战(实现电商首页)

HarmonyOS应用开发实战&#xff08;实现电商首页&#xff09; 1. 项目涉及知识点罗列2. 项目目录结构介绍3. 最终的效果图4. 部分源码展示 1. 项目涉及知识点罗列 掌握HUAWEI DevEco Studio开发工具掌握创建HarmonyOS应用工程掌握ArkUI自定义组件掌握Entry、Component、Builde…

Leetcode—2942. 查找包含给定字符的单词【简单】

2023每日刷题&#xff08;一零一&#xff09; Leetcode—2942. 查找包含给定字符的单词 实现代码 class Solution { public:vector<int> findWordsContaining(vector<string>& words, char x) {vector<int> ans;for(int i 0; i < words.size(); i)…

JDK8新特性:Stream

Stream 认识Stream 也叫Stream流&#xff0c;是jdk8开始新增的一套API&#xff08;java.util.stream.*&#xff09;&#xff0c;可以用于操作集合或者数组的数据。优势&#xff1a;Stream流大量的结合了Lambda的语法风格来编程&#xff0c;提供了一种更强大&#xff0c;更加简…

TCS34725使用记录

TCS34725使用记录 1、IIC通信 1、tcs34725硬件通信采用标准的IIC协议&#xff1b; 2、在寄存器读写上需要注意一下&#xff0c;在读写寄存时&#xff0c;需要将地址最高位置1&#xff1b; I2C_SendByte(reg|0x80);//一般的iic操作寄存器都是直接传入reg 2、配置与数据读取 …

简单介绍----微服务和Spring Cloud

微服务和SpringCloud 1.什么是微服务&#xff1f; 微服务是将一个大型的、单一的应用程序拆分成多个小型服务&#xff0c;每个服务负责实现特定的业务功能&#xff0c;并且可以通过网络通信与其他服务通信。微服务的优点是开发更灵活&#xff08;不同的微服务可以使用不同的开…

HTML 曲线图表特效

下面是代码 <!doctype html> <html> <head> <meta charset"utf-8"> <title>基于 ApexCharts 的 HTML5 曲线图表DEMO演示</title><style> body {background: #000524; }#wrapper {padding-top: 20px;background: #000524;b…

基于InceptionV2/InceptionV3/Xception不同参数量级模型开发构建中草药图像识别分析系统,实验量化对比不同模型性能

最近正好项目中在做一些识别相关的内容&#xff0c;我也陆陆续续写了一些实验性质的博文用于对自己使用过的模型进行真实数据的评测对比分析&#xff0c;感兴趣的话可以自行移步阅读即可&#xff1a; 《移动端轻量级模型开发谁更胜一筹&#xff0c;efficientnet、mobilenetv2、…

什么情况会发生Full GC?如何避免频繁Full GC?Minor GC、Major GC 和 Full GC区别?

Minor GC、Major GC 和 Full GC区别&#xff1f; Minor GC、Major GC和Full GC是垃圾回收中的三个重要概念&#xff0c;它们描述了垃圾回收的不同阶段和范围&#xff1a; Minor GC&#xff08;新生代GC&#xff09;&#xff1a; Minor GC主要关注清理年轻代&#xff08;Young …

ansible处理多台机器部署基础环境

本次以多台机器需部署zabbix客户端为例&#xff1a; 机器先做免密互信&#xff0c;ansible主机上执行ssh-keygen,一路回车&#xff0c;然后将公钥发送给需管理的主机&#xff1a; ssh-copy-id rootIP 1、编辑hosts文件&#xff0c;添加需配置的主机IP&#xff0c;并测试连通…

LC每日一题记录 2861. 最大合金数

题干 思路 所有合金都需要由同一台机器制造&#xff0c;因此我们可以枚举使用哪一台机器来制造合金。 对于每一台机器&#xff0c;我们可以使用二分查找的方法找出最大的整数 xxx&#xff0c;使得我们可以使用这台机器制造 xxx 份合金。找出所有 xxx 中的最大值即为答案。 代…

鸿蒙ArkUI 宫格+列表+HttpAPI实现

鸿蒙ArkUI学习实现一个轮播图、一个九宫格、一个图文列表。然后请求第三方HTTPAPI加载数据&#xff0c;使用了axios鸿蒙扩展库来实现第三方API数据加载并动态显示数据。 import {navigateTo } from ../common/Pageimport axios, {AxiosResponse } from ohos/axiosinterface IDa…

C语言入门(二)、每日Linux(三)——gcc命令,通过gcc命令熟悉C语言程序实现的过程

使用gcc编译C语言程序 C语言程序实现的过程gcc命令基础用法常用选项编译和汇编选项&#xff1a;优化选项&#xff1a;调试选项&#xff1a;链接选项&#xff1a;警告选项&#xff1a; 实验对于-o选项 通过gcc命令熟悉C语言程序的执行过程1.预处理2.编译阶段3.汇编阶段4.链接阶段…

Atlassian 停服 Bitbucket?三步快速迁移至极狐GitLab

之前的文章Jira 母公司全面停服 Server 产品&#xff0c;用户如何迁移至极狐GitLab提到了 Atlassian 将在 2 月 15 日以后停止对 Server 端产品的服务支持&#xff0c;此后用户将无法像之前一样继续使用 Jira、Bitbucket、Bamboo、Confluence 这些产品了。如果用户想要继续使用…