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

axios请求响应拦截器

目录

axios-拦截器

拦截器的作用

 请求拦截器-基本写法:

axios请求拦截器-统一设置token

需求:

核心步骤:

关键代码:

响应拦截器-基本写法:

axios响应拦截器-统一处理token失效

需求:

核心步骤:

关键代码:

axios响应拦截器-数据剥离

需求:

核心步骤:

关键代码:


axios-拦截器

作用: 请求发送之前,响应回来之后执行一些 公共 的逻辑

不难发现, 这其实就是一个顺序链表能实现的,把请求拦截器的函数推在前面, api请求的核心方法放在中间, 响应拦截器放在数组后面,遍历执行链表就实现了拦截器的顺序执行过程。

拦截器的作用

a. 统计api从发起请求到返回数据需要的时间

b. 配置公共的请求头,加载弹窗等

c. 对响应状态码做拦截,比入后端返回400或500的状态码, 返回对应错误信息

  1. 注册之后,调用接口
  2. 请求发送时--》执行请求拦截器--》服务器
  3. 服务器响应内容--》执行响应拦截器--》接收数据

 请求拦截器-基本写法:

// 添加请求拦截器
axios.interceptors.request.use(function (config) {// 在发送请求之前做些什么,比如: 统一设置token// 通过config可以获取请求的设置,比如headers可以获取(修改)请求头return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});

axios请求拦截器-统一设置token

通过请求拦截器统一设置token

需求:

  1. 通过请求拦截器统一设置token
  2. 设置一次之后后续调用接口不用单独设置

核心步骤:

  1. 添加请求拦截器
  2. 统一设置token
  3. 移除首页对应逻辑

关键代码:

  1. commons.js
// 添加请求拦截器
// 统一携带token
axios.interceptors.request.use(function (config) {// 可以通过headers,查看+设置请求头// config.headers['info'] = 'itheima666'// 每次发送请求,都会执行这个回调函数// console.log(config)// 在发送请求之前做些什么,比如: 统一设置tokenconst token = localStorage.getItem('token')// token存在,才携带if (token) {config.headers['Authorization'] = token}return config;
}, function (error) {// 对请求错误做些什么return Promise.reject(error);
});
 
  1. index.js
// 首页-统计数据
async function getData() {try {// 调用接口(登录成功之后才可以调用)const res = await axios({url: '/dashboard',// 通过axios请求拦截器统一携带})const overview = res.data.data.overview
​// 渲染数据Object.keys(overview).forEach(key => {document.querySelector(`.${key}`).innerText = overview[key]})} catch (error) {// 首页-登录状态过期// 判断token失效(状态码401):token过期,token被篡改// console.dir(error)if (error.response.status === 401) {// 删除缓存并提示用户localStorage.removeItem('username')localStorage.removeItem('token')// 使用普通用户可以理解的方式提示他们showToast('请重新登录')
​// 返回登录页setTimeout(() => {location.href = 'login.html'}, 1500)}}
}

响应拦截器-基本写法:

// 添加响应拦截器
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么,比如: 数据剥离return response;
}, function (error) {// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么: 比如统一处理token失效return Promise.reject(error);
});

axios响应拦截器-统一处理token失效

axios响应拦截器-统一处理token失效

需求:

  1. 通过 axios响应拦截器-统一处理token失效

核心步骤:

  1. 添加响应拦截器
  2. 统一处理token失效
  3. 移除首页对应逻辑

关键代码:

  1. common.js
// 添加响应拦截器
// 统一处理token过期
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。return response;
}, function (error) {// console.dir(error)// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么: 比如统一处理token失效// 统一处理token失效if (error.response.status === 401) {// 弹框提示用户showToast('请重新登录')// 删除缓存localStorage.removeItem('token')localStorage.removeItem('username')// 返回登录页setTimeout(() => {location.href = 'login.html'}, 1500)}return Promise.reject(error);
});
  1. index.js
