排查：axios请求拦截器axios.interceptors.request.use里undefined报错

最新推荐文章于 2024-05-04 23:40:16 发布
最新推荐文章于 2024-05-04 23:40:16 发布
阅读量10w+ 收藏 1
点赞数 1
分类专栏： 前端 文章标签： axios undefined
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/Scoful/article/details/124425592
版权

目录

1. 起因

一开始没有用上token验证，代码跑的好好的。
然后利用axios的请求拦截器加上token后，在最新的或者说较新的chrome里，都没问题，但是比较老旧的比如chrome59版本的浏览器就直接catch到报错，但是报错内容是空的！！！undefined报错！！
期间用时至少6小时才排查出来，简直了。
下面这段代码看起来有问题吗？
在这里插入图片描述

2. 可能问题

2.1 老版本浏览器不支持promise？

一度差点以为这就是答案，因为用手动加token的axios来访问就是ok的。但只要用上拦截器就是catch到undefined报错，不理解
加插件，让不支持promise的也支持，也是报错
只能一行代码一行代码的试
最后发现，其实promise是支持的，那就奇怪了

2.2 老版本浏览器不支持replaceAll？

YES！！！！
请看下图，假如在框里用了replaceAll，
在这里插入图片描述
在这里插入图片描述
replaceAll要2020年后的chrome浏览器才支持！
至此，问题发现了，那就好解决了，一开始那个undefined，真的不知道哪里出的问题了。

3. 总结

用时6小时+，有时候不合预期的代码表现，肯定是有问题的，但就是报错没报出来，这时候真的就只能保持住耐心一点一点试了，等定位到了，就哦原来是这样的，但中间真的就浪费太多时间精力了。
写个文章吐槽一下~

