异步请求（一）

如何理解异步请求

理解“异步请求”其实并不复杂，我们可以通过对比、生活场景以及技术原理来逐步拆解。

1. 生活化的类比：点餐的两种方式

为了最直观地理解，我们可以把“请求服务器数据”比作“去餐厅点餐”：

• 同步请求（Synchronous）：你点完餐后，一直站在柜台前死死盯着服务员，什么也不干，直到服务员把饭菜做好端给你，你才端着盘子离开去吃饭。这期间，你被“阻塞”了。
• 异步请求（Asynchronous）：你点完餐并拿到一个取餐号后，就回到座位上去玩手机或和朋友聊天（继续执行其他任务）。等饭菜做好后，餐厅会通过广播或叫号器通知你，你再去端饭。

2. 技术层面的核心概念

在计算机编程中，异步请求的核心是“不等待耗时操作，通过回调处理结果”。

当客户端（比如浏览器或App）发起一个异步请求时：

1. 非阻塞：客户端发送请求后，不会傻等服务器返回数据，而是立刻去执行后续的代码或响应用户的其他点击操作。
2. 后台处理：服务器在后台处理数据。
3. 回调通知：当服务器处理完毕并将数据返回时，客户端会触发一个预先设定好的“回调函数（Callback）”或事件，来处理这些数据并更新界面。

3. 为什么我们需要异步请求？

这主要是为了解决性能和用户体验的问题：

• 避免界面“冻结”：如果在网页上发起同步请求，且网络较慢，整个页面会卡死无响应，用户无法点击任何按钮。而异步请求能让页面保持流畅，数据在后台悄悄加载，加载完后再局部刷新页面（例如我们常见的无刷新点赞、下拉加载更多）。
• 提高并发性能：对于服务器而言，异步处理允许它在等待数据库查询或文件读取等耗时操作时，去处理其他用户的请求，从而大大提高系统的吞吐量和资源利用率。

4. 一个典型的前端异步请求流程是这样的：

1. 页面刚加载时，emp 可能是空的，所以什么都不显示。
2. 前端代码发起一个异步请求（例如使用 fetch 或 axios）去后端要数据。
3. 页面继续渲染其他内容（比如导航栏、侧边栏）。
4. 几毫秒后，后端返回了数据，前端触发回调，将 emp.job = '1' 赋值。
5. Vue 监听到数据变化，自动将“班主任”显示出来。

5. 异步请求的适用场景

总结来说，以下场景几乎都会使用异步请求：

• 网络请求：如调用后端 API、获取列表数据等（因为网络延迟不可控）。
• 文件读写：如大文件的上传与下载，如果同步处理会导致程序卡死。
• 高并发与实时应用：如聊天室消息推送、实时通知等。

注：与之相对的“同步请求”则适用于必须严格按照顺序执行、对数据一致性要求极高的简单快速任务，如验证码发送、本地简单计算等。