uniapp 微信小程序 封装axios 包含请求拦截、响应拦截、无感刷新令牌功能

前言:
1、为什么不适用uniapp自带的请求功能?
答:uniapp自带的请求功能,再刷新了令牌后,重新请求返回的数据无法返回给发起请求的方法。也就是说,刷新令牌后重新发起的请求和第一次发起请求的方法是割裂的。
2、封装文件中,我设置了无感刷新令牌功能。我后台的判断逻辑是,当前端请求的令牌过期时间和当前时间比小于10分钟时,刷新令牌。
 

一、安装axios
1.1、使用HBuilder打开uniapp项目,点击视图->显示终端,打开npm操作页面。
1.2、如果项目中还没有“package.json”文件,请先初始化项目。

npm init -y

1.3、安装axios,建议锁定低版本(使用uniapp-vue3版本时,axios的版本需要0.26.0以下)。

npm i axios@0.26.0

 1.4 在main.js中配置axios

import axios from 'axios'//引入axios
import * as request from '@/common/api/request.js'//自定义请求封装文件
Vue.prototype.$http = request //封装的请求方法// 解决uniapp 适配axios请求,避免报adapter is not a function错误
// 此配置也可以放在自定义请求封装文件中(例如 request.js)
axios.defaults.adapter = config => {return new Promise((resolve, reject) => {let settle = require('axios/lib/core/settle');let buildURL = require('axios/lib/helpers/buildURL');uni.request({method: config.method.toUpperCase(),url: config.baseURL + buildURL(config.url, config.params, config.paramsSerializer),header: config.headers,data: config.data,dataType: config.dataType,responseType: config.responseType,sslVerify: config.sslVerify,complete: function complete(response) {response = {data: response.data,status: response.statusCode,errMsg: response.errMsg,header: response.header,config: config};settle(resolve, reject, response);}})})
}

二、自定义请求封装文件 request.js,我的文件路径是 /根目录/common/api/request.js。