Scoful
关注
专栏目录
前端携带token请求时候后台报错_前端基础：vue中Axios的封装和API接口的管理
weixin_33362096的博客
02-03 1171
一、axios的封装在vue项目中，和后台交互获取数据这部分，通常使用的是axios库，它是基于promise的http库，可运行在浏览器端和node.js中。它有很多优秀的特性，例如拦截请求和响应、取消请求、转换json、客户端防御XSRF等。安装npm install axios; // 安装axios复制代码引入一般在项目的src目录中，新建一个request文件夹，然后在里面新建一个htt...
axios请求拦截器错误_axios----请求拦截器和响应拦截器
weixin_35744893的博客
01-26 1629
1.请求拦截器:请求拦截器的作用是在请求发送前进行一些操作:// 后添加的拦截器,先执行!!!// 添加请求拦截器(回调函数)axios.interceptors.request.use(config=>{console.log('request interceptor 请求拦截器1');return config // return是为了继续向下传递, promise链式传递},error...
axios请求拦截器获取报错信息
weixin_42349568的博客
07-02 845
一，现象 这种403状态码，说明请求之后，后端报错，这时就会走这条路径： 查看不了后端的具体返回报错信息了。 二，解决 返回error.response就可以啦：
关于axios请求数据回来，数据可以挂载却出现undefined
m0_58338655的博客
08-31 1427
关于axios请求数据回来，数据可以挂载却出现undefined
axios请求本地资源 response报错undefined ts(2532)
ProgrammingWhite的博客
08-29 1775
axios response undefined
2024年Web前端最全【vue2】axios请求与axios拦截器的使用详解，前端高级面试视频
最新发布
2401_84437095的博客
05-04 1081
请求拦截器：处理我们在发送请求之前需要经过的回调函数相应拦截器：服务器响应之后返回给我们之前会被执行的回调函数官网指南：拦截器 | Axios 中文文档 | Axios 中文网 (axios-http.cn)")下图为上述超链接打开之后所看到的页面：我们将上述代码copy下来（这一大段代码不需要背下来，到了工作当中也是直接去axios官方中直接copy下来我们进行应用即可呦）1.便于封装操作，我们常会建立一个专门的文件来写下我们的拦截器同基地址作为第一次封装。
axios请求拦截和响应拦截
qq_37734787的博客
06-21 2443
请求拦截器 当发送请求时才会触发此功能（在请求之前进行一些配置） axios.interceptors.request.use( (config) => { const isToken = (config.data || {}).isToken === false; const refreshToken = getStore({ name: 'refreshToken' }); const userInfo = getUserInfo(); // getStore({ n
解决Vue在封装了Axios后手动刷新页面拦截器无效的问题
10-17
axios.interceptors.request.use(function(config) { // 确保能够使用window.app if (window.app) { // 使用window.app.$vux来进行提示 window.app.$vux.toast.show(...); } return config; }, function...
axios拦截器 config_axios拦截器的实现
weixin_39821605的博客
02-23 753
拦截器设计与实现#需求分析我们希望能对请求的发送和响应做拦截，也就是在发送请求之前和接收到响应之后做一些额外逻辑。我们希望设计的拦截器的使用方式如下：// 添加一个请求拦截器axios.interceptors.request.use(function (config) {// 在发送请求之前可以做一些事情return config;}, function (error) {// 处理请求错误re...
axios使用拦截器统一处理所有的http请求的方法
10-17
首先，我们要了解axios拦截器分为两类：请求拦截器（request interceptors）和响应拦截器（response interceptors）。请求拦截器可以在请求发送到服务器之前进行一些预处理操作，如添加认证信息到请求头、展示加载...
axios 中设置拦截（ interceptors.response） error.response.status undefined 没有值的问题分析处理
weixin_45381858的博客
12-18 6930
事与愿违，当服务器发生错误时， error 提供的信息永远只有：‘Error: Network Error’ 跟源码进去，然后发现开发者在注释里清楚的解释了为什么，翻译总结就是：balabala…不是我不给你们错误信息，是 TM 浏览器不给我啊 balabala 不过好消息是，自己在业务逻辑里定义的错误信息是能够获取到的。 立刻验证了下，在请求登录验证方法里返回结果时，像这样添加发送错误状态码：...
vue3+axios刷新浏览器interceptors无效问题
三劫散仙
12-08 1356
vue前端应用在用户登录之后，服务端会返回一个认证token，前端会将此token存在cookie中，之后前端每次发起的向服务端的请求时，会通过axios的interceptors.request方法，来自动将cookie中的token取出来放在请求头中
axios请求接口返回undefined
weixin_73872257的博客
03-23 2282
后端返回的数据可以在控制台上看到，但是前端接收的是undefined。
vue axios response 失败拦截
Sensation_cyq的博客
08-03 1481
最开始认为失败没走拦截 成功走了 instance.interceptors.response.use(response => { // dataAxios 是 axios 返回数据中的 data const dataAxios = response; // 这个状态码是和后端约定的 const CODE = dataAxios.data.code; // 根据 code 进行判断 if (CODE === undefined) { .
使用axios获取http请求时可能发生异常，无非三种情况1：获取地址的url错误，2：给的参数错误，3：请求方法错误（GET或POST），下面我们讲一讲http请求时常见的状态码（如403，404）
zhzjn的博客
12-13 2025
101 Switching Protocols：表示服务器已经理解了客户端的请求，并且将切换到不同的协议来完成请求。100 Continue：表示服务器已经接收到请求的头部，并且客户端应该继续发送请求的主体部分。1、信息性状态码，表示服务器已经接收到请求并正在处理，但需要进一步的操作才能完成请求；表示服务器已经接收到请求并正在处理，但需要进一步的操作才能完成请求。201 Created：表示请求已成功，并且服务器创建了新的资源。302 Found：表示请求的资源已临时移动到新的URL。
请求方式拦截器
liangkaihuaen的博客
06-11 809
request.interceptors.request.use((url, options) => { const data = { url, options: { …options }, }; if (data.options.method.toUpperCase() === ‘POST’) { data.options.data = { tx: ‘’, …(op.options.data || {}), }; } if (data.options.method.toUpperCase() ===
axios.interceptors.request.use简介
码字不易，大家的支持就是我坚持下去的动力
03-21 4246
是一个拦截器，它可以在发送请求之前对请求进行拦截并进行一些处理。它的参数是一个函数，该函数接受一个config对象作为参数，其中包含了请求的各种配置信息。以下是configurl: 请求的 URL 地址。method: 请求的 HTTP 方法，如 GET、POST 等。headers: 请求头信息，可以设置一些自定义的头部信息，如认证信息等。params: GET 请求中的查询参数，会被拼接在 URL 后面，如foo=bar。data。
出现 net::ERR_CONNECTION_REFUSED 问题，Vue处理方式
weixin_48449171的博客
07-28 4038
【代码】出现 net::ERR_CONNECTION_REFUSED 问题，Vue处理方式。
解决axios发送请求报错：Cannot read properties of undefined (reading ‘cancelToken‘)
weixin_53368033的博客
12-22 2252
代码报错不一定是接口不能访问，有可能是自己不小心写错
axios.interceptors.request.use()具体用法
05-22
`axios.interceptors.request.use()`方法是用来拦截所有的请求，并在发送请求之前对请求进行一些处理或者添加一些公共的配置。具体用法如下： ```javascript axios.interceptors.request.use( function(config) { // 在发送请求之前做些什么 config.headers.Authorization = localStorage.getItem('token') return config }, function(error) { // 对请求错误做些什么 return Promise.reject(error) } ) ``` 其中，第一个参数是一个函数，接收一个`config`对象作为参数，`config`包含了请求的相关配置信息，我们可以在这个函数中对`config`进行修改，例如添加请求头、设置请求超时时间等等。 第二个参数也是一个函数，接收一个`error`对象作为参数，用于处理请求错误。 需要注意的是，`axios.interceptors.request.use()`返回的是一个拦截器的id，我们可以使用`axios.interceptors.request.eject(id)`方法来移除这个拦截器。
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值