IOS浏览器中axios被中断时可以被catch到，在web以及android不可以

最新推荐文章于 2023-02-17 14:57:20 发布
原创 最新推荐文章于 2023-02-17 14:57:20 发布 · 581 阅读 · 0 ·
CC 4.0 BY-SA版权
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
文章标签：

#坑

本文探讨了使用axios发送请求时，在安卓及web端遇到的请求中断无法通过Promise.prototype.catch()捕获的问题，特别是在浏览器URL跳转等情况下。有趣的是，这一问题在iOS环境下却能得到解决。


axios发送请求时，当发生浏览器url跳转或者其他未知原因使得请求中断时，
安卓以及web端使用Promise.prototype.catch()方法是捕获不到错误的，
但是ios环境下的浏览器都可以捕获到。








前端面试汇总-React
分享前端工程化、动效魔法与性能之舞！
06-29 1715
React并不是将click事件绑定到了div的真实DOM上，而是在document处监听了所有的事件，当事件发生并且冒泡到document处的时候，React将事件内容封装并交由真正的处理函数运行。这样的方式不仅仅减少了内存的消耗，还能在组件挂在销毁时统一订阅和移除事件。除此之外，冒泡到document上的事件也不是原生的浏览器事件，而是由react自己实现的合成事件（SyntheticEvent）。因此如果不想要是事件冒泡的话应该调用event.preventDefault()方法，而不是调用event
最全面、最详细web前端面试题及答案总结
热门推荐
HanXiaoXi_yeal的博客
02-01 3万+
2021最全面、最详细web前端面试题及答案总结 总结不易，希望可以帮助到即将面试或还在学习中的web前端小伙伴，祝面试顺利，拿高薪！ 本章是HTML考点的⾮重难点，因此我们采⽤简略回答的⽅式进⾏撰写，所以不会有太多详细的解释。我们约定，每个问题后我们标记『✨ 』的为⾼频⾯试题 doctype的作⽤是什么？✨ DOCTYPE是html5标准⽹⻚声明，且必须声明在HTML⽂档的第⼀⾏。来告知浏览器的解析器⽤什么⽂档标准解析这个 ⽂档，不同的渲染模式会影响到浏览器对于 CSS 代码甚⾄ JavaScript
封装的axios走了then又走了catch问题
qq_69692573的博客
02-17 1576
封装的axios走了then又走了catch问题
iOS捕获异常，常用的异常处理方法 try-catch-finally
ridxmc的博客
08-01 3117
可能在iOS中不太经常用到，但是了解一下还是没坏处 @try{代码块1（可能出现异常的语句）//执行的代码，其中可能有异常。一旦发现异常，则立即跳到catch执行。否则不会执行catch里面的内容 } @catch（Exception e）｛ 代码块2（发生异常时进行处理）//除非try里面执行代码发生了异常，否则这里的代码不会执行 ｝@finally｛ 代码块3（始终要进行处理的语句）//
vue axios请求成功进入catch原因
lazy_tomato的博客
09-25 1万+
START 仅以此文，纪念这个离谱的bug，o(╥﹏╥)o 问题 长话短说，使用axios进行请求，浏览器f12检查，请求成功。但是代码逻辑还是进入axios的catch模块。 原因 当axios请求完成后走的时then的代码块，如果then代码块中存在错误代码信息，这时就会进入catch中抛出异常（注意：此时控制台并不会报错，因为错误被catch捕获了） axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到。例如 form表单，点击按钮提交后，表单会刷新 特殊情况
java中try catch的中断规则
u010695008的博客
06-16 2586
如果try中发生异常，则try块中的代码不会继续执行，直接执行catch中的代码，但是try catch 后的代码会正常执行。 如果throw异常的话，会执行finally中的代码，其他代码不执行。
vue2在移动端实现文本显示录音模式，按住可录音，最多录音60秒，松开保存文件（请求后端）并显示录入时长，再次按住可以重录
最新发布
11-04
但是考虑到移动端兼容性，特别是iOS和Android，我们可以使用一个流行的录音库：recorder-core 或者 vue-audio-recorder（但要求是vue2）。 但是，根据用户要求，我们需要自己实现一个按住录音的按钮，并且有重录...
React Native网络请求：Fetch与Axios实践指南
借助React Native，开发者可以同时为iOS和Android平台开发应用，大大提高了开发效率。 ## 1.2 网络请求在React Native中的重要性 在现代移动应用中，网络请求是必不可少的一部分，它负责与后端服务器交互，获取...
权限系统失灵？Shiro_JWT Token在生产环境中的6大过期与验证故障深度解析
你有没有遇到过这样的场景：用户刚登录不到十分钟，突然就被踢下线了；或者明明Token是刚刚签发的，资源服务器却返回“401 Unauthorized”？更离谱的是，有些请求能通过验证，有些却不可以，像是系统在“随机抽奖”...
axios cancel repeated functions
qq_38698753的博客
12-17 455
axios如何取消重复请求 javascript axios es6 阅读约 9 分钟 在开发中，经常会遇到接口重复请求导致的各种问题。 对于重复的get请求，会导致页面更新多次，发生页面抖动的现象，影响用户体验。 对于重复的post请求，会导致在服务端生成两次记录（例如生成两条订单记录）。 如果当前页面请求还未响应完成，就切换到了下一个路由，那么这些请求直到响应返回才会中止。 无论从用户体验或...
axios使用 cancel token 取消请求，报错Uncaught (in promise)，错误信息为canceled
ysml_mj的博客
07-19 4138
在使用取消axios请求时报错Uncaught(inpromise)，错误信息为canceled
axios 解决请求状态码为 canceled 的问题
weixin_43841308的博客
08-12 8881
前言 前端使用 Vue 框架进行开发，使用官方推荐的 axios 异步请求 问题描述 在 axios 请求过程中，出现如图请求失败异常取消的问题： 描述：在 Chrome 的页面调试过程中查看到失败的请求，状态是请求被取消，这个请求的请求头中出现 Provisional headers are shown 此行警告。 原因分析 文件上传时，如果文件稍大或者网络不稳定导致掉包，可能会出现这个问题 获取数据的时候，对应端口性能不好，超出连接超时时间。 axios 的异步请求在请求处理的过程中，还未结束
axios请求成功进入catch原因
zhuxiaobo09的专栏
12-29 4848
使用axios进行请求，浏览器f12检查，请求成功。但是代码逻辑还是进入axios的catch模块，并且打印为undefined. 刚开始以为是then中业务异常抛出，后只放console.log也出错，排除。 原因分析：发现axios中 是有响应拦截器的 代码如下 axios.interceptors.response.use(function (response) { if(response.headers.token){ storage.setToke
axios请求Java后台，请求成功，但是请求返回进入catch没有进then方法
华夏乐园
05-21 2万+
因为使用了vue.js，所以配套使用了axios.js来发起请求，于是陷入了很深的坑：axios发起请求，后台响应了，然而前端没有反应，各种百度各种搜，在SegmentFault网站上也只有问题没有答案。经过痛苦的过程，终于迎来了重生。我把它回答了！答案如下：axios是异步发起，若发起后页面刷新，那么就会丢失当前进程，导致接收不到！我是用了form表单，点击按钮提交后，表单会刷新，于是把form...
vue的axios在ie和苹果浏览器后端参数数据接收不到的问题
bright的博客
11-24 1560
vue的axios在ie和苹果浏览器后端参数数据接收不到的问题 ie和苹果手机的浏览器通过axios请求后端接口，后端获取不到的原因是，ie和苹果的浏览器支持Content-type是 application/x-www-form-urlencoded 所以你需要在请求修改Content-type为application/x-www-form-urlencoded request.js import axios from 'axios' import Cookies from "js-cookie"; im
PC端微信内置浏览器vue axios没发出去请求
weixin_34194087的博客
12-14 1749
PC端微信内置浏览器vue axios没发出去请求，仅做记录 今天测试同学 测活动的时候 在windows下面的微信内邮件扫描二维码 竟然使用内置浏览器测了起来。 还有这种骚操作??? 之前的测试从来没测过这个浏览器,据说是腾讯使用的比较老的chrome内核 果然有问题。通过抓包得知请求都没发出去，于是我就在axios里面一步一步手动做c...
在原有vue-elemnt ui 中 对axios进行封装，出现请求成功但是走catch的bug
SnowBeatRain的博客
07-17 1万+
前一篇博客传送门：https://blog.youkuaiyun.com/snowbeatrain/article/details/80776180  bug：请求参数返回，但是提示错误 原因：  在跟目录下创建一个http.js用于引入axios，进行封装  （由于是在原有项目上进行的修改，原有请求是单独对参数进行的处理。所以此处封装并没有处理参数）。以下是报错的post get的封装代码： ...
axios中断请求在vue中怎么使用
07-14
<think>我们正在讨论在Vue.js中使用Axios中断HTTP请求。根据之前提供的引用内容，我们知道在Vue中中断请求的场景包括：避免重复请求覆盖、组件卸载时取消请求等。下面我将结合Vue.js的特性，详细说明如何实现。 在Vue中，我们通常会在组件的生命周期钩子（如`created`或`mounted`）中发起请求。为了在组件卸载时取消请求，我们可以利用Vue的`beforeUnmount`（Vue 3）或`beforeDestroy`（Vue 2）生命周期钩子来执行取消操作。 ### 一、使用AbortController（推荐） #### 基本步骤： 1. 在组件中创建`AbortController`实例 2. 将`controller.signal`传递给axios请求的配置项 3. 在组件卸载前调用`controller.abort()`取消请求 #### Vue 3 示例（Composition API）： ```vue <script setup> import { ref, onBeforeUnmount } from 'vue'; import axios from 'axios'; const data = ref(null); // 创建AbortController实例 const controller = new AbortController(); // 发起请求 axios.get('/api/data', { signal: controller.signal }) .then(response => data.value = response.data) .catch(err => { // 判断是否为取消请求导致的错误 if (axios.isCancel(err)) { console.log('请求被取消:', err.message); } else { // 处理其他错误 } }); // 组件卸载前取消请求 onBeforeUnmount(() => { controller.abort('组件卸载，取消请求'); }); </script> ``` #### Vue 2 示例（Options API）： ```javascript export default { data() { return { data: null, controller: null }; }, created() { // 创建控制器 this.controller = new AbortController(); axios.get('/api/data', { signal: this.controller.signal }) .then(res => this.data = res.data) .catch(err => { if (axios.isCancel(err)) { console.log('请求取消:', err.message); } }); }, beforeDestroy() { // 组件销毁前取消请求 if (this.controller) { this.controller.abort('组件销毁'); } } } ``` ### 二、使用全局请求列表管理（适用于多个请求） 引用[2]中提到了一种全局管理请求的方案：在Vue原型上挂载一个请求列表，每次发起请求时将请求的取消方法存入列表，在需要取消时遍历列表执行取消操作。 #### 实现步骤（以Vue 3为例）： 1. 在`main.js`中全局挂载请求列表 2. 在请求拦截器中添加请求到列表 3. 在响应拦截器中移除已完成请求 4. 提供全局取消方法 ```javascript // main.js import { createApp } from 'vue'; import App from './App.vue'; import axios from 'axios'; const app = createApp(App); // 全局请求列表 app.config.globalProperties.$httpRequestList = new Set(); // 请求拦截器 axios.interceptors.request.use(config => { const controller = new AbortController(); config.signal = controller.signal; // 将取消方法添加到全局列表 app.config.globalProperties.$httpRequestList.add(controller); return config; }); // 响应拦截器（成功和失败都要移除） axios.interceptors.response.use( response => { // 从全局列表中移除 const controller = response.config.controller; if (controller) { app.config.globalProperties.$httpRequestList.delete(controller); } return response; }, error => { if (axios.isCancel(error)) { // 如果是取消请求，不报错，直接返回一个空对象 return Promise.reject({ isCanceled: true }); } // 其他错误处理 return Promise.reject(error); } ); app.mount('#app'); ``` #### 组件内使用： ```vue <script setup> import { getCurrentInstance, onBeforeUnmount } from 'vue'; const { proxy } = getCurrentInstance(); // 发起请求 axios.get('/api/data').then(res => { console.log(res.data); }); // 组件卸载时取消所有请求 onBeforeUnmount(() => { proxy.$httpRequestList.forEach(controller => controller.abort()); proxy.$httpRequestList.clear(); }); </script> ``` ### 三、特定场景：中断重复请求 在搜索框等场景中，我们需要中断上一次未完成的请求，以保证获取最新结果。 #### 实现思路： 1. 为每个请求类型创建唯一标识 2. 在发起新请求前检查是否存在相同标识的未完成请求 3. 如果存在则先中断旧请求 ```javascript // 请求映射表 const pendingRequests = new Map(); function requestWithCancel(url, params) { // 如果已有相同请求，先取消 if (pendingRequests.has(url)) { pendingRequests.get(url).abort(); pendingRequests.delete(url); } const controller = new AbortController(); pendingRequests.set(url, controller); return axios.get(url, { params, signal: controller.signal }).finally(() => { pendingRequests.delete(url); }); } // 在Vue组件中使用 export default { methods: { search(query) { requestWithCancel('/api/search', { q: query }) .then(res => this.results = res.data); } } } ``` ### 四、注意事项 1. **错误处理**：取消请求会触发`catch`，需用`axios.isCancel()`区分 2. **内存泄漏**：确保在取消请求后释放对控制器的引用 3. **兼容性**：现代浏览器均支持`AbortController`，如需支持老旧浏览器可使用[polyfill](https://github.com/mo/abortcontroller-polyfill) > **最佳实践总结**： > - 简单场景直接在组件内使用`AbortController` > - 复杂应用建议通过拦截器统一管理 > - 高频触发场景（如搜索）需主动中断前序请求 --- §§相关问题§§ 1. 在Vue中如何实现全局的Axios请求拦截器？ 2. 如何避免Vue组件卸载后仍执行Axios回调？ 3. Axios中断请求与Vue的keep-alive组件如何协作？ 4. 在Vuex中如何管理Axios请求的中断？ [^1]: Axios在Vue.js [^2]: vue中断axios请求 [^3]: Vue.js与axios</think>### 在 Vue.js 中使用 Axios 中断 HTTP 请求 以下是几种在 Vue 中实现请求中断的实用方法，结合最佳实践和常见场景： #### 一、组件内中断请求（推荐 AbortController） ```vue <script> import axios from 'axios'; export default { data() { return { controller: null, // 存储控制器实例 data: null } }, methods: { async fetchData() { // 创建新控制器（先取消前一个请求） if (this.controller) this.controller.abort(); this.controller = new AbortController(); try { const res = await axios.get('/api/data', { signal: this.controller.signal }); this.data = res.data; } catch (err) { if (axios.isCancel(err)) { console.log('请求被取消', err.message); } else { // 处理其他错误 } } } }, beforeUnmount() { // 组件销毁时自动取消请求 if (this.controller) this.controller.abort(); } } </script> <template> <button @click="fetchData">获取数据</button> <button @click="controller?.abort('用户取消')">取消请求</button> </template> ``` #### 二、全局请求列表管理（防止重复请求） 在 `main.js` 中设置全局请求管理器： ```javascript // main.js import { createApp } from 'vue' import App from './App.vue' import axios from 'axios' const app = createApp(App) // 全局请求列表 app.config.globalProperties.$httpRequestList = new Map() // 请求拦截器 axios.interceptors.request.use(config => { const source = new AbortController() config.signal = source.signal // 存储取消方法 const url = config.url if (app.config.globalProperties.$httpRequestList.has(url)) { app.config.globalProperties.$httpRequestList.get(url).abort() } app.config.globalProperties.$httpRequestList.set(url, source) return config }) // 响应拦截器 axios.interceptors.response.use( response => { // 请求完成后移除 const url = response.config.url app.config.globalProperties.$httpRequestList.delete(url) return response }, error => { if (axios.isCancel(error)) { return Promise.reject({ type: 'CANCEL', message: error.message }) } return Promise.reject(error) } ) ``` #### 三、搜索框防抖 + 中断（经典场景） ```vue <script> export default { data() { return { controller: null, searchResults: [] } }, methods: { search: _.debounce(function(query) { // 使用 lodash 防抖 if (this.controller) this.controller.abort() this.controller = new AbortController() axios.get('/api/search', { params: { q: query }, signal: this.controller.signal }).then(res => { this.searchResults = res.data }) }, 300) // 300ms 防抖延迟 } } </script> <template> <input @input="e => search(e.target.value)" placeholder="搜索..."> </template> ``` #### 四、路由切换自动取消请求 在路由守卫中实现： ```javascript // router.js import { createRouter } from 'vue-router' const router = createRouter({ ... }) router.beforeEach((to, from, next) => { // 获取全局请求列表 const requestList = app.config.globalProperties.$httpRequestList // 取消所有进行中的请求 if (requestList.size > 0) { requestList.forEach(controller => controller.abort()) requestList.clear() } next() }) ``` ### 关键注意事项 1. **错误处理**：必须使用 `axios.isCancel()` 区分取消错误和其他错误 ```javascript .catch(err => { if (axios.isCancel(err)) { console.log('请求取消:', err.message) } else { // 处理真实错误 } }) ``` 2. **内存管理**： - 组件销毁时在 `beforeUnmount` 中取消请求 - 使用全局列表时确保请求完成后移除控制器 3. **Vue 2 兼容**： ```javascript // Vue 2 使用 beforeDestroy beforeDestroy() { if (this.controller) this.controller.abort() } ``` 4. **TypeScript 支持**： ```typescript declare module '@vue/runtime-core' { interface ComponentCustomProperties { $httpRequestList: Map<string, AbortController> } } ``` > **最佳实践建议**： > 1. 简单场景使用组件内 `AbortController` > 2. 中大型项目使用全局请求列表 + 拦截器方案 > 3. 高频操作（如搜索）必须结合防抖/节流 + 中断[^2] > 4. 路由切换时自动取消当前页所有请求提升性能[^1] ---
评论
成就一亿技术人!
拼手气红包6.0元
还能输入1000个字符
 
红包 添加红包
表情包 插入表情
表情包 代码片
 条评论被折叠 查看
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值