因网络不好导致请求时间太长问题的解决

问题描述：

项目生产环境，网不太好，后台服务器返回的数据量又太大，请求开始会有一个遮罩，请求结束遮罩才会关闭，因为数据一直在接收中，导致这段时间内什么操作都做不了，只能杀死进程在重新进入。这里需要加一点东西，如果多长时间内数据还没有接收完，结束这个请求

解决过程：

我知道有的人可能会想，直接在请求多少秒后把遮罩关掉就好了，我也这么想过，但是这样只是关掉了遮罩，而请求依然存在，治标不治本。刚好在在前段时间把vue基础看完，所以这里就想到了请求拦截，axios的。很多时候，如果我们知道bug是在什么样的情况下出现的（场景复现），解决这个bug会相对来说比较容易一些，直接在代码里跟着操作走一遍可能就会发现问题所在，所以我们这里先复现问题并尝试用请求拦截试试。

之前看vue的视频，刚好自己有用node搭建的简单服务器，这里就直接用这个简单服务器来模拟了。

这里可以看到，服务器里就一个简单的接口，返回了点数据，没有其他什么东西了

axios的拦截分为请求拦截器和响应拦截器，请求拦截器是在向服务器发起请求之前做些什么，响应拦截器是在服务器把响应数据返回之前做些什么，这里先不谈拦截器的应用场景。现在开始给axios请求添加拦截器，在拦截器里把请求所花费的时间打印出来，关键代码如下

这里我们可以看到打印信息，一共只花了0.0029秒，这，后台多发点数据，然后网速换成最慢的再试试，换网速看下图，越往上越慢，这里我们直接换到最慢的再试试

4.529秒，问题复现完成，这下我们只要在两秒内把请求结束就可以了，等等，页面刷新再试一次，会发现一个问题，拦截器里打印的请求时间几乎和成功回调里同时出来的，也就意味着在数据全部接收完成之后，你才可以做一些操作，所以响应拦截器是在把数据完全接收后，成功或失败回调之前执行的，好吧，响应拦截器解决不了这个问题，还得找找其他办法。点开请求，看下耗时，这里我们会发现等待时间只有509毫秒，接收数据就用了4秒（说明确实把问题给复现了）。是不是可以在等待之后，加一个延时定时器，多少秒之内取消请求？这里我在往上查了好多资料，包括axios的官方文档，甚至往上去找了promise对象，没有找到需要的。再找找http请求过程、机制，还是没有，当然也可能是我没有找到，如果有知道可以告诉我。

请求拦截失败了，看来还得找找其他解决思路，如果我们在发起请求之后写一个延时定时器，在多少秒后取消这个请求，是不是就把问题解决了？上代码

这里把延时定时器放在请求后也行，请求拦截器里不行，问题解决了。再看看项目代码，擦哩，这里封装的好像不是axios，封装的是vue-resource，那就再来一份vue-resource的。这里再说个技巧，我们在引用vue-resource、element ui等这些时，可以直接引用CDN链接（https://www.bootcdn.cn/），也可以直接去CDN链接里把代码全部复制下来，在本地新建一个js文件，引入这个js文件（这个不需要网）。vue-resource取消请求查了很多资料，只能取消上一个请求，这里这样稍微改一下就可以取消当前请求了，上代码

最终版本：

到这里问题就解决了，因为项目用的是封装好的，旨在最小改动的情况下解决问题（改动越多，出现问题的可能性就越大）。所以这里对代码进行了优化，只改两处，下面是关键代码，第一个是封装的地方，第二个是main.js引入vue-resource的时候添加了一个全局的拦截器

paramData.messageBody是发起post请求传给后台的数据，这样写的好处是，如果需要超时处理的话，你只需要在传给后台的数据里添加一个字段_timeout(单位毫秒)，如果这个字段存在的话，就做超时处理，如果不存在，则还是与之前一样。需要说明的地方是，全局拦截处理后，请求会在超时后走到失败回调里，这里我们自定义了一个超时处理状态码和文本，让我们可以知道该请求是因为请求超时而导致的请求失败。

因网络不好导致请求时间太长问题的解决相关推荐

计算机启动时间过长,电脑开机时间太长一招解决办法！
由于系统在使用过程的卸载以及安装软件,还有就是上网产生大量的垃圾导致我们的电脑会越来越慢.开机时间越来越长,怎么办呢?下面为大家讲解两种方法来提高开机速度! 方法一:最简单粗暴最原始的方法,就是禁止开 ...
Systemctl stop XXX 时间太长
一.背景假如我们自己开发了一个系统,例如web,想要通过systemd来控制.但使用过程中,出现了问题,systemctl stop XXX 的时间太长了. 二.问题原因先说结论:我们的系统停止的 ...
spark SQL读取ORC文件从Driver启动到开始执行Task(或stage)间隔时间太长（计算Partition时间太长）且产出orc单个文件中stripe个数太多问题解决方案...
1.背景: 控制上游文件个数每天7000个,每个文件大小小于256M,50亿条+,orc格式.查看每个文件的stripe个数,500个左右,查询命令:hdfs fsck viewfs://hadoop ...
Android 系统（161）---N/O版本上图库打开一张图片，图片从模糊到清晰的时间太长
N/O版本上图库打开一张图片,图片从模糊到清晰的时间太长与M版本比较,N版本上进图库打开一张图片,图片从模糊到清晰的时间太长 N上Google默认没有多线程encode而只有单线程encode,导致 ...
【幻灯片制作软件】Focusky教程 | 帧的播放时间太长，该如何调整？
(Focusky动画演示大师简称为"FS软件")设置适当的帧的播放时间能有效地展示内容,达到更好的演示效果.但如果帧的播放时间太长,所有演示动作完成后,还需等待一段时间后才能播放下 ...
计算机启动时间过长,开机时间太长怎么办【图解】
现在人们生活娱乐.工作.学习都会或多或少的用到电脑,在电脑被使用越发频繁的今天,电脑出现的问题也就相应得多了,最常见的问题之一就是电脑的开机时间太长,导致的原因可能是因为电脑的使用时间太久了,当然,也 ...
win10 更新计算机时间,win10更新时间太长怎么回事_windows10更新时间太久解决教程...
在使用win10系统的时候,经常会需要电脑进行更新,而我们会发现每次更新都会耗时1-2个小时时间.让人等的不耐烦,遇到win10更新时间太长怎么回事呢?接下来给大家分享一下windows10更新时间太 ...
苹果电脑开机长android,苹果笔记本开机白屏时间太长
朋友,我的现在用"优化大师"优化了,开机才用:"13秒"! 1.电脑开机时间太长(建议你关机重启),或一次打开的网页过多,造成电脑"超载运行" ...
java压缩mp4大小_压缩的mp4视频播放时间太长（exoplayer）
视频(mp4)从Android摄像头录制并发送到后端,这里我使用ffmpeg包装器压缩视频[44mb视频到5.76mb] . 压缩效果很好,但是当我在android(exo播放器)发送视频播放时,开始 ...

因网络不好导致请求时间太长问题的解决

因网络不好导致请求时间太长问题的解决相关推荐

最新文章

热门文章