news 2026/5/1 5:58:49

从 axios / Promise 到 Dio / Future:一次讲透 Flutter 的异步与并发模型

作者头像

张小明

前端开发工程师

1.2k 24
文章封面图
从 axios / Promise 到 Dio / Future:一次讲透 Flutter 的异步与并发模型

前言

很多人学 Dio、async/await,会卡在几个问题上:

  • async / await到底是不是异步?

  • 为什么await写多了感觉变慢了?

  • 并发到底是怎么来的?

  • 前端 axios 和 Flutter Dio 是不是一套东西?

本文不讲“怎么调接口”,而是把模型讲清楚
一旦理解这个模型,前端 / Flutter / 后端异步代码会全部打通

一、Dio / axios 本质是什么?

一句话:

Dio(Flutter)≈ axios(前端)

它们都只是:

  • 一个 HTTP 客户端

  • 基于异步模型(Future / Promise)

  • 支持拦截器(请求 / 响应 / 错误)

你学会其中一个,另一个几乎是零成本迁移

二、Future ≈ Promise(这是根)

前端Flutter
PromiseFuture
then / catchthen / catchError
async / awaitasync / await
Promise.allFuture.wait

Future / Promise 的核心语义只有一句话:

现在没有结果,未来会有一个结果。

三、async / await 到底干了什么?

这是最容易被误解的地方。

结论先行(很重要)

async≠ 并发 ≠ 开线程
async只做两件事:

  1. 允许你使用await

  2. 把返回值包装成Future

await 的准确语义(不会错版本)

final result = await future;

含义是:

在“当前函数”里,
等这个 Future 完成后,
再执行下一行代码。

⚠️ 注意:

  • 只影响当前函数

  • 不会阻塞 UI 线程

  • 不会影响其他任务执行

四、为什么 await 看起来是“串行”?

因为在函数内部视角,它确实是串行的:

await A(); await B();

语义就是:

B 一定在 A 完成之后才执行

✔️ 串行
❌ 但不是阻塞线程

五、并发的真正来源(最核心结论)

❌ 错误理解

并发是 async / await 带来的

✅ 正确理解(定锚句)

并发来自“同时创建多个 Future / Promise”

串行写法(边创建边等)

await loadUser(); await loadOrder();

并发写法(先创建,再 await)

final userFuture = loadUser(); final orderFuture = loadOrder(); final user = await userFuture; final order = await orderFuture;

标准并发写法(推荐)

final results = await Future.wait([ loadUser(), loadOrder(), ]);

前端完全等价:

await Promise.all([ fetchUser(), fetchOrder(), ]);

六、Dio / axios 拦截器:其实是一回事

前端 axios

  • 请求拦截器

  • 响应拦截器(成功 / 失败)

Flutter Dio

  • onRequest

  • onResponse

  • onError

本质模型完全一致,只是 Dio 把“错误”单独拆出来了。

七、为什么前端没有“错误拦截器”这个名字?

因为 axios 是这样定义的:

axios.interceptors.response.use( successHandler, errorHandler );

👉第二个参数本身就是“错误拦截器”
只是前端习惯把它归类在“响应拦截器”里。

八、并发 + 部分成功(工程常用)

前端

const results = await Promise.allSettled([ apiA(), apiB(), apiC(), ]);

Flutter

await Future.wait([ apiA().catchError((_) => null), apiB().catchError((_) => null), apiC().catchError((_) => null), ]);

思想完全一致:

不要让一个接口失败拖垮整个页面

九、关于“解构”的现实建议(很重要)

  • JS 解构(const [a, b] = ...)是语言强项

  • Dart 更强调清晰、显式、可维护

所以在 Flutter 项目里:

final res = await Future.wait([...]); final a = res[0]; final b = res[1];

👉这是完全正确、被广泛接受的工程写法

不需要强行“JS 化”。

十、最终总结

你现在已经真正理解了:

  • Promise ≈ Future

  • axios ≈ Dio

  • async / await ≠ 并发

  • await = 当前函数内的串行点

  • 并发 = 同时创建多个任务

  • 拦截器模型是跨端统一的

这是一套“可迁移的能力”,不是某个框架的死知识。

下一篇:

Dio 工程化实战篇(拦截器 + 并发 + 错误设计)

版权声明: 本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若内容造成侵权/违法违规/事实不符,请联系邮箱:809451989@qq.com进行投诉反馈,一经查实,立即删除!
网站建设 2026/5/1 5:57:55

Kodi中文增强插件库 - 开启你的中文媒体之旅

Kodi中文增强插件库 - 开启你的中文媒体之旅 【免费下载链接】Kodi中文插件库下载 这是一个专为Kodi媒体中心用户打造的中文插件库,旨在为用户提供丰富的中文媒体内容体验。插件库包含视频点播、直播电视等实用功能,均支持中文界面和内容,操作…

作者头像 李华
网站建设 2026/5/1 5:58:28

企业级IDEA许可证管理实战:从激活到部署

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容: 创建企业级IDEA许可证管理系统,功能包括:1. CSV批量导入设备信息 2. 自动分配激活码 3. 使用期限监控看板 4. 到期前30天邮件提醒 5. 生成许可证使用分析报告…

作者头像 李华
网站建设 2026/4/30 10:51:44

Open-AutoGLM 入门必看:7个关键步骤带你实现每日效率翻倍

第一章:Open-AutoGLM 入门导览与环境准备Open-AutoGLM 是一个面向自动化生成语言模型任务的开源框架,支持任务编排、模型调用与结果评估一体化流程。本章介绍如何搭建本地开发环境并运行首个示例任务。框架核心特性 支持多模型后端接入(如 GL…

作者头像 李华
网站建设 2026/4/25 0:22:39

Dify平台RAG系统构建指南:三步打造智能检索与生成!

简介 本文详细介绍如何在Dify平台上构建RAG(检索增强生成)系统,通过"知识库"功能实现私有文档的智能检索与生成。文章分三步走:创建知识库、上传文档并进行分段处理、配置Embedding模型和文本分段参数。特别强调"召…

作者头像 李华
网站建设 2026/4/26 15:15:53

计算机技术与科学毕业设计最全课题指导

1 引言 毕业设计是大家学习生涯的最重要的里程碑,它不仅是对四年所学知识的综合运用,更是展示个人技术能力和创新思维的重要过程。选择一个合适的毕业设计题目至关重要,它应该既能体现你的专业能力,又能满足实际应用需求&#xf…

作者头像 李华
网站建设 2026/4/28 21:38:39

1分钟快速验证:用EXISTS解决实际业务问题

快速体验 打开 InsCode(快马)平台 https://www.inscode.net输入框内输入如下内容: 请根据以下业务需求立即生成可执行SQL:我们需要分析客户留存情况,找出在2023年Q1有购买但在Q2没有购买的客户。数据库包含customers(id,name)和orders(id,cu…

作者头像 李华