ARTICLE DETAIL

资讯详情

深耕郑州网站建设与运营推广的一线实战洞察。

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

js同步和异步难点重点详解 1. 解决什么问题决定浏览器发网络请求的时候代码是停下来等结果还是继续往下跑别的代码。xhr.open(请求方式, 接口地址, 是否异步)第三个参数true异步默认值推荐日常全部用这个false同步禁止随便用✅异步asynctrue默认浏览器发起请求 →不会卡住页面代码继续往下执行 等后端返回数据了自动触发onreadystatechange回调函数处理结果。类比 你给外卖打电话下单发请求你不用站在原地一动不动干等你可以刷手机、写代码。外卖送到了请求返回电话通知你回调函数执行。// 异步默认true可以省略不写 xhr.open(GET, apiUrl, true)特点页面不会卡死推荐项目全部使用异步。❌同步asyncfalse浏览器发起请求之后原地阻塞所有代码暂停页面卡死必须等到服务器返回结果代码才能继续往下执行。 如果网络慢页面直接卡住按钮点不动浏览器甚至提示页面崩溃。类比打电话点外卖你拿着手机一动不动啥也不干必须等到外卖送到才能做别的事。// 同步写法不推荐仅学习了解项目不要写 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 之后直接拿但是页面会卡尽量别用。
返回列表