AJAX与Fetch：前端网络请求从入门到精通

一、前言在前端开发中网络请求是必不可少的技能。我们日常开发中渲染列表、提交表单、加载弹窗数据本质都是前端向服务端发送请求、接收数据。而前端网络请求发展史中最经典的两个原生技术就是AJAX(XMLHttpRequest)和Fetch API。二、AJAX 全方位详解2.1 什么是AJAXAJAX 全称Asynchronous JavaScript and XML异步JavaScript和XML。它不是一门新语言而是一种网页局部异步刷新的技术方案。核心作用无需刷新整个页面就能和服务器交换数据更新局部页面内容。通俗理解以前网页提交表单必须整页刷新卡顿且体验差AJAX可以在后台悄悄发请求页面无刷新更新数据这也是现在单页网站的基础。2.2 AJAX 核心特点异步通信请求不会阻塞主线程页面不会卡顿不影响用户操作局部更新只刷新页面需要变动的部分不用重载整个网页数据格式灵活早期使用XML现在主流使用JSON格式传输数据底层依赖原生依靠XMLHttpRequest简称XHR对象实现2.3 原生XHR实现AJAXGET/POST实战AJAX底层原生依靠XMLHttpRequest下面给大家写最标准、可直接运行的原生案例。2.3.1 GET 请求案例// 1. 创建XHR实例对象 const xhr new XMLHttpRequest(); // 2. 初始化请求请求方式、接口地址、是否异步true异步 xhr.open(GET, https://jsonplaceholder.typicode.com/todos/1, true); // 3. 监听请求状态变化 xhr.onreadystatechange function () { // readyState4请求完成status200请求成功 if (xhr.readyState 4 xhr.status 200) { // 解析后端返回的JSON字符串 const res JSON.parse(xhr.responseText); console.log(请求结果, res); } }; // 4. 发送请求GET无需传参填null xhr.send(null);2.3.2 POST 请求案例携带请求体const xhr new XMLHttpRequest(); // 开启请求 xhr.open(POST, https://jsonplaceholder.typicode.com/posts, true); // 设置请求头POST传JSON必须配置 xhr.setRequestHeader(Content-Type, application/json;charsetutf-8); // 监听回调 xhr.onreadystatechange function () { if (xhr.readyState 4) { if (xhr.status 200 xhr.status 300) { console.log(POST请求成功, JSON.parse(xhr.responseText)); } else { console.log(请求失败); } } }; // 发送请求传入JSON格式参数 const postData { title: AJAX学习, body: 原生XHR请求, userId: 1 }; xhr.send(JSON.stringify(postData));2.4 readyState 状态码详解面试必背xhr.readyState 表示请求的当前状态一共5个值0未初始化未调用open()1请求已建立已调用open()未发送请求2请求已发送响应头已接收完成3正在接收响应数据部分数据返回4请求全部完成数据接收完毕业务处理写在这里2.5 XHR 优缺点总结优点兼容性极强兼容所有浏览器包括古老IE功能完善支持请求进度、上传进度监听支持请求中断、超时设置、同步/异步切换缺点代码冗余繁琐配置步骤多基于回调函数容易产生回调地狱原生不支持Promise异步写法不优雅三、Fetch API 全方位详解3.1 什么是FetchFetch是ES6推出的新一代原生网络请求API用来替代老旧的XHR。它原生基于Promise语法语法简洁、语义清晰是目前前端主流原生请求方式。通俗总结Fetch就是升级版AJAX语法更简单、支持Promise、写法现代化唯一缺点是不兼容IE浏览器。3.2 Fetch 基础语法语法结构fetch(resource, options).then().catch()resource接口地址必填options配置项请求方式、请求头、请求体等选填返回值Promise对象3.3 Fetch 实战代码案例3.3.1 最简单的GET请求// GET请求可省略第二个配置参数 fetch(https://jsonplaceholder.typicode.com/todos/1) .then(res { // fetch返回response对象需要解析数据 return res.json(); }) .then(data { console.log(Fetch请求结果, data); }) .catch(err { console.log(请求异常, err); });3.3.2 POST请求带请求参数fetch(https://jsonplaceholder.typicode.com/posts, { // 请求方式 method: POST, // 请求头 headers: { Content-Type: application/json;charsetutf-8 }, // 请求体 body: JSON.stringify({ title: Fetch学习, body: 新版原生请求, userId: 2 }) }) .then(res res.json()) .then(data console.log(POST结果, data)) .catch(err console.log(错误, err));3.3.3 async/await 优雅写法推荐搭配async/await彻底摆脱链式调用代码可读性极高async function getData() { try { const res await fetch(https://jsonplaceholder.typicode.com/todos/2); const data await res.json(); console.log(async请求结果, data); } catch (error) { console.log(请求报错, error); } } getData();3.4 Fetch 重点注意事项踩坑必看Fetch 只有网络彻底失败才会触发catch404、500、401等接口错误不会进入catch需要手动判断res.ok。数据必须解析fetch返回Response对象必须用res.json()/res.text()解析数据。默认不带cookie跨域请求需要手动配置credentials: include。3.5 Fetch 优缺点总结优点语法简洁优雅原生支持Promise代码量少结构清晰支持async/await属于浏览器原生API无需引入第三方库缺点不兼容IE浏览器不支持原生请求进度监听、上传进度监听没有超时中断、重复请求拦截原生能力需要手动封装错误捕获逻辑特殊4xx/5xx不会进入catch四、AJAX(XHR) VS Fetch 核心对比面试高频对比维度XMLHttpRequestAJAXFetch API语法风格回调函数代码冗余Promise语法简洁优雅兼容性极好兼容所有浏览器不兼容IE进度监听支持上传、下载进度监听不支持错误处理通过status状态码判断仅网络报错进catch4xx/5xx需手动判断Cookie携带默认自动携带跨域需手动配置credentials超时控制原生支持timeout原生不支持需封装五、常见面试题总结高频考点5.1 为什么出现FetchXHR设计老旧基于回调函数代码繁琐、可读性差Fetch基于Promise语法现代化契合ES6开发规范更适合现代前端项目。5.2 Fetch 能否替代AJAX不能完全替代。需要进度监听、兼容IE、精准超时控制的场景必须使用XHR普通业务请求优先使用Fetch。5.3 什么是AJAX异步发送网络请求时不会阻塞JS主线程浏览器可以继续执行其他代码请求完成后再执行回调提升页面流畅度。5.4 原生请求为什么常用AxiosAxios基于XHR二次封装解决了Fetch的缺点自带超时、拦截器、自动转换数据、统一错误处理适配业务开发是企业主流选择。六、总结AJAX是技术概念XHR是原生实现方式适合老旧项目、兼容性要求高、需要进度监听的场景。Fetch是现代原生请求方案语法简洁、适配Promise适合绝大多数现代业务开发。两者都属于原生网络请求没有优劣之分只有适用场景之分日常开发优先使用Fetch复杂场景选用XHR企业项目推荐Axios。