uni-app (安卓、微信小程序)接口封装 token失效自动获取新的token

一、文件路径截图

1、新建一个文件app.js存放接口

//这里存放你需要的接口
 
import {request} from '@/utils/request.js' //这个文件是请求逻辑处理
module.exports = {
	// 登录 -- 注册
	perssonRegister: (data) => { // 供应商注册 
		return request({
			url: 'manageWx/Login/perssonRegister',
			method: "post",
			data
		})
	}
},

2、新建一个文件request.js

const BASE_URL = "http://192.168.10.115:8081/jeecg-boot/"; // 本地
export const request = (options) => {
	// 初始化重试次数为0
	return sendRequest(options, 0);
};
// 封装的发送请求函数
function sendRequest(options, retryCount) {
	return new Promise((resolve, reject) => {
		const token = uni.getStorageSync('token');
		uni.request({
			url: `${BASE_URL}${options.url}`,
			data: options.data || '',
			method: options.method || 'POST',
			header: {
				"X-Access-Token": token,
			},
			timeout: 10000, // 设置请求超时时间为10秒
			success: (res) => {
				if (res.data.code === 401 && retryCount < 2) {
					// 如果token失效且重试次数未达上限,则尝试重新登录
					wxlogin(options).then(() => {
						// 重试次数加1后重新发送请求
						sendRequest(options, retryCount + 1).then(resolve).catch(reject);
					}).catch(reject);
				} else {
					// 请求成功或重试次数达到上限,返回结果或错误信息
					resolve(res.data);
				}
			},
			fail: (res) => {
				// 请求失败,返回错误信息
				reject(res.data);
			}
		});
	});
}
// 处理token失效的登录逻辑
async function wxlogin(options) {
	return new Promise((resolve, reject) => {
		const userName = uni.getStorageSync('userName');
		if (!userName || !userName.phone) {
			// 如果用户名为空或电话号码为空,则登录失败
			reject('用户名或电话号码为空');
			return;
		}
		uni.request({
			url: `${BASE_URL}manageWx/Login/queryUserByPhone`,
			data: {
				phone: userName.phone
			},
			method: 'GET',
			success(res) {
				if (res.data.code === 200) {
					const {
						USER,
						TOKEN
					} = res.data.result;
					if (USER && TOKEN) {
						// 如果用户名和令牌有效,则存储它们并解析Promise
						uni.setStorageSync('userName', USER);
						uni.setStorageSync('token', TOKEN);
						resolve();
					} else {
						// 如果用户名或令牌无效,则登录失败
						reject('无效的用户名或令牌');
					}
				} else {
					// 登录错误,返回错误信息
					reject('登录错误');
				}
			},
			fail(res) {
				// 请求失败,返回错误信息
				reject('登录请求失败');
			}
		});
	});
}

module.exports = {
	request,
	host:BASE_URL
};

3、页面使用

<!--@ 商品列表 -->
<template>
	

</template>
<script>
	import {perssonRegister} from '@/utils/app.js' //调用接口使用
	export default {
		name: "PlaceOrderGoods",
		
		data() {
			return {
				dataSource: [],
				
			};
		},

	
		onLoad() {
		
			this.loadData()
		},
		methods: {
			
			// 单位名称的数据
			async loadData() {
                
                const pames = {}
                
    await queryUnitName(pames).then(res => {
						if (res.code == 200) {
							this.dataSource= res.result
						}
					})
					.catch(err => {
						// 失败执行
					})
					.finally(() => {
						// 执行代码正确、报错都执行	
						
					});

			},
			
			

		}
	};
</script>

<style lang="scss" scoped>
	
</style>

  • 10
    点赞
  • 11
    收藏
    觉得还不错? 一键收藏
  • 打赏
    打赏
  • 0
    评论

“相关推荐”对你有帮助么?

  • 非常没帮助
  • 没帮助
  • 一般
  • 有帮助
  • 非常有帮助
提交
评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

My&Liu

你的鼓励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值