政府补贴企业做网站郑州网络推广报价
一、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', // 携带 cookiemode: '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 => {// 在请求发送前做统一处理，如添加 tokenconfig.headers.Authorization = 'Bearer ' + localStorage.getItem('token')return config
})响应拦截器：
axios.interceptors.response.use(res => res.data, // 默认直接返回 dataerr => {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 请求的取消和超时控制，是现代前端必备的稳定性与性能优化手段。
剩还有些内容等博主想到就继续更新