网络请求 on ZiYang FrontEnd Interview

AJAX核心实现原理

Tue, 04 Mar 2025 06:58:24 +0000

考察点分析

该题目主要考察以下核心能力：

异步通信机制：对浏览器端异步请求实现原理的理解
XHR对象掌握：XMLHttpRequest生命周期管理及API使用熟练度
健壮性编程：错误边界处理、超时控制等生产环境必备能力

具体技术评估点：

XMLHttpRequest对象初始化与状态管理
GET/POST请求参数处理差异
跨浏览器事件绑定与错误处理
超时机制实现与异常熔断
响应数据反序列化处理

技术解析

关键知识点

XMLHttpRequest > 异步事件处理 > 请求参数序列化 > HTTP状态码校验

原理剖析

XHR工作流程：
- 创建XHR实例（new XMLHttpRequest()）
- 初始化请求（open(method, url)）
- 绑定事件监听器（onload/onerror/ontimeout）
- 发送请求（send(body)）
事件触发逻辑：
- onload：请求完成时触发（包括HTTP错误状态）
- onerror：网络层异常时触发
- ontimeout：超过指定时限未响应时触发
常见误区：
- 混淆网络错误与HTTP错误状态码处理
- GET请求参数未正确编码导致特殊字符丢失
- 未正确设置POST请求的Content-Type头部

问题解答

XMLHttpRequest工作原理

XMLHttpRequest通过浏览器提供的API实现客户端与服务器的异步通信。其工作流程分为四个阶段：1）创建实例初始化请求 2）配置请求方法和URL 3）设置回调监听网络事件 4）发送请求并处理响应。核心在于通过事件驱动模型处理异步操作，利用readyState跟踪请求状态。

实现代码

 function ajax({
 method = 'GET',
 url,
 data = null,
 headers = {},
 timeout = 5000
} = {}) {
 return new Promise((resolve, reject) => {
 const xhr = new XMLHttpRequest()
 
 // 处理GET查询参数
 if (method === 'GET' && data) {
 const encodedParams = new URLSearchParams(data).toString()
 url = `${url}${url.includes('?') ? '&' : '?'}${encodedParams}`
 }

 xhr.open(method, url, true)

 // 设置请求头
 Object.entries(headers).forEach(([key, value]) => {
 xhr.setRequestHeader(key, value)
 })

 // 超时设置
 xhr.timeout = timeout
 xhr.ontimeout = () => reject(new Error('Request timeout'))

 // 响应处理
 xhr.onload = () => {
 if (xhr.status >= 200 && xhr.status < 300) {
 try {
 const response = xhr.responseText ? JSON.parse(xhr.responseText) : null
 resolve(response)
 } catch (e) {
 reject(new Error('JSON parse error'))
 }
 } else {
 reject(new Error(`HTTP Error ${xhr.status}`))
 }
 }

 // 网络错误处理
 xhr.onerror = () => reject(new Error('Network failure'))

 // 处理POST数据
 let body = null
 if (method === 'POST') {
 const contentType = headers['Content-Type']
 if (data instanceof FormData) {
 body = data
 } else if (contentType?.includes('application/json')) {
 body = JSON.stringify(data)
 } else {
 body = new URLSearchParams(data).toString()
 }
 }

 xhr.send(body)
 })
}

解决方案

代码优化点

参数序列化：自动处理对象到查询字符串的转换
错误隔离：使用try-catch防止响应解析异常
类型安全：区分FormData/JSON/表单编码等格式

扩展建议

性能优化：增加请求中止控制（AbortController）
缓存策略：为GET请求添加cache-busting机制
重试机制：对超时请求进行有限次数重试

深度追问

如何实现请求中断？ 使用AbortController绑定signal到XHR

请求库特性对比

Tue, 04 Mar 2025 06:58:24 +0000

考察点分析

本题主要考察候选人：

框架原理理解：对HTTP请求库核心功能的实现机制理解
技术方案对比：多维度技术选型分析能力
工程化思维：现代前端项目的架构设计考量

具体评估点：

不同请求方案的API设计范式差异
错误处理机制的完整性对比
请求取消方案的技术实现
浏览器兼容性处理策略
现代框架的工程化需求匹配度

技术解析

关键知识点

请求生命周期管理 > 错误边界处理 > API封装复杂度
XHR vs Fetch底层差异
Promise封装策略

核心差异对比

特性	XHR	fetch	axios
API设计	回调驱动	Promise基础	Promise链式+拦截器
错误处理	手动检测状态码	仅网络错误reject	全自动HTTP错误处理
请求取消	xhr.abort()	AbortController	CancelToken/Abort
JSON处理	手动转换	手动json()方法	自动转换
浏览器兼容	IE9+	现代浏览器	XHR垫片方案

