前端网络请求与数据交互笔记

一、网络请求基础

1. 定义与类型

• 定义：客户端（浏览器）通过 HTTP/HTTPS 协议向服务器请求资源并接收响应的过程。

• 常见类型：

  • 页面加载（HTML/CSS/JS）

  • 资源加载（图片、音视频等）

  • JS 动态发起的 API 请求（AJAX，本课重点）

2. 工作流程

1. DNS 解析域名 → 服务器 IP

2. TCP 三次握手建立连接

3. 发送 HTTP 请求

4. 浏览器解析并加载资源

3. 协议区分

协议	是否网络请求
file://	❌ 本地文件读取
http:///https://	✅ 网络请求

4. 调试工具

• 浏览器 DevTools → Network 面板：查看请求 URL、状态码、类型、大小、耗时等。

---

二、AJAX 核心概念

1. 定义

Asynchronous JavaScript and XML：用 JavaScript 发起异步请求，在不刷新页面的情况下与服务器交换数据并更新页面。

2. 核心特征

• ✅ 异步（不阻塞页面）

• ✅ 与服务器交互

• ✅ 不刷新页面

3. 前后端协作流程

前端（UI） → 发起请求 → 后端（处理数据） → 返回响应 → 前端渲染

---

三、同步与异步

1. 概念对比

类型	特点	生活类比
同步	一件事完成再做下一件	排队等面包烤好
异步	不等结果，先执行其他代码	下单后逛街，10分钟后取

2. 代码示例

同步（阻塞）

console.log('开始');
const result = longTask(); // 阻塞 3 秒
console.log('结果:', result);
console.log('结束');

异步（非阻塞）

console.log('开始');
fetch('/api/data').then(res => res.json());
console.log('结束');

✅ 网络请求必须是异步的，否则页面会卡死。

---

四、三种网络请求实现方式

方式	说明
XMLHttpRequest	原生老 API，功能全但繁琐
Fetch API	现代原生 API，基于 Promise
Axios	第三方库，功能最强，最常用

---

五、XMLHttpRequest（XHR）

1. 使用步骤

1. 创建 XMLHttpRequest对象

2. 调用 open()配置请求

3. 监听状态（onreadystatechange/ onload）

4. 错误处理（onerror）

5. 调用 send()发送请求

2. GET 请求示例

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = () => {
  if (xhr.status === 200) {
    const data = JSON.parse(xhr.responseText);
    console.log(data);
  }
};
xhr.onerror = () => console.log('网络错误');
xhr.send();

3. POST 请求示例

const xhr = new XMLHttpRequest();
xhr.open('POST', 'https://api.example.com/posts', true);
xhr.setRequestHeader('Content-Type', 'application/json');
xhr.send(JSON.stringify({ title: 'Hello' }));

4. readyState 状态描述

状态码	状态	说明
0	请求未初始化	XMLHttpRequest实例已生成，但 open()尚未调用
1	服务器连接已建立	open()已调用，send()尚未调用
2	请求已接收	send()已调用，头部和状态已可获得
3	请求处理中	responseText已包含部分数据
4	请求已完成	响应已就绪，可获取完整数据

5. XMLHttpRequest.status 状态描述

状态码	状态	说明
200 (2xx)	成功	请求正常处理并返回数据
404	未找到	请求的资源不存在
403	禁止访问	服务器理解请求但拒绝执行（权限不足）
500	服务器错误	后端服务器内部异常
其他 (如 401/429)	其他错误	认证失败、请求过多等

6. 关键属性

• readyState：4表示请求完成

• status：200成功，404/403/500失败

---

六、Fetch API

1. 基本用法

fetch(url)
  .then(res => res.json())
  .then(data => console.log(data))
  .catch(err => console.error(err));

2. POST 请求

fetch(url, {
  method: 'POST',
  headers: { 'Content-Type': 'application/json' },
  body: JSON.stringify(data)
});

3. 注意事项

• ❌ 不自动处理超时

• ❌ 不支持拦截器

• ❌ 不兼容 IE

---

七、Axios

1. 核心优势

• ✅ 自动转换 JSON 数据

• ✅ 支持拦截器、取消请求、超时控制

• ✅ 兼容浏览器和 Node.js

2. 使用示例

// GET 请求
axios.get('/user', { params: { id: 1 } })
  .then(res => console.log(res.data));

// POST 请求
axios.post('/user', { name: 'Alice' });

3. Vue 3 + async/await

const sendRequest = async () => {
  try {
    const res = await axios.get('/api/data');
    console.log(res.data);
  } catch (e) {
    console.error(e);
  }
};

---

八、三种方式对比

特性	XHR	Fetch	Axios
语法简洁	❌	✅	✅
Promise 支持	❌	✅	✅
拦截器	❌	❌	✅
超时控制	❌	❌	✅
IE 兼容	✅	❌	✅（需 polyfill）

✅ 选型建议：

• 兼容旧浏览器 → XHR

• 现代轻量项目 → Fetch

• 中大型项目（Vue/React）→ Axios

---

九、请求详解

1. 请求头（Headers）

Header	作用
Content-Type	声明数据类型
Authorization	身份认证（Token）

常见 Content-Type：

• application/json（JSON 数据）

• multipart/form-data（文件上传）

• application/x-www-form-urlencoded（表单数据）

2. 请求方法

方法	用途
GET	获取数据
POST	新建数据
PUT	更新数据
DELETE	删除数据

3. 参数类型

类型	示例
路径参数	/user/1
查询参数	/user?id=1

---

十、网络请求优化

1. 防止重复请求

let requesting = false;
if (!requesting) {
  requesting = true;
  fetch(url).finally(() => requesting = false);
}

2. 缓存策略

localStorage.setItem('data', JSON.stringify(data));

---

十一、Apifox 工具

• API 文档管理

• 接口调试

• Mock 数据（后端未完成时使用）

• 自动化测试

---

📌 一句话总结：

现代前端开发首选 Axios，理解 XHR​ 有助于掌握底层原理，Fetch​ 适合轻量场景，三者共同构成前端网络请求的核心体系。