前言

在现代前端开发中，我们习惯了使用 axios 或 fetch 发请求。但在面试、项目迁移或低版本浏览器适配时仍会被要求手写一个 AJAX 请求并封装成简易的 axios。

接下来从最底层的 XMLHttpRequest 出发，逐步封装出功能完整的请求库，让你彻底搞懂 HTTP 请求的原理。摆脱以下常见痛点：

• ❌ 不知道如何处理 readyState/status导致请求总是失败。
• ❌ 手写回调代码混乱，难以维护。
• ❌ 对请求拦截、统一错误处理毫无头绪。
• ❌ 想用 fetch 但缺少超时、进度等高级特性。

一、AJAX 基础回顾

什么是 AJAX？

Asynchronous JavaScript and XML。从主要思想来看，

• 异步: 不阻塞主线程，请求在后台进行。
• 局部更新: 无需刷新整个页面。
• 数据格式: 现在主流使用 JSON，而非 XML。

XMLHttpRequest 的基本用法

逐行解析：

• const xhr = new XMLHttpRequest; 创建实例，readyState = 0
• xhr.open; 初始化请求，readyState = 1
• xhr.send; 同步发送，会阻塞直至响应返回；怎么说呢，异步时需要监听 onreadystatechange
• xhr.responseText; 返回服务器响应体——同步可以直接获取，异步需要在 readyState === 4 && status === 200

readyState 的五个状态

异步请求的正确写法

 const xhr = new XMLHttpRequest;// 异步：第三个参数为 true
xhr.open;话说回来，xhr . onreadystatechange = function {
console . log;if {
// 成功获取响应
const data = JSON . parse;console . log;document . getElementById
. innerHTML = data
. map
. join;}
}，xhr.send;​
至于**痛点**，很多同学只关心 `onload` 或 `onerror`。忽略了 `readyState` 与 `status` 同时判断，导致 **成功返回却报错**。

二、封装基础版 AJAX 

封装 GET 请求 
 function ajax {
return new Promise => {
const xhr = new XMLHttpRequest;按理说，xhr.open;xhr.onreadystatechange = function {
if {
if {
try {
const data = JSON.parse;resolve，其实，} catch {
// 非 JSON 返回
resolve;}
} else {
reject(
new Error);}
}
}，xhr.send;})，}
// 使用示例
ajax
.n)
.catch);​
说到**痛点**，直接使用回调时容易出现 “回调地狱”。这里通过 **Promise 包装**，让调用方可以链式 `.n/.catch`。

支持 GET 与 POST 
 function ajax{
return new Promise=>{
const xhr=new XMLHttpRequest;xhr.open，if{
// POST 必须声明发送的数据类型
xhr.setRequestHeader;}
xhr.onreadystatechange==>{
if{
if{
try{
const resp=JSON.parse;老实说，resolve，}catch{
resolve;}
}else{
reject);}
}
}，if{
xhr.send);}else{
// GET 不发送请求体
xhr.send;}
})，}
// 示例
ajax
.n);ajax('POST','https://jsonplaceholder.typicode.com/posts'。{title:'foo',body:'bar',userId:1})
.n);​
从**痛点**来看，很多人不清楚 **POST 必须设置 `Content-Type` 并序列化 body**；此实现已经帮你做好这一步。按理说，

三、进阶封装：简易 Axios 实现 

设计思路 


支持多种 HTTP 方法：GET / POST / PUT / DELETE 等。

说到请求拦截器，统一添加 token、统一日志等。

说到响应拦截器，统一错误处理、数据格式化。


配置合并这方面，默认配置 + 每次请求的自定义配置。
.

完整实现
 class MyAxios{
constructor{
// 默认配置
this.defaults={
baseURL:''。timeout:0,headers:{'Content-Type':'application/json'}
};// 合并使用者自定义配置
Object.assign;// 拦截器容器
this.interceptors={request:null,response:null};}
// 注册请求拦截器
useRequestInterceptor{ this.interceptors.request=fn;}
// 注册响应拦截器
useResponseInterceptor{ this.interceptors.response=fn;}
// 主要 request 方法
request{
let finalConfig={...this.defaults,...config};// 执行请求拦截器
if{
finalConfig=this.interceptors.request||finalConfig;}
return new Promise=>{
const xhr=new XMLHttpRequest;// 拼接 URL 与 query 参数
let url=finalConfig.baseURL+finalConfig.url;if{
const qs=Object.entries
.map=>`${encodeURIComponent}=${encodeURIComponent}`)
.join;不过，url+=url.includes?'&':'，'+qs;}
// 初始化请求
xhr.open;// 设置 Header
Object.entries.forEach=>{
xhr.setRequestHeader;})，// 超时处理
if{
xhr.timeout=finalConfig.timeout;xhr.ontimeout==>reject);}
// 响应监听
xhr.onreadystatechange==>{
if{
const response={
从data来看，xhr.responseText,status:xhr.status。statusText:xhr.statusText,headers:xhr.getAllResponseHeaders,config:finalConfig,request:xhr
};// 自动尝试 JSON.parse
try{ response.data=JSON.parse;其实，}catch{}
// 响应拦截器
if{
this.interceptors.response;}
if{
resolve;}else{
reject;}
}
}，const payload=finalConfig.data?JSON.stringify:null;不过，xhr.send，});其实，}
/* ---------- 快捷方法 ---------- */
get{ return this.request;}
post{ return this.request;}
put{ return this.request;}
delete{ return this.request;}
}
// ------------------- 使用示例 -------------------
const axios=new MyAxios({
baseURL:'https://api.github.com'。timeout:5000 // ms，可根据业务自行调整
});// 注册拦截器 – 添加统一 token、日志等
axios.useRequestInterceptor(config=>{
console.log;config.headers='Bearer xxx-token';return config;})，axios.useResponseInterceptor(res=>{
console.log;// 可以在这里统一处理非 2xx 错误，如弹窗提示等
return res;})，// 发起 GET 请求演示
axios.get
.n)
.catch);// 发起 POST 请求演示
axios.post('/repos/octocat/hello-world/issues'。{
title这方面，'Bug report',body:'Found a bug...'
}).n);​
从**痛点**来看，很多同学只会写一次性的 XHR。而不知道如何把 **拦截器、默认配置、快捷方法** 抽离成可复用库。上面的实现已经把这些关键点全部展示来。

四、
：Fetch API 与其局限性 

Fetch 的基本用法 
// GET 示例
fetch
.n(resp=>{
if throw new Error;return resp.json;// 自动解析 JSON
})
.n)
.catch);// POST 示例
fetch('https://jsonplaceholder.typicode.com/posts',{
说到method，'POST'。headers:{'Content-Type':'application/json'},body:JSON.stringify
})
.n)
.n);​
至于**痛点**，初学者往往误以为 `fetch` 会自动抛出网络错误。其实只有网络异常才会进入 `catch`，HTTP 错误仍需手动判断 `response.ok`。

Fetch vs XMLHttpRequest 对比表 

Fetch 的常见缺陷及补救方案

• .不会自动 reject HTTP 错误，需要手动判断 /fetch.n throw…)/.   / li>
• .缺少原生超时需要自行包装： js function fetchWithTimeout{ return Promise.race();}
• .跨域默认不发送 Cookie，需要显式配置： js fetch;

  这也是为什么我们仍然需要熟悉 XHR 并自己实现类似 Axios 的库。

  五、经典面试题实战演练