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 之后直接拿,但是页面会卡,尽量别用。

相关推荐
SomeOtherTime4 小时前
Rust所有权(AI回答)
开发语言·后端·rust
Easyhood4 小时前
Android 开发入门实践(十四):Compose 副作用入门与四个常用 API
android·开发语言·kotlin·android jetpack·compose
白杨尚青5 小时前
C++进阶篇(六):map 和 set 的模拟实现——用红黑树封装 mymap/myset(迭代器 + operator[])
开发语言·c++·迭代器·stl·set·map·红黑树
1-1=07 小时前
Vue 3 模板语
前端·javascript·vue.js
风卿7 小时前
看着AI写代码太孤独了,来欣赏星云吧:一个DSH 装饰插件
前端·javascript
牧艺7 小时前
弹层不用再手算坐标了:CSS Anchor Positioning 从原理到可上线
前端·javascript·css
愚坤9 小时前
前端真有意思,JS还能独立做项目?
前端·javascript·github
饮水桶_T9 小时前
JAVA IO流笔记
开发语言·数据结构·算法
李纲明10 小时前
微信小程序 getSystemInfo 提示已废弃、屏幕高度算错胶囊还对不齐?getWindowInfo 和 getDeviceInfo 怎么接才稳
javascript·微信小程序·小程序·小程序开发·devdiy
Felven11 小时前
C. Brr Brrr Patapim
c语言·开发语言