前往小程序,Get更优阅读体验!
立即前往
首页
学习
活动
专区
圈层
工具
发布
首页
学习
活动
专区
圈层
工具
MCP广场
社区首页 >专栏 >Flutter 中如何取消任务

Flutter 中如何取消任务

作者头像
睡觉谁叫
发布于 2023-04-22 09:01:25
发布于 2023-04-22 09:01:25
94000
代码可运行
举报
文章被收录于专栏:Flutter性能监控Flutter性能监控
运行总次数:0
代码可运行

前言

在开发过程中,取消需求是很常见的,但很容易被忽略。然而,取消需求的好处也很大。例如,在页面中会发送很多请求。如果页面被切走并处于不可见状态,就需要取消未完成的请求任务。如果未及时取消,则可能会导致以下负面影响:

  1. 消耗用户额外数据流量。
  2. 任务回调持有全局上下文变量,未及时释放存在内存泄漏风险
  3. 异步请求过多消耗大量系统资源,拖慢 UI 线程,造成卡顿。

Flutter 中,如何取消已经在进行的任务呢?首先需要掌握一些基础知识。

前置知识

Future#any 方法

传入一个 Future 任务列表,返回第一个完成的异步任务,无论成功或失败。

定义

用法

如下 5 个异步任务,代码第五行虽然第二执行,但是最先执行完毕,所以第一个返回,至此整个 Future.any 函数执行完毕。

结果输入如下:

总结

  • Future.any 实际就是一个 Completer,N 个 Future 叠加在一起,谁先完成算谁的。
  • Future.any 可以理解成百米赛跑,其中每个选手就是一个 Future,谁跑最快到终点谁就赢了。

Dio 取消实现解析

dio 版本

dio: dev v5.0.3 git: 67f07b86a0976c14a6e19061563832d92ed6772b branch: main

如何取消

请求中传入 CancelToken 对象,然后调用 token.cancel 方法即可

代码语言:javascript
代码运行次数:0
运行
AI代码解释
复制
final cancelToken = CancelToken();
dio.get(url, cancelToken: cancelToken).catchError((DioError err) {
  if (CancelToken.isCancel(err)) {
    print('Request canceled: ${err.message}');
  } else{
    // handle error.
  }
});
// Cancel the requests with "cancelled" message.
token.cancel('cancelled');

流程解析

思路:在实际任务执行前使用 Future.any 函数插入取消任务。如果实际任务没有执行完,就有机会取消它。

如下代码,黄色标注按照步骤来读就行。

总结:CancelToken 就像一个渣男,而 Future.any 则提供了公平竞争的机会。只要妹子还没有交男朋友,渣男就有机会中途得手。

说明

取消任务不仅限于网络请求。任何实际业务中包含不必要的耗时操作都可以通过 Future.any 配合 CancelToken 来实现取消。

本文参与 腾讯云自媒体同步曝光计划,分享自作者个人站点/博客。
原始发表:2023-03-31,如有侵权请联系 cloudcommunity@tencent.com 删除

本文分享自 作者个人站点/博客 前往查看

如有侵权,请联系 cloudcommunity@tencent.com 删除。

本文参与 腾讯云自媒体同步曝光计划  ,欢迎热爱写作的你一起参与!

