Axios配置中的请求响应拦截器

在 Axios 中,你可以配置请求拦截器(Request Interceptors)和响应拦截器(Response Interceptors)来处理在请求发送到服务器之前和服务器响应返回客户端之后的逻辑。

请求拦截器

请求拦截器可以在请求被发送到服务器之前对其进行修改。例如,你可能想在所有请求中添加认证令牌(token)、设置请求头、或者对请求数据进行某种转换。

以下是如何在 Axios 中设置请求拦截器的示例:

axios.interceptors.request.use(function (config) {
// 在发送请求之前做些什么
// 例如,添加请求头或转换数据
// 可以在这里设置全局的token
if (localStorage.getItem('token')) {
config.headers.Authorization = 'Bearer ' + localStorage.getItem('token');
}
return config;
}, function (error) {
// 对请求错误做些什么
return Promise.reject(error);
});

响应拦截器

响应拦截器可以在服务器响应返回客户端之后对其进行处理。例如,你可能想检查响应状态码,如果状态码表示错误,你可能想进行某种错误处理或重试逻辑。或者,你可能想对响应数据进行某种转换。

以下是如何在 Axios 中设置响应拦截器的示例:

axios.interceptors.response.use(function (response) {
// 对响应数据做点什么
// 例如,检查响应状态码,如果状态码表示错误,进行错误处理
if (response.status >= 200 && response.status < 300) {
// 如果响应成功,返回数据
return response.data;
} else {
// 如果响应失败,抛出错误
return Promise.reject(response);
}
}, function (error) {
// 对响应错误做点什么
if (error.response) {
// 请求已发出,但服务器响应的状态码不在 2xx 范围内
console.log(error.response.data);
console.log(error.response.status);
console.log(error.response.headers);
} else if (error.request) {
// 请求已发出,但没有收到响应
// 例如,请求超时或请求被取消
console.log(error.request);
} else {
// 发送请求时发生了一些事情,导致请求没有发出
console.log('Error', error.message);
}
return Promise.reject(error);
});

移除拦截器

在某些情况下,你可能需要移除之前添加的拦截器。你可以通过返回拦截器函数时的引用来做到这一点。例如:

const myRequestInterceptor = axios.interceptors.request.use(function (config) {
// ...
});
// 稍后,当你想移除这个拦截器时:
axios.interceptors.request.eject(myRequestInterceptor);

注意:eject 方法在 Axios 的较新版本中已被 remove 方法取代。所以你应该使用 remove 而不是 eject

假设我们正在开发一个需要身份验证的 Web 应用,我们将使用 Axios 发起 HTTP 请求,并使用拦截器来处理身份验证和响应数据。

安装 Axios

首先,确保你已经安装了 Axios。如果还没有安装,可以通过 npm 或 yarn 进行安装:

npm install axios
# 或者
yarn add axios

配置 Axios 拦截器

在项目的某个文件中(比如 api.js 或 axiosConfig.js),我们可以配置 Axios 的拦截器:

import axios from 'axios';
// 创建 Axios 实例
const instance = axios.create({
baseURL: 'https://api.example.com', // 你的 API 基础 URL
timeout: 5000, // 请求超时时间
});
// 请求拦截器
instance.interceptors.request.use(
(config) => {
// 在发送请求之前做些什么
// 例如,从 localStorage 获取 token 并添加到请求头中
const token = localStorage.getItem('userToken');
if (token) {
config.headers.Authorization = `Bearer ${token}`;
}
// 继续发送请求
return config;
},
(error) => {
// 处理请求错误
return Promise.reject(error);
}
);
// 响应拦截器
instance.interceptors.response.use(
(response) => {
// 对响应数据做点什么
// 例如,返回响应体中的数据,而不是整个响应对象
return response.data;
},
(error) => {
// 处理响应错误
if (error.response && error.response.status === 401) {
// 如果状态码是 401,表示未授权,可能是 token 过期或无效
// 这里可以执行一些操作,比如跳转到登录页面或清除 token
localStorage.removeItem('userToken');
// ...其他处理逻辑
}
return Promise.reject(error);
}
);
// 导出配置好的 Axios 实例
export default instance;

使用配置好的 Axios 实例发起请求

现在,你可以在其他文件中导入并使用这个配置好的 Axios 实例来发起请求:

