乐享qicheng
前端开发
获得徽章 14
#稀土开发者大会2023 # tip：vue3取消正在请求中的接口
可以使用cancel token取消请求
《《
programme1：使用CancelToken.source工厂方法创建cancel token。
var CancelToken = axios.CancelToken
var source = CancelToken.source()
axios.get('user/123',{cancelToken:source.token})
.catch(function(thrown){ if ( axios.isCancel ( thrown )
{ console.log( 'Request canceled' ,thrown.message ) } ) } )else{ //处理错误 }
//取消请求（message参数是可选的）
source.cancel('Operation canceled by the user.')
》》
//console.log("分割符。。。。。。。。。。")
《《
programme2：还可以通过传递一个executor函数到CancelToken的构造函数来创建cancel token。
var CancelToken = axios.CancelToken;
var cancel;
axios.get( '/user/123' { cancelToken : new CancelToken ( function executor ( c ) { cancel = c } ) } )
//取消请求、
cancel();
》》
注意***可以使用同一个cancel token取消多个请求
//console.log("分割符。。。。。。。。。。")
3，用于真实的项目取消请求的处理
如图二三四五
二图（在main.js中声明全局的变量，用于存储请求接口）
三图（在request.js中的请求拦截器，将请求的方法添加到变量中）
四图（取消请求的方法。循环数组，执行每个接口的方法）
五图（在需要的地方执行方法）
可以使用cancel token取消请求
《《
programme1：使用CancelToken.source工厂方法创建cancel token。
var CancelToken = axios.CancelToken
var source = CancelToken.source()
axios.get('user/123',{cancelToken:source.token})
.catch(function(thrown){ if ( axios.isCancel ( thrown )
{ console.log( 'Request canceled' ,thrown.message ) } ) } )else{ //处理错误 }
//取消请求（message参数是可选的）
source.cancel('Operation canceled by the user.')
》》
//console.log("分割符。。。。。。。。。。")
《《
programme2：还可以通过传递一个executor函数到CancelToken的构造函数来创建cancel token。
var CancelToken = axios.CancelToken;
var cancel;
axios.get( '/user/123' { cancelToken : new CancelToken ( function executor ( c ) { cancel = c } ) } )
//取消请求、
cancel();
》》
注意***可以使用同一个cancel token取消多个请求
//console.log("分割符。。。。。。。。。。")
3，用于真实的项目取消请求的处理
如图二三四五
二图（在main.js中声明全局的变量，用于存储请求接口）
三图（在request.js中的请求拦截器，将请求的方法添加到变量中）
四图（取消请求的方法。循环数组，执行每个接口的方法）
五图（在需要的地方执行方法）
展开
1
1
![[玫瑰]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_103.6c2eed8.png)
#每日快讯# 接收后端返回的pdf文件流 前端使用Vue-pdf实现预览(分页）
步驟1：儅後端返回的是這種類型的數據時。图一所示。
那么需要将此数据进行拼接。拼接成可以下载的文件地址。
步骤2：将文件流转成blob地址，使用fetch抓取文件流，返回了一个对象，然后再使用blob的方法，每一个地方的返回的数据样式都有，图二所示。
**通过blob方法返回的Blob对象的type一定是“application/pdf”，否则肯定是文件流是错的。
步骤三。项目安装npm install vue-pdf --save，使用vue-pdf来展示。
需要component注册。图三所示。
这样一来就可以在页面很好展示pdf文件了。图四所示。
步驟1：儅後端返回的是這種類型的數據時。图一所示。
那么需要将此数据进行拼接。拼接成可以下载的文件地址。
步骤2：将文件流转成blob地址，使用fetch抓取文件流，返回了一个对象，然后再使用blob的方法，每一个地方的返回的数据样式都有，图二所示。
**通过blob方法返回的Blob对象的type一定是“application/pdf”，否则肯定是文件流是错的。
步骤三。项目安装npm install vue-pdf --save，使用vue-pdf来展示。
需要component注册。图三所示。
这样一来就可以在页面很好展示pdf文件了。图四所示。
展开
7
6
![[闭嘴]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_8.c6ea514.png)
![[皱眉]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_71.e8c2090.png)
，jym解答下。
赞了这篇沸点
continue，break ，return在for循环中的作用
1、continue：指的是跳出当前循环，即不执行continue后的语句，直接进入下次循环。
2、break：指的是跳出for循环本身，不再进行之后的循环，但可以执行for循环之外的语句。
3、return：指的是跳出for循环，且不执行for循环之外的语句，直接跳出当前函数，返回return后的值。
原文链接：
blog.csdn.net
1、continue：指的是跳出当前循环，即不执行continue后的语句，直接进入下次循环。
2、break：指的是跳出for循环本身，不再进行之后的循环，但可以执行for循环之外的语句。
3、return：指的是跳出for循环，且不执行for循环之外的语句，直接跳出当前函数，返回return后的值。
原文链接：
blog.csdn.net
展开
评论
点赞
![[发呆]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_4.28b310a.png)
，jym解释下。谢谢![[比心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_113.582f64b.png)
赞了这篇沸点
看来临时抱佛脚还是有用的！！！
我就临时抱了一周的佛脚，那几天天天写阅读阅读阅读。
当然还得有一定的基础才行![[捂脸]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
，如果真的差的太多，抱佛脚也救不了自己。
我就临时抱了一周的佛脚，那几天天天写阅读阅读阅读。
当然还得有一定的基础才行
![[捂脸]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_28.8981538.png)
，如果真的差的太多，抱佛脚也救不了自己。
5
5
赞了这篇沸点
![[流泪]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_6.dde0d83.png)
，哭死
赞了这篇沸点
赞了这篇沸点
#挑战每日一条沸点#
今晚上完成了！ 捡垃圾兼摆共享单车行动！
祝贺完成![[呲牙]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
真的是我的奇思妙想的一次，想做就去做那种。
非常感谢自愿参加的另外两位同学，我们三真不错哈哈哈。
以下是这次历程
我准备了三个垃圾夹，原本想买个火钳的，后来发现这个夹子更好，就自费啦，拿了一卷垃圾袋，又不贵。
我们从广大站出发，沿着这个公交路线一直走到大学城北。我们边走边捡垃圾，看到路上的单车，如果倒了，就把它扶正。
来回我们一共捡了九袋，从六点开始捡到八点，两个钟多，内心累死啦（太久没运动。。）
路上我们交流，发现大家内心想到的竟然都差不多。因为我们社恐不敢在人多面前捡垃圾（可能会太作？），但是，平时我们看见路上的垃圾又很想捡，路上的单车也是，有时候都是倒的，没人扶起来了，那么就不会有人想去骑。所以我们一拍即合，行动起来。
一些优化建议
不用选太长的路程，原本我们以为一个钟多就好了，结果两个钟多，会很累，毕竟徒步。
晚上不晒，但是可能会很暗，但这次我们的路线还可以，能看清。
人数4-5个就基本够了，6个以上就会感觉多的。虽然我们这次三个人，一起走的，我们没有细分工，但都会注意到对方没注意到。人太多可能要分批，或者分路，这个不一定好解决。其实两个人以上都很不错的。哈哈哈
备多点袋子，备个免洗手液会很棒。我们有个人就是背个背包的，想的很周到哈哈哈。
尽量还是便捷出门，这也没那么累
![[坏笑]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_41.2751fc1.png)
（我总是有好多奇奇怪怪的想法去做呢嘻嘻）
今晚上完成了！ 捡垃圾兼摆共享单车行动！
祝贺完成
![[呲牙]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_2.cd1e2bd.png)
真的是我的奇思妙想的一次，想做就去做那种。
非常感谢自愿参加的另外两位同学，我们三真不错哈哈哈。
以下是这次历程
我准备了三个垃圾夹，原本想买个火钳的，后来发现这个夹子更好，就自费啦，拿了一卷垃圾袋，又不贵。
我们从广大站出发，沿着这个公交路线一直走到大学城北。我们边走边捡垃圾，看到路上的单车，如果倒了，就把它扶正。
来回我们一共捡了九袋，从六点开始捡到八点，两个钟多，内心累死啦（太久没运动。。）
路上我们交流，发现大家内心想到的竟然都差不多。因为我们社恐不敢在人多面前捡垃圾（可能会太作？），但是，平时我们看见路上的垃圾又很想捡，路上的单车也是，有时候都是倒的，没人扶起来了，那么就不会有人想去骑。所以我们一拍即合，行动起来。
一些优化建议
不用选太长的路程，原本我们以为一个钟多就好了，结果两个钟多，会很累，毕竟徒步。
晚上不晒，但是可能会很暗，但这次我们的路线还可以，能看清。
人数4-5个就基本够了，6个以上就会感觉多的。虽然我们这次三个人，一起走的，我们没有细分工，但都会注意到对方没注意到。人太多可能要分批，或者分路，这个不一定好解决。其实两个人以上都很不错的。哈哈哈
备多点袋子，备个免洗手液会很棒。我们有个人就是背个背包的，想的很周到哈哈哈。
尽量还是便捷出门，这也没那么累
![[坏笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_41.2751fc1.png)
（我总是有好多奇奇怪怪的想法去做呢嘻嘻）
展开
4
14
#挑战每日一条沸点#
图一：做大平台展示，每个模块都是一个接口请求。然后初始化数据的要求是：一个接口请求成功/失败。等待一秒请求下一个。直至全部请求成功再次循环请求。
图二：是初始化方法和请求的方法，不管成功与否都不能阻塞下一个请求。一直轮询。
1，有没有需要优化的地方？ 感觉看着方法很大很多代码。
2，for循环可以做异步等待请求，但是我tab切换时需要跳出这个for循环。执行新的for循环。
图三图四：我tab点击之后，执行方法，设置了标识来跳出for循环，好像有点作用，但也有bug，（应该是在tab切换过于频繁时，出现请求数据不是一个一个来的）
**望掘友指点一二。谢谢![[送心]](//lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_56.5777828.png)
图一：做大平台展示，每个模块都是一个接口请求。然后初始化数据的要求是：一个接口请求成功/失败。等待一秒请求下一个。直至全部请求成功再次循环请求。
图二：是初始化方法和请求的方法，不管成功与否都不能阻塞下一个请求。一直轮询。
1，有没有需要优化的地方？ 感觉看着方法很大很多代码。
2，for循环可以做异步等待请求，但是我tab切换时需要跳出这个for循环。执行新的for循环。
图三图四：我tab点击之后，执行方法，设置了标识来跳出for循环，好像有点作用，但也有bug，（应该是在tab切换过于频繁时，出现请求数据不是一个一个来的）
**望掘友指点一二。谢谢
![[送心]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_56.5777828.png)
展开
8
点赞
![[微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_1.7d9f699.png)
![[不失礼貌的微笑]](http://lf-web-assets.juejin.cn/obj/juejin-web/xitu_juejin_web/img/jj_emoji_16.9d17f6d.png)