评论
登录后参与评论
暂无评论
推荐阅读
编辑精选文章
换一批
Flutter 网络请求封装之Dio(Cookie管理、添加拦截器、下载文件、异常处理、取消请求等)
配置一目了然,但是有一个潜在的问题,细心的同学可能会发现,baseUrl的参数是固定的,在实际开发中请求两个及以上的域名地址是有很大可能的,所以我们怎么动态更换baseUrl呢?
yechaoa
2022/06/10
8.6K0
Flutter-Dart基于 Dio 的 HTTP 请求工具类
Flutter 基于 Dio 封装的一个 HTTP 请求工具类(XHttp),使用单例方便全局请求管理与使用。 包括请求拦截、响应拦截、错误拦截、请求 Hooks、日志输出、取消请求、取消重复请求、设置白名单、权限管控、基础请求等等功能。
老猫-Leo
2023/12/11
1.1K2
Flutter3 Dio5 接口请求工具类封装
写在前面:我也是拿来主义,看到@老猫-Leo的【Flutter-Dart基于 Dio 的 HTTP 请求工具类】,封装的蛮好,但是由于我用的是flutter3,拿来后做了一些改动。我把我改动后的封装分享出来,flutter3拿来可用。本文已征得原作者同意,感谢@老猫-Leo的分享。
limbo
2024/01/11
2.5K1
Flutter基础之Dart语言入门:Future异步使用
“ Flutter的开发离不开异步处理,dio是Flutter常用的第三方网络请求插件,这篇就带大家来了解下Flutter的异步和dio的使用”
Qson
2022/04/11
1.8K0
Flutter基础之Dart语言入门:Future异步使用
重走Flutter状态管理之路—Riverpod最终篇
最后一篇文章,我们在掌握了如何读取状态值,并知道如何根据不同场景选择不同类型的Provider,以及如何对Provider进行搭配使用之后,再来了解一下它的一些其它特性,看看它们是如何帮助我们更好的进行状态管理的。
用户1907613
2022/09/03
2.5K0
如何取消ajax请求的回调
我们在开发过程中有时候会碰到这样的需求,连续发送多个ajax请求,请求个数大于等于2,后面的ajax请求发送时,如果前面的ajax请求还没有返回,就取消前面ajax请求回调的执行。
挥刀北上
2020/07/03
4.6K0
Flutter/Dart中的异步
我们所熟悉的前端开发框架大都是事件驱动的。事件驱动意味着你的程序中必然存在事件循环和事件队列。事件循环会不停的从事件队列中获取和处理各种事件。也就是说你的程序必然是支持异步的。
HowHardCanItBe
2020/09/15
1K0
网络请求优化——取消请求
我们可能会遇到这样的场景:当用户切换页面时,上个页面存在pending中的请求。积少成多,如此会造成性能浪费,增加服务器压力。本文在于分享基于小程序提供的请求api及 axios 使用中如何取消不必要的请求。
s4rn
2021/01/06
2.2K0
Flutter 入门指北(Part 13)之网络
很显然,用 HttpClient 请求相对来说是个非常麻烦的过程,如果要涉及到文本上传之类的,那么就会更麻烦了,所以这边引入一个网络请求的插件 dio,写本文的时候版本为 2.1.0。
陈宇明
2020/12/16
1.5K0
Axios 源码笔记 | Cancel 请求取消体系解构,从设计哲学到生产实践的全链路剖析
在现代前端工程实践中,网络请求管理已从简单的收发数据演变为复杂的流程控制。当用户快速切换页面、重复提交表单或执行高频率操作时,未完成的冗余请求可能引发以下问题:
叶一一
2025/04/22
1540
Axios 源码笔记 | Cancel 请求取消体系解构,从设计哲学到生产实践的全链路剖析
Flutter 下载器 | flutter_download_manager源码解析
内容类应用中图片或文件下载,一般应用中应用更新和升级,这些都是经典的下载场景。下载是项目中基础且重要的模块。
睡觉谁叫
2023/03/08
1.2K0
Flutter 下载器 | flutter_download_manager源码解析
Flutter 下载篇 - 贰 | 当下载器遇上网络库切换
继上篇《Flutter 下载篇 - 壹 | flutter_download_manager源码解析》中详细介绍了flutter_download_manager用法和原理。在优缺点中提到,该库纯Dart实现,支持下载管理,暂停,恢复,取消和断点续传。其中有个缺点是网络库与dio强耦合,不支持自定义网络库扩展。
睡觉谁叫
2023/03/08
4850
Flutter 下载篇 - 贰 | 当下载器遇上网络库切换
封装 axios 取消重复请求
在我们web开发过程中,很多地方需要我们取消重复的请求。但是哪种场合需要我们取消呢?我们如何取消呢?带着这些问题我们阅读本文。
coder_koala
2021/01/06
1.7K0
JavaScript中如何取消ajax请求
jQuery为我们封装了ajax请求接口,在jQuery中,取消ajax请求也是通过调用.abort()方法,只不过操作的对象不再是原生XHR对象
刘亦枫
2020/03/19
3.4K0
Flutter 下载篇 - 叁 | 网络库切换实践与思考
本文是关于使用flutter_download_manager下载功能的实践和探索。我们将基于flutter_download_manager的功能扩展,改造成自己想要的样子。在阅读本文之前,建议先了解前两篇文章:
睡觉谁叫
2023/03/08
8420
Flutter 下载篇 - 叁 | 网络库切换实践与思考
Flutter开发-网络请求与JSON转换
如果发送的数据是FormData,则dio会将请求header的contentType设为“multipart/form-data”。
码客说
2020/05/14
3.7K0
Flutter之网络请求封装
应用开发中,网络请求几乎是必不可少的功能,本文将介绍如何通过对 dio 进行二次封装一步一步实现网络请求封装,以便于在项目中方便快捷的使用网络请求。
loongwind
2022/09/27
7.7K1
Flutter之网络请求封装
使用Typescript实现轻量级Axios
文章首发于@careteen/axios(存放了下文涉及所有代码),转载注明来源即可。
Careteen
2022/02/14
3.1K0
使用Typescript实现轻量级Axios
Flutter延时任务、Flutter通过Future与Timer实现延时任务
本文是异步编程的延时策略篇章,在Flutter中实现延时操作有两种方式,一种是通过Future,另一种是通过Timer。
早起的年轻人
2020/08/08
2.9K0
Flutter延时任务、Flutter通过Future与Timer实现延时任务
在 Flutter 和 Dart 中取消 Future 的 3 种方法
本文将引导您了解在 Flutter 和 Dart 中取消 future 的 3 种不同方法。
徐建国
2022/04/27
2.8K0
相关推荐
Flutter 网络请求封装之Dio(Cookie管理、添加拦截器、下载文件、异常处理、取消请求等)
更多 >
领券
问题归档专栏文章快讯文章归档关键词归档开发者手册归档开发者手册 Section 归档
本文部分代码块支持一键运行,欢迎体验
本文部分代码块支持一键运行,欢迎体验