import axiosInstance from './api'; // 假设你的拦截器配置在 api.js 文件中
// 发起 GET 请求
axiosInstance.get('/users')
.then((users) => {
console.log(users); // 处理返回的用户数据
})
.catch((error) => {
console.error('Error fetching users:', error);
});
// 发起 POST 请求
axiosInstance.post('/users', { name: 'John Doe' })
.then((response) => {
console.log(response); // 处理创建用户的响应
})
.catch((error) => {
console.error('Error creating user:', error);
});

这样,你就配置好了 Axios 的请求拦截器和响应拦截器,并在你的应用中使用了它们。

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

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

相关文章

在 Visual Studio Code(VS Code)中调试 .NET Core 程序详细步骤

在 Visual Studio Code 中调试 .NET Core 程序 在 Visual Studio Code (VS Code) 中调试 .NET Core 程序需要配置和安装一些必要的扩展和调试配置。以下是详细步骤&#xff1a; 1. 安装必要的扩展 首先&#xff0c;确保已安装 Visual Studio Code&#xff0c;并添加必要的扩…

CentOS部署NFS

NFS服务端 部署NFS服务端 sudo yum install -y nfs-utils挂载目录 给 NFS 指定一个存储位置&#xff0c;也就是网络共享目录。一般来说&#xff0c;应该建立一个专门的 /data 目录&#xff0c;方便起见使用临时目录 /tmp/nfs&#xff1a; mkdir -p /tmp/nfs #修改权限 chmo…

响应式处理-一篇打尽

纯pc端响应式 pc端平常用到的响应式布局 大致就如下三种&#xff0c;当然也会有其他方法&#xff0c;欢迎评论区补充 将div height、width设置成100% flex布局 flex布局主要是将flex-wrap: wrap&#xff0c; 最后&#xff0c;你可以通过给子元素设置 flex 属性来控制它们的…

Leecode热题100---45:跳跃游戏②

题目&#xff1a; 给定一个长度为 n 的 0 索引整数数组 nums。初始位置为 nums[0]。 每个元素 nums[i] 表示从索引 i 向前跳转的最大长度。 返回到达 nums[n - 1] 的最小跳跃次数。 思路&#xff1a; 如果某一个作为 起跳点 的格子可以跳跃的距离是 3&#xff0c;那么表示后面…

最新Adaptive特征融合策略,涨点又高效,想发表论文可以参考

自适应特征融合是一种非常高效的数据处理方法&#xff0c;它比传统的特征更能适应不同的数据和任务需求&#xff0c;也因此拥有广泛的应用前景&#xff0c;是深度学习领域的研究热点。 这种方法通过动态选择和整合来自不同层次或尺度的特征信息&#xff0c;不仅显著提升了模型…

4月空调行业线上市场销售数据分析

随着生活品质的提升&#xff0c;消费者对家用空调的诉求不仅仅满足于基本制冷制热功能&#xff0c;而是在环保节能、功能升维、舒适送风、智能科技、焕新设计等多维度提出需求。这种多样化的需求推动了空调产品的创新和升级&#xff0c;这不仅提高了空调的市场竞争力&#xff0…

如何改变echo在Linux下的输出颜色

文章目录 问题回答常规输出字体加粗斜体字带下划线闪烁效果 参考 问题 我正在尝试使用 echo 命令在终端中打印文本。 我想把文本打印成红色。我该怎么做&#xff1f; 回答 你可以使用 ANSI escape codes 定义控制输出颜色的变量。 ANSI escape codes是一种用于在文本中设置…

STM32 MAP文件结合固件文件分析

文章目录 加载域的结束地址并不是固件的结束地址&#xff1f;ROM中执行域的描述RAM中执行域的描述问题分析 中断向量表在固件中的存储位置代码段在固件中的位置只读数据Regin$$Table RW Data段其中的内部机理 总结 MAP 文件分析可以参考之前的文章 程序代码在未运行时在存储器…

Git学习和使用指南简单篇

天行健&#xff0c;君子以自强不息&#xff1b;地势坤&#xff0c;君子以厚德载物。 每个人都有惰性&#xff0c;但不断学习是好好生活的根本&#xff0c;共勉&#xff01; 文章均为学习整理笔记&#xff0c;分享记录为主&#xff0c;如有错误请指正&#xff0c;共同学习进步。…

element-ui手机区号+手机号

