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

一、文件路径截图

        

2、新建一个文件app.js

let host = 'http://192.168.1.29:8080/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) => {
	return new Promise((resolve, reject) => {
		const token = uni.getStorageSync('token');
		if (!options.url) {
			console.error('请传入URL')
			return;
		}
		if (!token) {
			wxlogin(options).then(() => {
				sendRequest(options, resolve, reject, 0);
			}).catch(reject);
			return;
		}
		sendRequest(options, resolve, reject, 0);

	})
};
function sendRequest(options, resolve, reject, retryCount) { //封装的发送请求函数
    const token = uni.getStorageSync('token');
    uni.request({
        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) { // HTTP状态码401表示未授权
                // 此处设置最多重新发送2次请求，防止无限循环
                if (retryCount < 2) {
                    wxlogin(options).then(() => {
                        sendRequest(options, resolve, reject, ++retryCount); // 重发请求
                    }).catch(reject);
                } else {
                    reject(res.data);
                }
            } else {
                // 请求成功，解析结果
                resolve(res.data);
            }
        },
        fail: (err) => {
            // 请求失败，抛出错误
            reject(err);
        }
    });
}
export async function wxlogin(options) { //封装的登录 登陆成功后获取信息
	return new Promise((resolve, reject) => {
		uni.getUserInfo({
			success: (UserRes) => {
				uni.login({
					desc: 'weixin',
					success: res => {
						// console.log(res, 'code');
						wx.request({
							url: myApi.login,
							method: 'POST',
							data: {
								weappCode: res.code,
								encryptedData: UserRes.encryptedData,
								iv: UserRes.iv
							},
							success: res => {
								console.log(res, '登录');
								if (res.data.success) {
									const userName = res.data.result
									uni.setStorageSync('token', userName
										.token);
									uni.setStorageSync('WXUSER',
										userName.wxUser);
									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() {
				this.loading = true
				try {
					const res = await this.$request({
						url: myApi.queryList,
						method: 'GET',
						data: {} ,// 传递的值
					});
					if (res.code == 200) {
						this.dataSource = res.result.records
					}
				} catch (e) {
					// 失败执行
					console.log(`这个接口错误：${myApi.queryList}`)
				} finally {
					// 销毁执行
					this.loading = false
				}
			},
			
		}
	};
</script>

<style lang="scss" scoped>

</style>