// 首页-统计数据
async function getData() {// 调用接口(登录成功之后才可以调用)const res = await axios({url: '/dashboard',// 通过axios请求拦截器统一携带})const overview = res.data.data.overview
​// 渲染数据Object.keys(overview).forEach(key => {document.querySelector(`.${key}`).innerText = overview[key]}) 
}

axios响应拦截器-数据剥离

axios响应拦截器-数据剥离

需求:

  1. axios响应拦截器-数据剥离
  2. 页面中使用数据时少写一个data

核心步骤:

  1. 剥离data属性(响应拦截器)
  2. 调整数据使用逻辑(登录,注册,首页)

关键代码:

  1. commons.js
// 添加响应拦截器
// 统一处理token过期
// 数据剥离
axios.interceptors.response.use(function (response) {// 2xx 范围内的状态码都会触发该函数。// 对响应数据做点什么,比如: 数据剥离// 剥离data属性,页面中少写.data属性,直接可以获取到数据return response.data;
}, function (error) {// console.dir(error)// 超出 2xx 范围的状态码都会触发该函数。// 对响应错误做点什么: 比如统一处理token失效// 统一处理token失效if (error.response.status === 401) {// 弹框提示用户showToast('请重新登录')// 删除缓存localStorage.removeItem('token')localStorage.removeItem('username')// 返回登录页setTimeout(() => {location.href = 'login.html'}, 1500)}return Promise.reject(error);
});

  1. index.js:移除多余的.data
// 首页-统计数据
async function getData() {// 调用接口(登录成功之后才可以调用)const res = await axios({url: '/dashboard',// 通过axios请求拦截器统一携带})const overview = res.data.overview
​// 渲染数据Object.keys(overview).forEach(key => {document.querySelector(`.${key}`).innerText = overview[key]}) 
}
  1. register.js:移除多余的.data,try中
document.querySelector('#btn-register').addEventListener('click', async () => {// 1. 收集并校验数据const form = document.querySelector('.register-form')const data = serialize(form, { empty: true, hash: true })// console.log(data)const { username, password } = dataconsole.log(username, password)// 非空校验if (username === '' || password === '') {showToast('用户名和密码不能为空')return}
​// 长度校验if (username.length < 8 || username.length > 30 || password.length < 6 || password.length > 30) {showToast('用户名的长度为8-30,密码的长度为6-30')return}
​// 2. 数据提交try {// .post 请求方法 post,参数1:请求URL,参数2:提交的数据const res = await axios.post('/register', { username, password })// console.log(res)showToast(res.message)} catch (error) {// console.dir(error)showToast(error.response.data.message)}
})

  1. login.js:移除多余的.data,try中
document.querySelector('#btn-login').addEventListener('click', async () => {// 1. 收集并校验数据const form = document.querySelector('.login-form')const data = serialize(form, { empty: true, hash: true })console.log(data)const { username, password } = data// 非空判断if (username === '' || password === '') {showToast('用户名和密码不能为空')return}
​// 格式判断if (username.length < 8 || username.length > 30 || password.length < 6 || password.length > 30) {showToast('用户名长度8-30,密码长度6-30')return}
​// 2. 提交数据try {const res = await axios.post('/login', { username, password })// console.log(res)showToast(res.message)// 3. 缓存响应数据localStorage.setItem('token', res.data.token)localStorage.setItem('username', res.data.username)// 4. 跳转首页// 延迟一会在跳转,让提示框显示setTimeout(() => {// login.html和index.html的相对关系location.href = './index.html'}, 1500)
​} catch (error) {// console.dir(error)showToast(error.response.data.message)}
​
})

相关文章:

axios请求响应拦截器

目录 axios-拦截器 拦截器的作用 请求拦截器-基本写法: axios请求拦截器-统一设置token 需求: 核心步骤: 关键代码: 响应拦截器-基本写法: axios响应拦截器-统一处理token失效 需求: 核心步骤: 关键代码: axios响应拦截器-数据剥离 需求: 核心步骤: 关键代码: ax…...

Python 中单例模式实现的几种方式

