当前位置：首页 > news >正文

小程序无感刷新

news 2025/6/23 8:58:11

下载wechat-http依赖

npm install wechat-http

封装请求拦截器和相应拦截器，借助refreshToken实现无感刷新

// 导入 http 模块
import http from 'wechat-http'
// 基础路径，同时需添加合法请求域名
http.baseURL = 'https://live-api.itheima.net'
// 配置请求拦截器
http.intercept.request = function (options) {// 扩展头信息const defaultHeader = {}// 身份认证defaultHeader.Authorization = 'Bearer ' + getApp().token// 与默认头信息合并options.header = Object.assign({}, defaultHeader, options.header)// 处理后的请求参数return options
}
// 响应拦截器，返回核心数据 data
http.intercept.response = async ({data,config
}) => {// 如果状态码为401，则表明token已失效if (data.code === 401) {// 获取应用实例const app = getApp()// 1.3 状态为 401 且接口为 /refreshToken 表明 refreshToken 也过期了if (config.url.includes('/refreshToken')) {// 获取当前页面的路径，保证登录成功后能跳回到原来页面const pageStack = getCurrentPages()const currentPage = pageStack.pop()const redirectURL = currentPage.route// 跳由跳转（登录页面）return wx.redirectTo({url: '/pages/login/index?redirectURL=/' + redirectURL,})}// 1.1 调用接口获取新的tokenconst res = await http({url: '/refreshToken',method: 'POST',header: {Authorization: 'Bearer ' + app.refreshToken,},})// 检测接口是否调用成功if (res.code !== 10000) return wx.utils.toast('更新token失败了!')// 重新存储新的 tokenapp.setToken('token', res.data.token)app.setToken('refreshToken', res.data.refreshToken)// 1.2 获取到原来接口请求的参数config = Object.assign(config, {header: {// 更新后的 tokenAuthorization: 'Bearer ' + res.data.token,},})// 重新发请求return http(config)}// 只保留data数据，其它的都过滤掉return data
}// 普通的模块导出
export default http