企业官网建设流程全解析

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)) }

同步异步核心对比表（博客放表格，清晰）

表格

新手高频坑： 异步请求，不能在 send 后面直接拿返回结果！

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

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