在设计模式中&#xff0c;单例模式是经常被提及和使用的一种模式。它保证一个类只有一个实例&#xff0c;并提供全局访问点。在Python中&#xff0c;有多种实现单例模式的方法。那么&#xff0c;如何选择合适的方法来实现单例模式呢&#xff1f; 单例模式在Python中的几种实现方…...

mysql数据库触发器同步数据

首先检查数据源库是否支持触发器&#xff0c;show ENGINES&#xff0c;如果FEDERATED是NO&#xff0c;表示未开启&#xff0c;如需开启&#xff0c;再mysql配置文件中&#xff0c;添加federated配置到mysqld下面。 一、同服务器不同库触发器同步&#xff0c;这里只举例插入数据…...

Prometheus-v2.45.0+Grafana+邮件告警

目录 普罗米修斯监控架构介绍 Prometheus 监控架构 1. 数据抓取&#xff08;Scraping&#xff09; 2. 时序数据库&#xff08;TSDB&#xff09; 3. 数据模型 4. PromQL 查询语言 5. 告警&#xff08;Alerting&#xff09; 6. Alertmanager 7. 可视化&#xff08;Visu…...

LeetCode——572. 另一颗树的子树

通过万岁&#xff01;&#xff01;&#xff01; 题目&#xff1a;给你两棵树&#xff0c;然后问subRoot是不是root的子树。也就是root某个节点的所有孩子节点在值和结构上完全与subRoot相同。思路&#xff1a;我的思路比较简单&#xff0c;就是遍历root&#xff0c;遇到root中…...

Spring Boot整合MyBatis-Flex

说明&#xff1a;MyBatis-Flex&#xff08;官网地址&#xff1a;https://mybatis-flex.com/&#xff09;&#xff0c;是一款数据访问层框架&#xff0c;可实现项目中对数据库的访问&#xff0c;类比MyBatis-Plus。本文介绍&#xff0c;在Spring Boot项目整合MyBatis-Flex。 创…...

重塑未来体验:边缘计算与云原生的完美邂逅

&#x1f407;明明跟你说过&#xff1a;个人主页 &#x1f3c5;个人专栏&#xff1a;《未来已来&#xff1a;云原生之旅》&#x1f3c5; &#x1f516;行路有良友&#xff0c;便是天堂&#x1f516; 目录 一、引言 1、云原生的兴起 2、边缘计算的兴起 二、边缘计算基础 …...

浅谈基础数论(c++)

目录 一些常见的符号表示阶乘定理 快速幂模板题代码扩展&#xff1a;矩阵快速幂主要作用 欧拉函数扩展积性函数 欧拉函数求法筛选法求欧拉函数&#xff08;积性函数&#xff09; 扩展欧几里得裴蜀定理问题分析代码 问题分析 同余与逆元如何求解逆元扩展欧几里得 例题讲解X-Magi…...

jdk 17新特性 sealed 关键字

通俗理解 sealed 关键字就是给对象继承加了权限控制一样&#xff0c;你必须在我的规则范围内才可以继承我的类 使用 permits 关键字控制允许哪些子类继承 子类必须加以下三个关键字&#xff1a; final 最终继承类&#xff08;继承到这个类就不允许再往下继承了&#xff09;n…...

在仪器计量校准中,无尘车间洁净室检测有哪些方法和流程?

仪器计量校准行业内&#xff0c;无尘车间洁净室检测可以说是较为热门的业务&#xff0c;因为其预算高&#xff0c;且检测流程不是太繁琐&#xff0c;很多仪器计量校准机构也是设立相关实验室&#xff0c;专门处理相关仪器的检测。不过虽然许多机构想要涉足该领域&#xff0c;但…...

【跨时代】第四次工业革命彻底来袭!什么是AI+

你有没有一种很割裂的感觉&#xff0c;就是在短视频里&#xff0c;AI已经要改变全世界了 但自己一用&#xff0c;却发现只能和AI聊聊天 画几张图 难道是姿势不对&#xff1f;但具体是哪里不对呢。 作为一个老牌程序员&#xff0c;我前面分享了很多计算机相关内容&#xff0c;总…...