典型误区

认为fetch会自动处理HTTP错误（实际仅处理网络层错误）
混淆AbortController与CancelToken的适用场景
忽视XHR的进度事件优势（上传/下载进度监控）

问题解答

原生AJAX基于XHR对象实现，采用事件回调机制，API设计较为冗余。fetch作为浏览器原生API引入Promise，但存在三大痛点：1）400/500状态码不会触发reject 2）默认不带cookie 3）缺乏请求取消原生支持。axios通过封装XHR提供更完善的解决方案：链式API、请求拦截、自动转换JSON、统一错误处理和CSRF防御。现代项目倾向axios因其在工程化需求（类型系统、测试友好性、可扩展性）方面表现更优，且能通过适配器同时支持浏览器/Node.js环境。

解决方案

核心代码示例

 // 错误处理对比示例
// XHR
const xhr = new XMLHttpRequest()
xhr.onload = () => {
 if (xhr.status >= 200 && xhr.status < 300) {
 console.log(JSON.parse(xhr.response))
 } else {
 console.error('请求失败', xhr.status)
 }
}

// fetch
fetch(url)
 .then(res => {
 if (!res.ok) throw new Error(res.status)
 return res.json()
 })
 .catch(handleNetworkError)

// axios
axios.get(url)
 .then(res => console.log(res.data))
 .catch(handleAllError) // 自动包含HTTP错误

可扩展性建议

多环境适配：通过axios的适配器实现SSR同构请求
大流量优化：配合拦截器实现请求节流、重试机制
类型安全：配合TypeScript定义统一响应结构

深度追问

如何实现全局请求拦截？

URI编码方法对比

Tue, 04 Mar 2025 06:58:24 +0000

回答

考察点分析

该题主要考察：

Web安全编码规范：理解不同编码方法对URL结构的保护机制
API差异认知：区分三种编码方法对特殊字符的处理策略
RFC标准实践：掌握URI规范对保留字符的定义及编码要求

核心评估点：

对ASCII字符集外字符（如中文）的编码处理
保留字符（&、=、+等）的编码必要性
不同编码方法对空格的处理差异
废弃API的认知及现代替代方案

技术解析

关键知识点优先级

encodeURIComponent > encodeURI > escape

原理剖析

escape (已废弃)
- 对ASCII字母数字字符不编码
- 空格转为+
- 中文按%uxxxx格式进行Unicode编码
- 保留字符;/?:@&=+$,#不编码
encodeURI
- 设计用于完整URL编码
- 空格转为%20
- 中文进行UTF-8转码
- 保留字符;,/?:@&=+$#不编码
encodeURIComponent
- 设计用于URL参数值编码
- 空格转为%20
- 中文进行UTF-8转码
- 对保留字符;,/?:@&=+$#全部编码

常见误区

误用encodeURI处理参数值导致注入漏洞
认为escape的+号处理符合现代标准
混淆UTF-8编码与Unicode编码差异

问题解答

示例对比：

 const str = "中 &=";

console.log(escape(str)); // %u4E2D%20%26%3D
console.log(encodeURI(str)); // %E4%B8%AD%20&=
console.log(encodeURIComponent(str)); // %E4%B8%AD%20%26%3D

编码差异说明：

空格编码：escape用+，其他用%20
中文编码：escape用Unicode，其他用UTF-8
保留字符处理：只有encodeURIComponent编码所有保留字符

选用建议： URL参数传递必须使用encodeURIComponent，因其对所有保留字符进行编码，避免破坏URL结构。encodeURI适合编码完整URL，escape已废弃不应使用。

网络请求 on ZiYang FrontEnd Interview

AJAX核心实现原理

考察点分析 link

技术解析 link

关键知识点 link

原理剖析 link

问题解答 link

XMLHttpRequest工作原理 link

实现代码 link

解决方案 link

代码优化点 link

扩展建议 link

深度追问 link

请求库特性对比

考察点分析 link

技术解析 link

关键知识点 link

核心差异对比 link

典型误区 link

问题解答 link

解决方案 link

核心代码示例 link

可扩展性建议 link

深度追问 link

URI编码方法对比

回答 link

考察点分析 link

技术解析 link

关键知识点优先级 link

原理剖析 link

常见误区 link

问题解答 link

考察点分析

技术解析

关键知识点

原理剖析

问题解答

XMLHttpRequest工作原理

实现代码

解决方案

代码优化点

扩展建议

深度追问

考察点分析

技术解析

关键知识点

核心差异对比

典型误区

问题解答

解决方案

核心代码示例

可扩展性建议

深度追问

回答

考察点分析

技术解析

关键知识点优先级

原理剖析

常见误区

问题解答