需求场景 项目开发中对方要求手机号带上全球区号 需求分析 项目使用的是若依前端框架&#xff0c;element-ui的框架。尝试使用已经网上的组件vue-country-intl等发现不怎么适配element-ui的样式等。这还不是关键的&#xff0c;关键的是弹窗中使用这些组件发现区号的下拉展示框…

C++,LeetCode算法题的字符串输入处理

文章目录 24. 算法24.1. 二叉树输入处理&#xff0c;包括建树、打印树、释放树。24.2. 单链表输入处理&#xff0c;包括建链&#xff08;头插、尾插&#xff09;、打印链、释放链。24.3. 一维矩阵输入处理。24.4. 二维矩阵输入处理。24.5. 调用函数输入处理。 24. 算法 24.1. …

一文了解基于ITIL的运维管理体系框架

本文来自腾讯蓝鲸智云社区用户&#xff1a;CanWay ITIL&#xff08;Information Technology Infrastructure Library&#xff09;是全球最广泛使用的 IT 服务管理方法&#xff0c;旨在帮助组织充分利用其技术基础设施和云服务来实现增长和转型。优化IT运维&#xff0c;作为企业…

Docker 容器间通讯

1、虚拟ip/访问 同一网络 安装docker时&#xff0c;docker会默认创建一个内部的桥接网络docker0&#xff0c;每创建一个容器分配一个虚拟网卡&#xff0c;容器之间(包括宿主机)可以根据分配的ip互相访问(ps:其他主机(包括其他主机的容器)无法ping通docker容器ip无法访问&#…

安卓手机APP开发__蓝牙功能概述

安卓手机&#xff21;&#xff30;&#xff30;开发&#xff3f;&#xff3f;蓝牙功能概述 目录 概述 基本内容 关键的类和接口 概述 安卓平台支持了蓝牙网络栈&#xff0c;它允许一个设备和其它的蓝牙设备进行无线的交换数据。 &#xff21;&#xff30;&#xff30;的框架…

【qt】标准项模型

标准项模型 一.使用标准型项模型1.应用场景2.界面拖放3.创建模型4.配套模型5.视图设置模型6.视图属性的设置 二.从文件中拿到数据1.文件对话框获取文件名2.创建文件对象并初始化3.打开文件对象4.创建文本流并初始化5.读取文本流6.关闭文件7.完整代码 三.为模型添加数据1.自定义…

pytorch在docker里面使用GPU

本博客主要介绍如何在容器里面使用pytorch进行推理&#xff0c;训练&#xff0c;同时用上GPU。 1. 前置条件&#xff0c;安装好docker。 2. 安装nvidia-container-toolkit 参考官方文档&#xff1a; Installing the NVIDIA Container Toolkit — NVIDIA Container Toolkit 1.…

mysql实战——半同步复制搭建

一、搭建前准备 主库 192.168.1.78 从库 192.168.1.76 二、搭建 1、先搭建异步复制 MySQL实战——主从异步复制搭建&#xff08;一主一从&#xff09;-CSDN博客 2、在异步的基础上搭建半同步复制 主库 mysql>install plugin rpl_semi_sync_slave soname semisy…

ctfshow web入门 其他 web396--web412

web396 <?php error_reporting(0); if(isset($_GET[url])){$url parse_url($_GET[url]);shell_exec(echo .$url[host].> .$url[path]);}else{highlight_file(__FILE__); } shell_exec(echo .$url[host].> .$url[path]); 这个是将url的host写入path,也就是说我们的pa…

el-table-column两种方法处理特殊字段,插槽和函数

问题&#xff1a;后端返回的字段为数字 解决办法&#xff1a; {{ row[item.prop] 1 ? "启用" : "禁用" }} {{ row[item.prop] }} 最终果&#xff1a; 另外&#xff1a;如果多种状态时可用函数 {{ getStatus(row[item.prop]) }} {{ row[item.prop…

IO游戏设计思路

1、TCP ,UDP ,KCP ,QUIC TCP 协议最常用的协议 UDP协议非常规的协议&#xff0c;因为需要在线广播&#xff0c;貌似运营商会有一些影响 KCP 基于UDP的协议&#xff0c;GitHub - l42111996/java-Kcp: 基于java的netty实现的可靠udp网络库(kcp算法)&#xff0c;包含fec实现&am…