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

本文介绍: 3、新建一个文件request.js。2、新建一个文件app.js。

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>

原文地址:https://blog.csdn.net/weixin_46166771/article/details/135859436

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。

如若转载，请注明出处：http://www.7code.cn/show_62893.html

如若内容造成侵权/违法违规/事实不符，请联系代码007邮箱：suwngjj01@126.com进行投诉反馈，一经查实，立即删除！

声明：本站所有文章，如无特殊说明或标注，均为本站原创发布。任何个人或组织，在未征得本站同意时，禁止复制、盗用、采集、发布本站内容到任何网站、书籍等各类媒体平台。如若本站内容侵犯了原著者的合法权益，可联系我们进行处理。