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>