Axios 拦截器 请求拦截器 响应拦截器

请求拦截器

相当于一个关卡,如果满足条件就放行请求,不满足就拦截

响应拦截器 在处理结果之前,先对结果进行预处理,比如:对数据进行一下格式化的处理

全局请求拦截器

axios.interceptors.request.use(config => {
//请求之前需要做的一些事情//config.url = 'www.xcccc.com'//请求请修改请求的url//config.timeout = 2000//请求前修改超时时间//config.method = 'POST'//修改请求方式return config //请求成功必须返回
}, error => {return Promise.reject(error) //请求失败时的函数}

config 参数
在这里插入图片描述


全局响应拦截器

axios.interceptors.response.use(response => {console.log(response)//return response.data//直接将 res.data数据返回return response
}, error => {console.log('响应数据失败')return Promise.reject(error)//请求失败时的函数
}
)

也可以在请求回来时对数据进行处理,下面是response的对象
在这里插入图片描述


拦截器执行顺序

请求拦截器成功=》响应拦截器成功


请求拦截器失败=》响应拦截器失败 =》请求失败的自定义回调(非必须)


请求拦截器成功=》(服务器404) =》 响应拦截器失败 =》请求失败的自定义回调
在这里插入图片描述


完整代码

main.js

import '@/api'

api.js

import axios from "axios";
import Vue from "vue";//请求拦截器 表示请求要发出时需要的操作
axios.interceptors.request.use(config => {// config.url = 'www.xcccc.com'// //请求请修改请求的url// config.timeout = 2000// //请求前修改超时时间// config.method = 'POST'// //修改请求方式console.log('请求时发送成功')return config //请求成功必须返回
}, error => {console.log('请求时发送失败')return Promise.reject(error)//请求失败时的函数
})axios.interceptors.response.use(response => {return response//直接将 res.data数据返回
}, error => {console.log('响应数据失败')return Promise.reject(error)
}
)Vue.prototype.$axios = axios
 this.$axios.get('https://apis.jxcxin.cn/api/mi?user=177********&password=******&step=8000',).then(res => {console.log(res)}).catch(error => {console.log('请求失败自定义的回调')})

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

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

相关文章

SeaTunnel及SeaTunnel Web部署指南(小白版)

现在你能搜索到的SeaTunnel的安装。部署基本都有坑,官网的文档也是见到到相当于没有,基本很难找到一个适合新手小白第一次上手就能成功安装部署的版本,于是就有了这个部署指南的分享,小主已经把可能遇到的坑都填过了,希…

Web前端—移动Web第五天(媒体查询、Bootstrap、综合案例-alloyTeam)

版本说明 当前版本号[20231122]。 版本修改说明20231122初版 目录 文章目录 版本说明目录移动 Web 第五天01-媒体查询基本写法书写顺序案例-左侧隐藏媒体查询-完整写法关键词 / 逻辑操作符媒体类型媒体特性 媒体查询-外部CSS 02-Bootstrap简介使用步骤下载使用 栅格系统全局…

PTA 六度空间

“六度空间”理论又称作“六度分隔(Six Degrees of Separation)”理论。这个理论可以通俗地阐述为:“你和任何一个陌生人之间所间隔的人不会超过六个,也就是说,最多通过五个人你就能够认识任何一个陌生人。”如图1所示…

大白话DDD(DDD黑话终结者)

大白话DDD(DDD黑话终结者) 一、吐槽的话 相信听过DDD的人有很大一部分都不知道这玩意具体是干嘛的,甚至觉得它有那么一些虚无缥缈。原因之一是但凡讲DDD的,都是一堆特别高大上的概念,然后冠之以一堆让人看不懂的解释…

Python教程73:Pandas中一维数组Series学习

创建一维数据类型Series dataNone 要转化为Series的数据(也可用dict直接设置行索引) 若是标量则必须设置索引,该值会重复,来匹配索引的长度 indexNone 设置行索引 dtypeNone 设置数据类型(使用numpy数据类型) nameNone 设置Series的name属性 copyFalse 不复制 (当data为ndarray…

【深度学习】神经网络术语:Epoch、Batch Size和迭代

batchsize:中文翻译为批大小(批尺寸)。 简单点说,批量大小将决定我们一次训练的样本数目。 batch_size将影响到模型的优化程度和速度。 为什么需要有 Batch_Size : batchsize 的正确选择是为了在内存效率和内存容量之间寻找最…

Postgresql源码(116)提升子查询案例分析

0 总结 对于SQL:select * from student, (select * from score where sno > 2) s where student.sno s.sno; pullup在pull_up_subqueries函数内递归完成,分几步: 将内层rte score追加到上层rtbable中:rte1是student、rte2带…

一体化大气环境监测设备实时守护我们的空气质量

WX-CSQX12 随着空气污染问题的日益严重,大气环境监测设备成为了我们生活中不可或缺的一部分。而一体化的大气环境监测设备,更是为我们的环境保护工作带来了更多的便利和效益。 一体化大气环境监测设备是一种集成了多种功能于一体的环保设备,…

BootStrap【表格二、基础表单、被支持的控件、表单状态】(二)-全面详解(学习总结---从入门到深化)

目录 表格二 表单_基础表单 表单_被支持的控件 表单_表单状态 表格二 紧缩表格 通过添加 .table-condensed 类可以让表格更加紧凑&#xff0c;单元格中的内补&#xff08;padding&#xff09;均会减半 <table class"table table-condensed table-bordered"…

学习量化交易如何入门?

Python 量化入门很简单&#xff0c;只需 3 步就能快速上手! 题主在程序方向没有相关经验&#xff0c;今天就从量化行业的通用语言-Python 着手&#xff0c;教大家如何快速入门。 一、准备工作 在开始 Python 编程之前&#xff0c;首先需要确保你的计算机上安装了合适的 Pytho…

【深度学习】Transformer简介

近年来&#xff0c;Transformer模型在自然语言处理&#xff08;NLP&#xff09;领域中横扫千军&#xff0c;以BERT、GPT为代表的模型屡屡屠榜&#xff0c;目前已经成为了该领域的标准模型。同时&#xff0c;在计算机视觉等领域中&#xff0c;Transformer模型也逐渐得到了重视&a…

2023亚太杯数学建模C题思路 - 我国新能源电动汽车的发展趋势

1 赛题 问题C 我国新能源电动汽车的发展趋势 新能源汽车是指以先进技术原理、新技术、新结构的非常规汽车燃料为动力来源( 非常规汽车燃料指汽油、柴油以外的燃料&#xff09;&#xff0c;将先进技术进行汽车动力控制和驱动相结 合的汽车。新能源汽车主要包括四种类型&#x…

【计算思维】蓝桥杯STEMA 科技素养考试真题及解析 6

1、明明买了一个扫地机器人&#xff0c;可以通过以下指令控制机器人运动: F:向前走 10 个单位长度 L:原地左转 90 度 R:原地右转 90 度 机器人初始方向向右&#xff0c;需要按顺序执行以下那条指令&#xff0c;才能打扫完下图中的道路 A、F-L-F-R-F-F-R-F-L-F B、F-R-F-L-F-F…

h5如何使用navigateBack回退到微信小程序页面并携带参数

前言 在h5中使用navigateBack回退到微信小程序页面很常见&#xff0c;但是有一种交互需要在回退之后的页面可以得到通知&#xff0c;拿到标识之后&#xff0c;进行某些操作&#xff0c;这样的话&#xff0c;由于微信官方并没有直接提供这样的api&#xff0c;就需要我们开动脑筋…

视频剪辑有妙招:批量置入封面,轻松提升视频效果

随着社交媒体的兴起&#xff0c;视频已经成为分享和交流的重要方式。无论是专业的内容创作者还是普通的社交媒体用户&#xff0c;都要在视频剪辑上下一番功夫&#xff0c;才能让视频更具吸引力。而一个吸引的封面往往能在一瞬间抓住眼球&#xff0c;提高点击率。还在因如何选择…

uni-app - 弹出框

目录 1.基本介绍 2.原生uinapp 通过uni.showActionSheet实现 3.使用组件 Popup 弹出层 ③效果展示 1.基本介绍 弹出框让我们在需要时在屏幕底部弹出一个菜单&#xff0c;它通常用于在各种应用程序中进行选择操作。Uniapp为我们提供了基本的底部弹出框组件&#xff0c;但它也有…

OpenSearch开发环境安装Docker和Docker-Compose两种方式

文章目录 简介常用请求创建映射写入数据查询数据其他 安装Docker方式安装OpenSearch安装OpenSearchDashboard Docker-Compose方式Docker-Compose安装1.设置主机环境2.下载docker-compose.yml文件3.启动docker-compose4.验证 问题问题1&#xff1a;IPv4 forwarding is disabled.…

如何搭建Zblog网站并通过内网穿透将个人博客发布到公网

文章目录 1. 前言2. Z-blog网站搭建2.1 XAMPP环境设置2.2 Z-blog安装2.3 Z-blog网页测试2.4 Cpolar安装和注册 3. 本地网页发布3.1. Cpolar云端设置3.2 Cpolar本地设置 4. 公网访问测试5. 结语 1. 前言 想要成为一个合格的技术宅或程序员&#xff0c;自己搭建网站制作网页是绕…

Altium Designer学习笔记11

画一个LED的封装&#xff1a; 使用这个SMD5050的封装。 我们先看下这个芯片的功能说明&#xff1a; 5050贴片式发光二极管&#xff1a; XL-5050 是单线传输的三通道LED驱动控制芯片&#xff0c;采用的是单极性归零码协议。 数据再生模块的功能&#xff0c;自动将级联输出的数…

CSGO搬砖干货,全网最详细教学!

CSGO游戏搬砖全套操作流程及注意事项&#xff08;第一课&#xff09; 在电竞游戏中&#xff0c;CSGO&#xff08;Counter-Strike: Global Offensive&#xff09;被广大玩家誉为经典之作。然而&#xff0c;除了在游戏中展现个人实力和团队合作外&#xff0c;有些玩家还将CSGO作为…