vue-cli http请求正常，但就是不进入then()方法反而一直进catch()方法

最新推荐文章于 2024-08-01 18:15:03 发布
原创 最新推荐文章于 2024-08-01 18:15:03 发布 · 4k 阅读 · 5 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#vue.js #http #前端

博主在深夜解决了一个前端与后端交互的难题，问题出在HTTP.post请求的.then()未被触发，而是直接进入了.catch()。问题根源在于后端返回的数据在前端显示正常，但HTTP请求的响应拦截器(response interceptor)导致了异常。通过注释掉srcapiindex.js中的响应拦截器相关代码，问题得到解决。这提醒开发者在处理网络请求时要留意响应拦截器的影响。

为这个问题折腾一晚上时间，前端请求后端也能收到，后端返回的数据前端浏览器也能看到，可是这http.post(url, data, {})就是不走.then()，走收集错误的.catch().
在这里是后端返回的数据
这是后端返回的数据
这是前端的代码
这是前端的代码。
解决办法就是找到response interceptor（响应拦截器）代码，在项目的\src\api\index.js路径文件里的这两行代码注释掉。
在这里插入图片描述
完事，睡觉。

前端篇 （ 4 ）- axios不执行then方法，执行catch
烟溪彭于晏的博客
05-22 4192
解决axios不执行then方法，执行catch
全栈开发常用指令、Web前端、服务端、嵌入式、Mosquitto、Docker、MySQL、Redis、Nginx、mqtt、Vnm
最新发布
优快云博客主页地址：https://mengjian.blog.youkuaiyun.com/
09-16 1163
全栈开发常用指令、Web前端、服务端、嵌入式、Mosquitto、Docker、MySQL、Redis、Nginx、mqtt、Vnm
vue请求数据成功后不执行then,执行catch
qq_50988305的博客
06-21 2326
vue请求数据成功后不执行then,执行catch
vue前端请求正常，但是不进入then方法
n727158431的博客
06-12 9562
如图，我的response返回的code名称和拦截器中定义不相同，同时，代码的.then后面没有增加.catch，所以一直不进入then里面执行，修改code一致就好了
el-form中保存时axios发请求不进入then进入catch
Charonmomo的博客
10-28 1865
问题描述 今天接手之前同事写的代码的时候遇到一个问题: 点击 编辑 中的 保存按钮 或者是 删除 的时候, 请求可以发送成功, 但是控制台总会显示报错信息. 页面上的elementUI提示也是 $message.error 形式的. 请求发送之后的 .then 也进不去, 反而会显示 .catch 中的内容. 然后我就开始百度: 得知产生这种问题的原因主要有以下几种: 当axios请求完成后走的是then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中>抛出异常（注
vue项目调取接口即走then又走catch的原因
weixin_49912212的博客
02-16 4555
接口即走then又走catch的原因
普通js数据接口的请求不能使用.then方式,修改成了promise的请求以及后面使用了.then的数据处理方式,如果不改成promise请求方式就不能使用.then的处理方式
fury的博客
07-03 516
【代码】普通js数据接口的请求不能使用.then方式,修改成了promise的请求以及后面使用了.then的数据处理方式,如果不改成promise请求方式就不能使用.then的处理方式。
基于Vue-Cli 打包自动生成/抽离相关配置文件的实现方法
12-10
在现代前端开发中，Vue CLI 是一个非常流行的脚手架工具，它可以帮助开发者快速搭建 Vue.js 项目。然而，在实际的项目部署过程中，经常会遇到一些需要动态配置的问题，比如服务器接口地址、环境变量等。本篇文章将...
新版vue-cli模板下本地开发环境使用node服务器跨域的方法
08-27
新版Vue-cli模板下本地开发环境使用Node服务器跨域的方法 在新版Vue-cli模板下，本地开发环境中使用Node服务器跨域是一种常见的解决方案。为了解决浏览器的同源策略限制，本文将为大家介绍一种使用Node服务器跨域的...
【vue-cli】vue-cli@2源码学习
ChenLingZhi1115的博客
08-01 529
vue/cli: 3.11.0创建项目vue create 项目名称@vue/cli: 2.x.x 创建项目下载完成后初始化npm i创建项目。inquirer
Vue-cli 使用json server在本地模拟请求数据的示例代码
10-19
在开发Vue项目的过程中，经常会遇到后端接口还未完成，但前端页面需要提前开始开发的情况。此时，可以利用json server来模拟一个REST风格的API接口，以便于前端开发者能够使用虚拟数据进行开发和调试。json server是...
vue-cli 引入、配置axios的方法
08-27
vue-cli 引入和配置axios的方法 在vue-cli项目中，使用axios库来发送HTTP请求是一种常见的做法。下面将详细介绍vue-cli 引入axios的方法和配置axios的方法。 一、安装axios 首先，我们需要使用npm安装axios库。在...
vue封装网络请求
牵着蜗牛去旅行的博客
07-07 189
1.新增util文件夹 在util文件夹里新增http.js,负责axios的封装 import Vue from "vue"; import axios from "axios"; import { Message } from "element-ui"; const postAxios = (data, resolve, reject) => { const request = axios.create({ // API 请求的默认前缀 baseURL: "/index",
vue中的.then()与.catch()
热门推荐
MyHappinessIsU的博客
09-20 2万+
catch中获取到的值是请求失败或者代码问题造成的错误，而因代码造成的错误在.then()中获取不到，因此我们常用catch我们偶尔会遇到一些问题：明明请求成功了，逻辑却进入catch中了，这时说明在then中的处理逻辑可能出现了错误，并不是请求失败才会进入catch。
VUE问题记录-Method调用不报错但是没有执行任何逻辑,日志也输出不了
Deadeyess的博客
08-20 533
我是下面这种结构,一直调不出问题,console.log也输出不了日志,检查很久才发现,methods有两个,底下的methods应该是后执行,导致覆盖了前面的methods。我有点无语,Vue的对语法要求这么宽松吗?这都不报个错,还让我一遍遍的运行调试…
vue前端方法同步调用，防止异步顺序错误
weisian的博客
07-11 1802
vue方法执行顺序同步
Vue3前端异步方法调用的执行顺序问题
wewowe1的博客
05-22 2724
在下面的节点单击事件方法中调用了getSheetNum()这个方法，由于这个方法每触发一次就向后台传参查询一次，所以每次执行顺序如果需要让函数在方法内先于后续代码调用，那么可以使用或 Promise 链式调用的方式来解决这个问题。awaitawait如果你不想使用，可以使用 Promise 的链式调用方式，将后续代码全部写在一个.then()回调中，并在第一个.then()回调中获取到异步方法的返回结果。
VUE无报错信息，但是没有连接到后端
m0_47943986的博客
09-07 841
问题处理
axios请求Python后台，请求成功，但是请求返回没有进then方法执行相关代码
gymaisyl的博客
12-13 5334
在html中的代码参考如下： vue代码参考如下： 在前端将密码修改成功后，后端返回的是200的状态码，但是，请求成功应该进入到 .then里面，将修改成功的消息弹出的，但是始终没有 经过多番资料的查阅，原因是： axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到！ 我是用了form表单，点击按钮提交后，表单会刷新，把form去除就可以接收后台返回的结果了 修改后的...
vue-cli + Mockjs如何拦截带参数的请求
06-26
在使用 Vue CLI 和 Mock.js 时，若希望拦截带有参数的 HTTP 请求，可以通过正则表达式匹配 URL 并忽略查询参数部分，从而实现对带参数请求的模拟响应。Mock.js 默认不会自动处理 URL 中的查询参数，但可以借助正则表达式进行灵活的路径匹配。 ### 配置方法 #### 1. 创建 Mock 文件 首先，在项目中创建一个 `mock` 文件夹，并在其中建立一个如 `api.js` 的文件用于存放接口模拟逻辑。 ```javascript // mock/api.js import Mock from 'mockjs'; const data = { list: [ { id: 1, name: 'Item 1' }, { id: 2, name: 'Item 2' } ] }; // 拦截 GET 请求，URL 中包含 query 参数 Mock.mock(/\/api\/getList\?.*/, 'get', () => { return { code: 200, data: data.list }; }); ``` 此配置将匹配所有以 `/api/getList?` 开头的 GET 请求，无论其后携带何种查询参数。 #### 2. 在开发环境引入 Mock.js 在 `main.js` 或专门用于开发环境的入口文件中引入 Mock.js 的配置： ```javascript // main.js if (process.env.NODE_ENV === 'development') { require('./mock/api'); } ``` 这样在开发环境中，所有符合条件的请求都会被 Mock.js 拦截并返回预设的数据[^4]。 #### 3. 使用 Axios 发送请求 在组件中使用 Axios 发送请求时，无需更改任何代码，正常调用即可： ```vue <script> import axios from 'axios'; export default { methods: { fetchData() { axios.get('/api/getList?page=1&limit=10') .then(response => { console.log(response.data); }) .catch(error => { console.error(error); }); } } }; </script> ``` 当执行上述请求时，Mock.js 会根据配置拦截该请求并返回模拟数据[^2]。 ### 注意事项 - **正则表达式的写法**：确保正则表达式能够正确匹配 URL 路径和参数格式，避免因路径不匹配导致 Mock 失效。 - **环境控制**：仅在开发环境中启用 Mock.js，生产环境应禁用或替换为真实 API 地址。 - **数据动态性**：可结合 Mock.Random 等功能生成动态数据，提升测试的真实性[^5]。 ---
评论 1
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值