前端性能优化-纲领篇

前端性能优化 本模块将梳理前端性能优化的相关知识点 从浏览器输入 URL 到页面展示发生了什么 完整版请查看[Browser_网络_安全]的部分&#xff0c;这里只是简单的梳理一下 DNS 解析TCP 连接浏览器发出 HTTP 请求服务器处理请求并返回 HTTP 报文浏览器解析渲染页面 性能优…...

深度学习-----------数值稳定性

目录 神经网络的梯度数值稳定性的常见两个问题例子&#xff1a;MLP 梯度爆炸梯度爆炸的问题 梯度消失梯度消失的问题 总结模型初始化和激活函数让训练更加稳定让每层的方差是一个常数 权重初始化正向均值和方差正向均值正向方差 反向均值和方差Xavier初始正向和反向的均值和方差…...

SpringBoot项目接口可以承受的调用次数

一个Spring Boot接口能够承受的调用次数主要取决于几个因素&#xff0c;包括但不限于&#xff1a; 服务器硬件&#xff1a;CPU、内存、硬盘I/O速度以及网络带宽都会直接影响接口的处理能力和并发量。操作系统和JVM配置&#xff1a;操作系统调度策略、JVM的内存分配、垃圾回收机…...

抽象代数精解【8】

文章目录 希尔密码矩阵矩阵基本概念行列式基本概念特殊矩阵关于乘法运算构成群 加解密原理密钥加密函数解密函数 Z 26 上的运算&#xff08; Z 256 与此类似&#xff09; Z_{26}上的运算&#xff08;Z_{256}与此类似&#xff09; Z26​上的运算&#xff08;Z256​与此类似&…...

数据结构与算法 - 二叉树

1. 概述 二叉树是这么一种树状结构&#xff1a;每个节点最多有两个孩子&#xff0c;左孩子和右孩子 完全二叉树&#xff1a;是一种二叉树结构&#xff0c;除了最后一层以外&#xff0c;每一层都必须填满&#xff0c;填充时要遵循从左到右 平衡二叉树&#xff1a;是一种二叉树…...

Spring Cloud Gateway如何给一个请求加请求头

在Spring Cloud Gateway中&#xff0c;可以通过编写一个GlobalFilter来给所有请求加请求头&#xff0c;或者通过编写一个SpecificFilter来给特定路径的请求加请求头。 全局过滤器&#xff08;GlobalFilter&#xff09;的实现方式如下&#xff1a; Configuration public class…...

chromedriver版本下载地址汇总chromedriver所有版本下载地址汇总国内源下载

谷歌浏览器版本经常会升级&#xff0c;chromedriver 也得下载匹配的版本 chromedriver 114以前版本下载地址https://registry.npmmirror.com/binary.html?pathchromedriver/ windows版本请访问链接&#xff1a;https://blog.csdn.net/FL1768317420/article/details/139712108 …...

Go语言与Windows系统

1.获取屏幕尺寸 源自&#xff1a;Golang通过使用GetSystemMetrics获取系统的分辨率 - 完美代码 (perfcode.com) package mainimport ("syscall""fmt" )const (SM_CXSCREEN uintptr(0) // X Size of screenSM_CYSCREEN uintptr(1) // Y Size of screen …...

JAVA—面向对象编程高级

学习了一定基础后&#xff0c;开始更加深入的学习面向对象&#xff0c;包含static,final两个关键字&#xff0c;面向对象编程三大特征之继承和多态。以及对于抽象类&#xff0c;内部类&#xff0c;接口&#xff0c;枚举&#xff0c;泛型的学习。 目录 1.static &#xff08;…...

[BJDCTF2020]Mark loves cat1

打开题目 发现这么多链接&#xff0c;以为要一点点去找功能上的漏洞。当你源代码&#xff0c;dirsearch&#xff0c;抓包等等操作之后&#xff0c;发现什么都没有。所以这题又是一道源码泄露题&#xff0c;上GItHack。扫描结果如下 http://63f29a80-e08b-43ae-a6d0-8e70fb02ea…...

