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