前端面经--网络通信与后端协作篇--XMLHttpRequest、axios、fetch、AbortController

一、XMLHttpRequest

1、什么是 XMLHttpRequest？

XMLHttpRequest（简称 XHR）是浏览器提供的一个异步通信接口，允许网页在不刷新页面的情况下，与服务器交换数据。

它是AJAX（Asynchronous JavaScript and XML）技术的核心，广泛用于早期前端开发中发起 HTTP 请求。

关键词：异步、局部更新、动态刷新

XHR 的引入标志着网页从"静态展示"变为"动态交互"的关键转折。

2、基本使用方式

const xhr = new XMLHttpRequest()

xhr.open('GET', '/api/user', true)

xhr.onreadystatechange = function () {
  if (xhr.readyState === 4 && xhr.status === 200) {
    console.log(xhr.responseText)
  }
}

xhr.send()

3、重要属性说明

属性	含义
readyState	请求状态（0～4），4 表示完成
status	HTTP 状态码（如 200、404）
responseText	返回的字符串数据
responseXML	返回的 XML 数据（已不常用）
onreadystatechange	状态变化时触发的回调函数

4、readyState 状态机说明

值	描述
0	请求未初始化
1	请求已建立，尚未发送
2	请求已发送，收到响应头
3	正在接收响应体
4	请求完成，响应就绪

完整 POST 示例（含 JSON）

const xhr = new XMLHttpRequest()
xhr.open('POST', '/api/login', true)
xhr.setRequestHeader('Content-Type', 'application/json')

xhr.onreadystatechange = () => {
  if (xhr.readyState === 4) {
    if (xhr.status === 200) {
      const data = JSON.parse(xhr.responseText)
      console.log('登录成功', data)
    } else {
      console.error('登录失败', xhr.status)
    }
  }
}

xhr.send(JSON.stringify({ username: 'alice', password: '123456' }))

5、XHR 的优势和局限

✅ 优点：

• 所有浏览器都支持（包括 IE6）

• 可处理复杂场景：进度监听、分块接收等

• 自由控制请求方式与状态码处理

❌ 缺点：

问题	说明
语法繁琐	需手动管理状态、编码结构混乱
回调地狱	没有 Promise，易出错
不支持 async/await	写法不现代化，难维护
不直观	状态码判断、数据解析都要手写逻辑

6、常用高级功能

功能	示例	说明
设置请求头	xhr.setRequestHeader('key', 'value')	如 Content-Type、Authorization 等
设置超时	xhr.timeout = 5000	超时后触发 ontimeout 回调
请求取消	xhr.abort()	可中断请求
监听错误	xhr.onerror = () => {}	网络错误或跨域失败时触发

二、fetch

1、什么是 fetch？

fetch 是 浏览器原生的 HTTP 请求接口 ，用于在前端发送网络请求，基于 Promise 实现，替代早期的 XMLHttpRequest（XHR）。

它支持现代的异步语法（如 async/await），使得请求处理更加清晰、易读。

2、基本语法

fetch(url, options)
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error(error))

• url：请求地址

• options：请求配置对象（method、headers、body 等）

3 、常用配置选项详解

fetch('/api/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer token123'
  },
  body: JSON.stringify({ name: 'Alice' }),
  credentials: 'include', // 携带 cookie
  mode: 'cors' // 跨域请求
})

选项	说明
method	请求方式，如 GET、POST、PUT
headers	请求头配置
body	请求体，仅 POST/PUT 有效
credentials	是否携带 Cookie（如 include）
mode	请求模式：cors、same-origin、no-cors

4、响应处理（Response 对象）

fetch('/api/user')
  .then(response => {
    if (!response.ok) {
      throw new Error('请求失败: ' + response.status)
    }
    return response.json()
  })
  .then(data => console.log(data))

• response.ok：状态码是否是 200-299

• response.status：状态码

• response.json()：解析 JSON 响应体

• 也可以使用 response.text()、response.blob()、response.formData()

5、fetch 常见注意事项

问题	描述
❌ 不自动抛出 HTTP 错误	fetch 只对网络错误抛出异常，4xx/5xx 状态不会报错，需要手动判断
❌ 默认不带 Cookie	需要设置 credentials: 'include'
❌ 不支持请求超时	必须配合 AbortController 手动实现
❌ 不支持拦截器	与 axios 相比，功能较原始，需要自己封装

6、fetch 与 XMLHttpRequest 对比

特性	fetch	XMLHttpRequest
是否原生	✅ 是	✅ 是
Promise 支持	✅ 原生支持	❌ 需手动封装
请求写法	简洁优雅	语法繁琐
错误处理	仅网络失败抛出异常	有 onerror、onload
请求取消	✅ 支持（AbortController）	❌ 需 hack