微信答题小程序产品研发-用户操作流程设计

在答题小程序中&#xff0c;用户流程是指用户从进入小程序开始&#xff0c;到完成答题、查看结果、进行练习等一系列操作的步骤。 这里我画了一张用户流程图&#xff0c;展示用户在小程序中的主要操作流程。以及对每个步骤的详细说明。这里分两种角色&#xff0c;用户和管理员…...

目标检测——YOLOv10: Real-Time End-to-End Object Detection

YOLOv10是在YOLOv8的基础上&#xff0c;借鉴了RT-DETR的一些创新点改进出来的 标题&#xff1a;YOLOv10: Real-Time End-to-End Object Detection论文&#xff1a;https://arxiv.org/pdf/2405.14458源码&#xff1a;https://github.com/THU-MIG/yolov10 1. 论文介绍 在过去的几…...

堡垒机简单介绍

堡垒机&#xff08;Bastion Host&#xff09;&#xff0c;也被称为跳板机、跳板服务器或堡垒服务器&#xff0c;是一种在网络安全中扮演重要角色的设备或服务。以下是关于堡垒机的详细介绍&#xff1a; 一、定义与功能 堡垒机是一种用于控制和管理网络安全的重要工具&#xf…...

【星闪开发连载】WS63E 星闪开发板和hi3861开发板的对比

此次星闪开发者体验官活动使用的开发板都是NearLink_DK_WS63E开发板&#xff0c;它和NearLink_DK_WS63开发板的区别在于具有雷达感知功能。从开发板的照片也可以看到WS63E有一个雷达天线接口。 我们把WS63E开发板和hi3861开发板的功能做了简单的对比&#xff0c;见下表。 参数…...

Python接口自动化测试框架(实战篇)-- Jenkins持续集成

文章目录 一、前言二、[Jenkins](https://www.jenkins.io/)2.1、环境搭建2.2、插件准备2.3、创建job2.4、小结2.5、构建策略2.6、报告展示2.7、扩展三、总结一、前言 温馨提示:在框架需要集成jenkins的时候,一定要注意环境切换问题,如果jenkins和开发环境是同样的系统且都有…...

【leetcode】根据二叉树创建字符串、二叉树的前中后遍历(非递归链表实现二叉树)

Hi~&#xff01;这里是奋斗的明志&#xff0c;很荣幸您能阅读我的文章&#xff0c;诚请评论指点&#xff0c;欢迎欢迎 ~~ &#x1f331;&#x1f331;个人主页&#xff1a;奋斗的明志 &#x1f331;&#x1f331;所属专栏&#xff1a;数据结构、LeetCode专栏 &#x1f4da;本系…...

【RabbitMQ】RabbitMQ交换机概述

一、交换机的类型 RabbitMQ提供了以下四种主要类型的交换机&#xff1a; 直连交换机&#xff08;Direct Exchange&#xff09; 特点&#xff1a;直连交换机是最基本的交换机类型&#xff0c;它根据完全匹配的路由键&#xff08;Routing Key&#xff09;将消息路由到绑定的队列…...

ROS2从入门到精通4-6:路径平滑插件开发案例(以B样条曲线平滑为例)

目录 0 专栏介绍1 ROS2路径平滑器介绍2 平滑器插件编写模板2.1 构造平滑器插件类2.2 注册并导出插件2.3 编译与使用插件 3 基于B样条曲线的路径平滑 0 专栏介绍 本专栏旨在通过对ROS2的系统学习&#xff0c;掌握ROS2底层基本分布式原理&#xff0c;并具有机器人建模和应用ROS2…...

Tensorflow训练视觉模型(CPU)

目录 零、模型下载 一、清理C盘 二、 配置环境 三、运行项目前提操作 &#xff08;1&#xff09;根据自己的项目设置路径。每次激活虚拟环境&#xff08;tensorflow115&#xff09;都得重设一次 &#xff08;2&#xff09;执行setup 这个项目的路径移动了位置也需要重设一…...