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.wxUserconst SYSUSER = res.data.result.sysUseruni.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.hqwc.cn/news/433534.html

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

相关文章

再谈Android View绘制流程

一&#xff0c;先思考何时开始绘制 笔者在这里提醒读者&#xff0c;Android的View是UI的高级抽象&#xff0c;我们平时使用的XML文件也好&#xff0c;本质是设计模式中的一种策略模式&#xff0c;其View可以理解为一种底层UI显示的Request。各种VIew的排布&#xff0c;来自于开…

详解SpringCloud微服务技术栈:DSL查询ES文档高级语法、相关性算分数学原理总结

&#x1f468;‍&#x1f393;作者简介&#xff1a;一位大四、研0学生&#xff0c;正在努力准备大四暑假的实习 &#x1f30c;上期文章&#xff1a;详解SpringCloud微服务技术栈&#xff1a;ElasticSearch实践1——RestClient操作索引库与文档 &#x1f4da;订阅专栏&#xff1…

Chain-of-Thought Prompting Elicits Reasoning in Large Language Models导读

通过生成一系列中间推理步骤&#xff08;即“思维链”&#xff09;显著提高大型语言模型进行复杂推理的能力 这篇论文探讨了如何通过生成一系列中间推理步骤&#xff08;即“思维链”&#xff09;显著提高大型语言模型进行复杂推理的能力。研究人员使用一种简单的方法——思维…

vue项目如何打包,java项目如何打包

目录 vue项目如何打包 java项目如何打jar包 使用Maven打包为JAR&#xff08;方式一&#xff09;视图&#xff1a; 先双击clean再双击package即可打包 使用Maven打包为JAR&#xff08;方式二&#xff09;命令&#xff1a; 1、确保你已经安装了Maven&#xff0c;并且配置了相应…

通俗易懂理解小波池化以及WaveCNet网络模型

重要说明&#xff1a;本文从网上资料整理而来&#xff0c;仅记录博主学习相关知识点的过程&#xff0c;侵删。 一、参考资料 github代码&#xff1a;WaveCNet 小波变换和曲波变换用于池化层 通俗易懂理解小波变换(Wavelet Transform) 二、相关介绍 关于小波变换的详细介绍…

pdf.js 实现pdf在线搜索,分页,下载,放大,打印功能

下载插件地址&#xff1a; https://download.csdn.net/download/xiaogg3678/88780912 浏览器在线预览地址&#xff1a; http://localhost/pdfjs-viewer/web/viewer.html?filehttp://localhost/pdfjs-viewer/web/compressed.tracemonkey-pldi-09.pdf

springboot快速写接口

1. 建proj形式 name会变成文件夹的名字&#xff0c;相当于你的项目名称 基础包 2. 基础依赖 3. 配置数据库 这里要打开mysql&#xff0c;并且创建数据库 方法&#xff1a; 安装好数据库&#xff0c;改好账号密码用navicat来建表和账号配置properties.yml文件即可 4.用res…

C语言之指针的地址和指向的内容总结(八十四)

简介&#xff1a; CSDN博客专家&#xff0c;专注Android/Linux系统&#xff0c;分享多mic语音方案、音视频、编解码等技术&#xff0c;与大家一起成长&#xff01; 优质专栏&#xff1a;Audio工程师进阶系列【原创干货持续更新中……】&#x1f680; 优质专栏&#xff1a;多媒…

分布式因果推断在美团履约平台的探索与实践

美团履约平台技术部在因果推断领域持续的探索和实践中&#xff0c;自研了一系列分布式的工具。本文重点介绍了分布式因果树算法的实现&#xff0c;并系统地阐述如何设计实现一种分布式因果树算法&#xff0c;以及因果效应评估方面qini_curve/qini_score的不足与应对技巧。希望能…

Discuz论坛搭建:Linux宝塔面板一键部署,固定地址畅享公网访问

&#x1f308;个人主页&#xff1a;聆风吟 &#x1f525;系列专栏&#xff1a;网络奇遇记、Cpolar杂谈 &#x1f516;少年有梦不应止于心动&#xff0c;更要付诸行动。 文章目录 &#x1f4cb;前言一. 安装基础环境二. 一键部署Discuz三. 安装cpolar工具四. 配置域名访问Discuz…

ST-Link调试器:功能、用途和引脚

ST-Link调试器&#xff1a;功能、用途和引脚 介绍 在嵌入式系统开发中&#xff0c;调试器是一种至关重要的工具&#xff0c;它允许开发人员调试和编程微控制器&#xff0c;以确保系统正常运行并解决潜在的问题。ST-Link是STMicroelectronics公司推出的一款强大的调试器&#x…

【JaveWeb教程】(30)SpringBootWeb案例之《智能学习辅助系统》的详细实现步骤与代码示例(3)员工管理的实现

目录 SpringBootWeb案例033. 员工管理3.1 分页查询3.1.1 基础分页3.1.1.1 需求分析3.1.1.2 接口文档3.1.1.3 思路分析3.1.1.4 功能开发3.1.1.5 功能测试3.1.1.6 前后端联调 3.1.2 分页插件3.1.2.1 介绍3.1.2.2 代码实现3.1.2.3 测试 3.2 分页查询(带条件)3.2.1 需求3.2.2 思路分…