在uniapp中封装请求接口 (带刷新token)

javascript 复制代码
import { apiUrl } from '@/config/global-config.js'
import { useUserStore } from '../stores'
import { usePageRoute } from "@/composable/usePageRoute.js"

// 默认配置
const DEFAULT_CONFIG = {
	timeout: 60000,
	// showLoading: true,
	// loadingText: '加载中...'
}


// 添加刷新token的方法
const refreshToken = async () => {
	const userStore = useUserStore()
	try {
		const response = await uni.request({
			url: apiUrl + '/auth/refresh',  // 替换成你的刷新token接口
			method: 'POST',
			header: {
				'Content-Type': 'application/json',
				'Authorization': `Bearer ${userStore.token}`
			}
		})

		if (response.data.code === 200) {
			userStore.setToken(response.data.data.token)
			return true
		}
		return false
	} catch (error) {
		return false
	}
}

// 添加一个变量来存储刷新token的Promise
let isRefreshing = false
let refreshSubscribers = []

// 执行等待的请求
const onRefreshed = (token) => {
	refreshSubscribers.forEach(callback => callback(token))
	refreshSubscribers = []
}

// 添加请求到队列
const addSubscriber = (callback) => {
	refreshSubscribers.push(callback)
}


// 请求拦截器
const requestInterceptor = (config) => {
	const userStore = useUserStore()
	const token = userStore.token
	const isMapApi = /apis\.map\.qq\.com/.test(config.url)

	if (token && !isMapApi) {
		config.header.Authorization = `Bearer ${token}`
	}

	// if (config.showLoading) {
	// 	uni.showLoading({ title: config.loadingText })
	// }

	return config
}

// 响应拦截器
const responseInterceptor = async (response) => {
	const userStore = useUserStore()
	// const { code, msg, data } = response.data
	const code = response.data.code
	const msg = response.data.msg
	const data = response.data
	// const data = response.data.data
	// console.log(data,code,msg);



	switch (code) {
		case 200:
			return data
		// return Promise.resolve(data)
		case 401: {
			// 如果是刷新token的请求失败,直接登出
			 if (config.url.includes('/auth/refresh')) {
			 	await handleLogout()
			 	return Promise.reject(new Error('登录已失效'))
			 }

			 // 处理token刷新
			 if (!isRefreshing) {
			 	isRefreshing = true

			 	try {
			 		const refreshResult = await refreshToken()
			 		if (refreshResult) {
			 			const newToken = userStore.token
			 			onRefreshed(newToken)
			 			// 重试当前请求
			 			config.header.Authorization = `Bearer ${newToken}`
			 			return request(config)
			 		} else {
			 			await handleLogout()
			 			return Promise.reject(new Error('登录已失效'))
			 		}
			 	} finally {
			 		isRefreshing = false
			 	}
			 }
			 // 返回一个Promise,将请求暂存
			 return new Promise((resolve) => {
			 	addSubscriber((token) => {
			 		config.header.Authorization = `Bearer ${token}`
			 		resolve(request(config))
			 	})
			 })

			// 上面是刷新token 如果没有刷新token的接口直接登出  把上面的401代码注释 解开下面的两行注释
			//await handleLogout()
			//return Promise.reject(new Error('登录已失效'))

		}
		default:
			uni.showToast({
				icon: 'none',
				title: msg || '请求错误',
				duration: 2000
			})
			return Promise.reject(new Error(msg || '请求错误'))
	}
}

// 添加统一的登出处理方法
const handleLogout = async () => {
	const userStore = useUserStore()
	const pageRoute = usePageRoute()
	const fullPagePath = pageRoute.getCurrentFullPagePath()
	uni.setStorageSync('fullPage', fullPagePath)

	uni.$msgBox('登录已失效,请重新登录', 2000)
	userStore.clearToken()
	userStore.clearUser()
	await uni.$delay(2000)
	uni.reLaunch({ url: '/pages/login/login' })
}

// 统一请求方法
const request = (options = {}) => {
	const config = {
		...DEFAULT_CONFIG,
		...options,
		header: {
			'Content-Type': 'application/json',
			...options.header
		}
	}

	config.url = apiUrl + config.url

	// 应用请求拦截器
	const interceptedConfig = requestInterceptor(config)

	return new Promise((resolve, reject) => {
		uni.request({
			...interceptedConfig,
			success: async (res) => {
				try {
					const result = await responseInterceptor(res)
					resolve(result)
				} catch (error) {
					reject(error)
				}
			},
			fail: (error) => {
				uni.showToast({
					icon: 'none',
					title: '网络错误,请检查网络连接',
					duration: 2000
				})
				reject(error)
			},
			complete: () => {
				// if (config.showLoading) {
				// 	uni.hideLoading()
				// }
			}
		})
	})
}

// 导出请求方法
export const $get = (url, data, options = {}) => {
	return request({
		url,
		data,
		method: 'GET',
		...options
	})
}

export const $post = (url, data, options = {}) => {
	return request({
		url,
		data,
		method: 'POST',
		...options
	})
}

// 挂载到全局
uni.$get = $get
uni.$post = $post
相关推荐
糕冷小美n7 小时前
elementuivue2表格不覆盖整个表格添加固定属性
前端·javascript·elementui
小哥不太逍遥7 小时前
Technical Report 2024
java·服务器·前端
沐墨染7 小时前
黑词分析与可疑对话挖掘组件的设计与实现
前端·elementui·数据挖掘·数据分析·vue·visual studio code
anOnion7 小时前
构建无障碍组件之Disclosure Pattern
前端·html·交互设计
threerocks7 小时前
前端将死,Agent 永生
前端·人工智能·ai编程
问道飞鱼8 小时前
【前端知识】Vite用法从入门到实战
前端·vite·项目构建
爱上妖精的尾巴8 小时前
8-10 WPS JSA 正则表达式:贪婪匹配
服务器·前端·javascript·正则表达式·wps·jsa
shadow fish9 小时前
react学习记录(三)
javascript·学习·react.js
小疙瘩10 小时前
element-ui 中 el-upload 多文件一次性上传的实现
javascript·vue.js·ui
Aliex_git10 小时前
浏览器 API 兼容性解决方案
前端·笔记·学习