import axios from 'axios' // 引入axios
import store from '@/store/index.js'//引入store仓库function getToken() { //获取令牌let token = store.state.accountValue.accessToken //store仓库中的令牌if (!token) { //令牌不存在,显示登录弹窗openLoginDialog()}return token
}//令牌过期,刷新令牌请求
function refreshToken() {return service.get('/account/user/refresh/login').then(res => res)
}//设置store及微信缓存中的账号信息
function setAccountInfo(accountInfo) {store.commit('accountValue/SET_ACCOUNT_INFO', accountInfo) //修改store中的账号信息//存储账号信息到微信缓存中wx.setStorage({key: "userInfo",data: JSON.stringify(accountInfo)})
}axios.defaults.headers['Content-Type'] = 'application/json;charset=utf-8'
// 创建axios实例
const baseUrl = store.state.constantValue.hostUrl + store.state.constantValue.port //域名/地址公共前缀
const appid = store.state.constantValue.appid //小程序的appid
const requestTimeout = store.state.constantValue.requestTimeout //默认的请求超时时间,单位毫秒
const service = axios.create({baseURL: baseUrl, //axios的默认请求地址前缀timeout: requestTimeout //默认的请求超时时间,单位毫秒
})let requests = [] // 重试队列数组,把需要刷新令牌的请求都放入这个数组中,每一项将是一个待执行的函数形式let common = {//默认的请求配置信息data: {},header: {"Content-Type": "application/json","Content-Type": "application/x-www-form-urlencoded"},method: "GET",dataType: "json"
}// 请求拦截器
service.interceptors.request.use(config => {// 每次发送请求之前判断vuex中是否存在token// 如果存在,则统一在http请求的headers都加上token,这样后台根据token判断你的登录情况// 即使本地存在token,也有可能token是过期的,所以在响应拦截器中要对返回状态进行判断config.method = config.method || common.method;if (config.method !== 'GET') {config.data = config.data || common.data;}config.dataType = config.dataType || common.dataType;config.header = config.header || common.header;if (config.header.NeedToken === 'NEED') { //如果需要访问令牌const token = getToken();!isNull(token) && (config.headers.Authorization = 'Bearer ' + token);}return config;},error => {return Promise.error(error);});// 响应拦截器
service.interceptors.response.use(response => {// 如果返回的状态码为200,说明接口请求成功,可以正常拿到数据// 否则的话抛出错误if (response.status === 200) {let code = response.data.code //code为自定义的后台响应codeif (code === 20009 || code === 20010) { //未登录或者登录异常,需要重新登录时openLoginDialog()//打开登录弹窗return Promise.resolve(response.data); //返回响应结果} else {if (code === 20017) { //后台要求刷新令牌const config = response.configif (!store.state.constantValue.isRefreshing) { //如果正在刷新令牌状态为false//设置正在刷新令牌状态为true,进入更新令牌阶段store.commit('constantValue/SET_IS_REFRESHING', true)//获取刷新令牌请求return refreshToken().then(res => {if (res.code === 20000) {// 刷新令牌成功,设置store及微信缓存中的账号信息const accountInfo = res.datasetAccountInfo(accountInfo)//已经刷新了令牌,重新发起重试队列数组中的请求requests.forEach(cb => cb(accountInfo.accessToken))// 完成后清空这个数组requests = []//重置当前请求的配置,重新发起请求config.headers.Authorization = 'Bearer ' + accountInfo.accessTokenconfig.baseURL = baseUrl //axios的默认请求地址前缀config.timeout = requestTimeout //默认的请求超时时间return service(config) //重新发起请求,返回的就是当前请求} else {openLoginDialog()//打开登录弹窗}}).catch(rej => { //令牌刷新发生错误openLoginDialog()//打开登录弹窗}).finally(() => {//完成之后设置正在刷新令牌状态为falsestore.commit('constantValue/SET_IS_REFRESHING', false)})} else { //如果正在刷新令牌状态为trueif (config.header.NeedToken === 'NEED') { //请求需要令牌// 返回一个未执行resolve的promisereturn new Promise((resolve) => {// 将resolve放进重试队列数组,用一个函数形式来保存,等令牌刷新后直接执行requests.push((token) => {config.headers.Authorization = 'Bearer ' + tokenresolve(service(config))})})}}}return Promise.resolve(response.data) //返回响应信息}} else { //状态码不为200时return Promise.reject(response.data) //返回响应异常信息}},error => {return Promise.reject(error) //返回响应错误信息}
);export default service;

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/228478.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

Django去访问web api接口Object of type Session is not JSON serializable

解决方案:settings.py中加入 :SESSION_SERIALIZER django.contrib.sessions.serializers.PickleSerializer 事由:Django去访问一个web api接口,两次连接之间需要通过Session()保持身份验证。 def sendCode(request): mobile jso…

freeRTOS使用

创建第一个FreeRTOS程序 1、官网源码下载 (1)进入FreeRTOS官网FreeRTOS professional services for application and RTOS development and consulting. FreeRTOS is an Open Source Code RTOS (2)点击下载FreeRTOS 2、处理目录 &…

基于多智能体系统一致性算法的电力系统分布式经济调度策略MATLAB程序

微❤关注“电气仔推送”获得资料(专享优惠) 参考文献: 主要内容: 应用多智能体系统中的一致性算法,以发电机组的增量成本和柔性负荷的增量效益作为一致性变量,设计一种用于电力系统经济调度的算法&#x…

openwrt中taiscale自动安装脚本详解

openwrt中taiscale自动安装脚本详解 一、代码仓库地址 https://github.com/adyanth/openwrt-tailscale-enabler 二、代码仓库中脚本文件详解 主要包含三个脚本分别是etc/init.d/tailscale、usr/bin/tailscale、usr/bin/tailscaled ,接下来逐个分析一下脚本中的具…

shell提示符换行

shell 默认的提示符形如 [<用户名><主机名> <路径>]$&#xff0c;其格式串定义形如 PS1"[\u\h \w]\n\$ "&#xff0c;可能在 ~/.bashrc&#xff0c;也可能在 /etc/bashrc。 有时路径太长&#xff0c;但想保留方便复制&#xff0c;于是想将提示符换…

3.1【窗口】窗口简介与窗口组

一,窗口简介 Windows用于显示内容,并将不同生成的内容组合在一起。每个不同的呈现器都可以在同一个进程中,也可以在另一个或多个进程中。 Screen中的窗口概念与你在传统窗口系统中可能习惯的略有不同。在Screen中,当内容来自不同来源时,应用程序被分成几个窗口,当应用程…

Linux查看进程PID以及杀掉进程的方法

目录 参考链接 前言 查看进程PID PS命令 ps -le命令 查找父进程 杀死进程 参考链接 【Linux 】 ps命令详解&#xff0c;查看进程pid_linux查看pid 对应的程序-CSDN博客 Linux查看进程PID的方法&#xff08;linux查进程的pid&#xff09;附带自动kill 掉_linux查看pid 对…

Fanuc-Focas_库函数

Fanuc-Focas库函数是一种在Fanuc系统中广泛使用的库函数&#xff0c;它包含了多种与机床控制器相关的功能和接口。以下是针对这些方面的简单描述和相关库函数。 系统函数 initializeSystem(): 初始化系统&#xff0c;进行必要的设置和启动。systemStatus(): 获取系统状态&#…

Python基础入门:语法与数据类型

Python基础入门&#xff1a;语法与数据类型 一、引言 Python是一种简单易学、功能强大的编程语言&#xff0c;广泛应用于数据分析、机器学习、Web开发等领域。本文将介绍Python的基础语法和数据类型&#xff0c;帮助初学者快速入门。 二、Python基础语法 缩进 Python中的缩…

DDA 算法

CAD 算法是计算机辅助设计的算法&#xff0c;几何算法是解决几何问题的算法 CAD 算法是指在计算机辅助设计软件中使用的算法&#xff0c;用于实现各种设计和绘图功能&#xff0c;CAD 广泛应用于建筑、机械、电子等领域&#xff0c;可以大大提高设计效率和精度 绘图算法是 CAD…

机器学习算法---聚类

类别内容导航机器学习机器学习算法应用场景与评价指标机器学习算法—分类机器学习算法—回归机器学习算法—聚类机器学习算法—异常检测机器学习算法—时间序列数据可视化数据可视化—折线图数据可视化—箱线图数据可视化—柱状图数据可视化—饼图、环形图、雷达图统计学检验箱…

大数据机器学习与深度学习——过拟合、欠拟合及机器学习算法分类

大数据机器学习与深度学习——过拟合、欠拟合及机器学习算法分类 过拟合&#xff0c;欠拟合 针对模型的拟合&#xff0c;这里引入两个概念&#xff1a;过拟合&#xff0c;欠拟合。 过拟合&#xff1a;在机器学习任务中&#xff0c;我们通常将数据集分为两部分&#xff1a;训…

Linux 创建一个service并设置开机启动

Linux 创建一个service并设置开机启动 为了在Systemd中创建并配置Node Exporter服务&#xff0c;你可以按照以下步骤进行&#xff1a; 创建Service文件&#xff1a; 使用文本编辑器创建Node Exporter的Service文件。在终端中执行&#xff1a; sudo nano /etc/systemd/system/n…

03进程基础-学习笔记

Process 进程 进程为操作系统的基本调度单位&#xff0c;占用系统资源(cpu,内存)完成特定任务&#xff0c;所有说进程是操作系统的标准执行单元 进程与程序的差别 程序是静态资源&#xff0c;存储与电脑磁盘中(disk磁盘资源)程序执行后会创建进程&#xff0c;负责完成功能&a…

Python-flask 入门代码

python与pycharm安装 过程略&#xff0c;网上很多&#xff0c;记得为pycharm配置默认解释器 虚拟环境 pipenv # 全局安装虚拟环境 # 可加-U参数&#xff0c;明确全局安装&#xff0c;不加好像也可以? pip3 install pipenv #检查安装情况 pipenv --version # ---控制台输出…

国内信创软件的发展环境及驱动因素相关思考

目录 一、信创的发展环境 自主可控的必要性 政策推动下的信创行业投入与产出持续偏热 企业数字化需求保持强势增长 实体经济数字化转型面临的挑战与需求 技术与业务深度融合 信创软件的落地进度 二、信创软件的多元化的发展驱动力 从政策驱动向产品性价方向转变 数转…

Word Excel模版引擎

这里写目录标题 背景Word模板引擎Excel模板引擎 背景 Word模板引擎 poi-tl Excel模板引擎 JXLS

机械硬盘和固态硬盘速度测试

利用ubuntu自带的disk磁盘管理软件对手头的三个硬盘做压力测试&#xff0c;disk软件挺好用的&#xff0c;再也不用命令了。 第一个是致态的1T固态硬盘&#xff0c;速度1.8GB/S。 ST机械硬盘&#xff0c;速度只有300多MB/S. 三星固态硬盘&#xff0c;速度1.4GB/s。

汽车发动机市场调研:预计2029年将达到642亿美元

过去汽车发动机行业快速发展&#xff0c;很多产品都出现供不应求&#xff0c;甚至加价销售的状况&#xff0c;而随着产能过剩、需求下滑&#xff0c;未来汽车发动机行业的价格竞争将愈发激烈&#xff0c;形成新的供需矛盾。根据动力源类型&#xff0c;汽车可分类为传统燃油汽车…

MATLAB2022安装下载教程

安装包需从夸克网盘自取&#xff1a; 链接&#xff1a;https://pan.quark.cn/s/373ffc9213a1 提取码&#xff1a;N7PW 1.将安装包解压 2.以管理员的身份运行文件夹中的setup文件 3.点击高级选项--->我有文件安装密钥 4. 选择【是】&#xff0c;进入下一步 5.输入密钥 0532…