js同步和异步难点重点详解

1. 解决什么问题?

决定:浏览器发网络请求的时候,代码是停下来等结果,还是继续往下跑别的代码 。 xhr.open(请求方式, 接口地址, 是否异步) 第三个参数:

  • true = 异步(默认值,推荐,日常全部用这个)
  • false = 同步,禁止随便用

✅异步(async=true,默认)

浏览器发起请求 → 不会卡住页面,代码继续往下执行 ; 等后端返回数据了,自动触发onreadystatechange回调函数处理结果。

类比: 你给外卖打电话下单(发请求),你不用站在原地一动不动干等;你可以刷手机、写代码。外卖送到了(请求返回),电话通知你(回调函数执行)。

复制代码
// 异步(默认true,可以省略不写)
xhr.open("GET", apiUrl, true)

特点:页面不会卡死,推荐项目全部使用异步。

❌同步(async=false)

浏览器发起请求之后,原地阻塞,所有代码暂停,页面卡死,必须等到服务器返回结果,代码才能继续往下执行。 如果网络慢,页面直接卡住,按钮点不动,浏览器甚至提示页面崩溃。

类比:打电话点外卖,你拿着手机一动不动,啥也不干,必须等到外卖送到才能做别的事。

复制代码
// 同步写法,不推荐!仅学习了解,项目不要写
xhr.open("GET", apiUrl, false)
xhr.send()
// send执行完,请求结束之后,才会执行后面代码
if(xhr.readyState === 4 && xhr.status === 200){
  console.log(JSON.parse(xhr.responseText))
}

同步异步核心对比表(博客放表格,清晰)

表格

类型 open 第三个参数 特点 优缺点 使用场景
异步 true(默认) 请求发出,代码继续跑,回调拿到结果 页面不卡死,体验好 绝大多数接口请求,日常开发
同步 false 代码暂停,等待请求完成,阻塞主线程 页面卡死,体验极差 几乎不用,特殊底层场景

新手高频坑: 异步请求,不能在 send 后面直接拿返回结果!

复制代码
// ❌错误写法!
xhr.open("GET",url)
xhr.send()
let result = JSON.parse(xhr.responseText) 
// send刚发出去,数据还没回来,responseText是空!
// 拿结果只能写在onreadystatechange回调里面!

一句话记忆:异步,结果在回调里面拿;同步,send 之后直接拿,但是页面会卡,尽量别用。

相关推荐
Dovis(誓平步青云)1 小时前
多个链接不等于多份证据,新闻核验看板怎样合并来源
java·服务器·前端·javascript·人工智能·pdf·电脑
qq_2518364572 小时前
理发管理系统 —— 会员模块
开发语言·前端·python·flask
Dovis(誓平步青云)2 小时前
几个方案来回选不定?做一个随时切换的候选推荐页
android·java·服务器·开发语言·javascript·数据库·智能化
郝学胜-神的一滴2 小时前
AI 编程智能体 03:拆解当下主流智能体能力
开发语言·c++·人工智能·python·程序人生·游戏
言乐62 小时前
Python文字审核模型
开发语言·windows·python·django·pygame
Cc.Y3 小时前
Java零基础入门:方法(函数)深度掌握
java·开发语言
老王爱玩车3 小时前
工具函数——清空输入缓冲区
c语言·开发语言·学习
奋发向前wcx3 小时前
CSP-J复赛模拟赛1 王晨旭补题 2026.10.2
java·开发语言
周杰伦fans3 小时前
轻量模型高并发推理优化技巧
开发语言·人工智能·c#