HTTP请求API

元信息

• 目标：掌握现代前端发起 HTTP 请求的三种方式——XHR、Fetch、Axios——各自的写法与取舍；能读懂 XHR 的 readyState 状态流转，用 Promise/async-await 驾驭 Fetch
• 关键概念：XMLHttpRequest、readyState、Fetch API、Promise、async/await、Axios、拦截器
• 关联阶段：cp3
• 常见误区：Fetch 拿到 res 就当数据用（还要 res.json() 一次，它本身是 Promise）；以为 fetch 的 catch 能捕获 404/500（HTTP 错误状态不会 reject，要查 res.ok/status）；新项目还从 XHR 学起（看懂即可，写请求用 Fetch/Axios）

综述

现代前端开发一般有三种方式来发起一个HTTP请求

• XMLHttpRequest
• Fetch API
• Axios

XMLHttpRequest（XHR）

老方法，兼容性好，但写法稍繁琐。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

参数说明

open(method, url, async, user, password)

参数	含义
method	请求方法：GET、POST、PUT、DELETE 等
url	请求地址
async	是否异步：true 异步（推荐），false 同步

setRequestHeader(header, value)**设置请求头，如 Content-Type 或 Authorization

onreadystatechange**监听请求状态

readyState	含义
0	未初始化
1	已调用 open()
2	已发送 send()，收到响应头
3	接收响应中
4	请求完成，响应就绪

send(body) 发送请求数据：

• GET → xhr.send()
• POST → xhr.send(JSON.stringify({name: 'Tom'}))

特点：兼容老浏览器，学习底层原理必备，但回调多

Fetch API（现代方法）

基于 Promise，语法简洁，现代浏览器推荐。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

特点：链式调用、可用 async/await，语法现代

Axios（第三方库）

封装好、功能丰富，自动解析 JSON，浏览器和 Node 都可用。

import "./styles.css";

document.getElementById("app").innerHTML = `
<h1>Hello world</h1>
`;

Open Sandbox

特点：

• 自动 JSON 解析
• 支持请求/响应拦截器
• 支持更多高级功能（超时、取消请求等）

总结

方法	特点
XMLHttpRequest	兼容老浏览器，底层原理清晰，但回调多
Fetch API	现代浏览器推荐，基于 Promise，语法简洁
Axios	第三方库，功能丰富，自动处理 JSON 和错误

参考

https://developer.mozilla.org/zh-CN/docs/Web/API/Fetch_API

https://www.freecodecamp.org/news/rest-api-tutorial-rest-client-rest-service-and-api-calls-explained-with-code-examples/