7、使用场景总结

场景	适用性
简单数据请求	✅ 适合
精细控制请求头/体	✅ 灵活
前端自己封装统一请求模块	✅ 推荐
项目已有 axios 等库	❌ 不建议重复使用 fetch

三、axios

1、什么是 Axios？

Axios 是一个基于 Promise 的浏览器和 Node.js 的 HTTP 客户端。

它封装了 XMLHttpRequest（XHR）请求，在语法、功能、兼容性和错误处理方面都更友好，是前端项目中使用最广泛的请求库之一。

2、Axios 的核心优势

优势	描述
简洁语法	默认封装请求/响应处理
自动转换 JSON	请求数据和返回数据自动处理为 JS 对象
拦截器支持	请求和响应统一处理，如添加 token、错误处理
取消请求	内置取消机制（CancelToken）
浏览器兼容性好	支持 IE 和移动端浏览器
SSR 友好	可在 Node.js 中使用（如在 Nuxt/Next 等服务端渲染框架中）

3、基本使用示例

GET 请求：
import axios from 'axios'
axios.get('/api/user?id=123')
  .then(res => console.log(res.data))
  .catch(err => console.error(err))
POST 请求：
axios.post('/api/login', {
  username: 'alice',
  password: '123456'
})
.then(res => console.log(res.data))
.catch(err => console.error(err))

4、常用配置项（axios 请求选项）

axios({
  url: '/api/user',
  method: 'post',
  headers: {
    'Content-Type': 'application/json',
    'Authorization': 'Bearer xxx'
  },
  data: {
    name: 'Alice'
  },
  params: {
    page: 1,
    size: 10
  },
  timeout: 5000, // 设置超时时间（单位毫秒）
  withCredentials: true // 是否携带 Cookie
})

5 、拦截器机制（非常重要）

拦截器是 axios 的强大功能，允许在请求发送前、响应返回后统一做处理。

请求拦截器：
axios.interceptors.request.use(config => {
  // 在请求发送前做统一处理，如添加 token
  config.headers.Authorization = 'Bearer ' + localStorage.getItem('token')
  return config
})

响应拦截器：
axios.interceptors.response.use(
  res => res.data, // 默认直接返回 data
  err => {
    if (err.response && err.response.status === 401) {
      // 处理未授权错误
      console.warn('未登录或登录过期')
    }
    return Promise.reject(err)
  }
)

6、取消请求（防抖、离开页面时中断请求）

const controller = new AbortController()

axios.get('/api/user', { signal: controller.signal })
  .then(res => console.log(res))
  .catch(err => {
    if (axios.isCancel(err)) {
      console.log('请求取消')
    }
  })

// 手动取消
controller.abort()

7、与 fetch 的对比

特性	axios	fetch
是否原生	❌ 第三方库	✅ 浏览器原生
自动转换 JSON	✅ 自动解析	❌ 手动 .json()
错误处理	✅ 4xx/5xx 会自动抛出	❌ 只抛网络错误
拦截器	✅ 有请求/响应拦截器	❌ 需要手动封装
请求取消	✅ CancelToken / signal	✅ 使用 AbortController
默认超时	✅ 可配置 timeout	❌ 需自己实现超时逻辑

8、常见问题处理

问题	原因/解决
请求失败 401	token 过期，响应拦截器中处理
跨域请求无效	设置 withCredentials: true 且服务端支持
下载文件失败	设置 responseType: 'blob'
后端接口路径变化频繁	使用 baseURL 统一管理

Axios 是一个功能强大、封装完善、兼容性好的 HTTP 客户端，适合绝大多数前端项目使用，尤其适用于中大型应用的请求模块封装与统一管理。

四、AbortController

1、什么是 AbortController？

AbortController 是浏览器原生提供的控制器对象，用来取消正在进行的异步操作（如 fetch 请求）。

它配合 AbortSignal 使用，通过手动调用 .abort() 来中止任务，是现代前端实现"中断请求"的推荐方式。

构成关系

const controller = new AbortController()
const signal = controller.signal
controller.abort()：发出取消信号
signal：传给支持取消的 API（如 fetch），用于监听取消状态

2、常见用途场景

场景	描述
请求超时	避免接口长时间无响应卡住页面
切换页面时中断请求	避免页面卸载后还处理响应导致报错
防抖节流	快速连续点击或输入时，只保留最后一个请求
组件卸载时取消请求	React / Vue 组件卸载后避免内存泄漏

AbortController 是控制异步任务取消的原生工具，适用于 fetch / axios 请求的取消和超时控制，是现代前端必备的稳定性与性能优化手段。

剩还有些内容等博主想到就继续更新