xhr、fetch和axios

登录 · 发表于 2025-7-20 19:17:20

XMLHttpRequest (XHR)

XMLHttpRequest 是最早用于在浏览器中进行异步网络请求的 API。它答应网页在不革新整个页面的情况下与服务器交换数据。

// 创建 XHR 对象
const xhr = new XMLHttpRequest();
// 初始化请求
xhr.open('GET', 'https://api.example.com/data', true);
// 设置请求头（可选）
xhr.setRequestHeader('Content-Type', 'application/json');
// 设置响应类型（可选）
xhr.responseType = 'json';
// 监听状态变化
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status === 200) {
// 请求成功
console.log('Response:', xhr.response);
} else {
// 请求失败
console.error('Error:', xhr.status);
}
}
};
// 可选：处理错误
xhr.onerror = function() {
console.error('Network error occurred');
};
// 发送请求
xhr.send();

复制代码

优点：广泛兼容、支持进度变乱、功能全面
缺点：API 复杂、回调嵌套问题（回调地狱）、不支持 Promise

回调地狱问题

// 第一个请求
const xhr1 = new XMLHttpRequest();
xhr1.open('GET', '/api/data1', true);
xhr1.onreadystatechange = function() {
if (xhr1.readyState === 4 && xhr1.status === 200) {
const data1 = JSON.parse(xhr1.responseText);
// 第二个请求（依赖第一个请求的结果）
const xhr2 = new XMLHttpRequest();
xhr2.open('GET', `/api/data2?param=${data1.id}`, true);
xhr2.onreadystatechange = function() {
if (xhr2.readyState === 4 && xhr2.status === 200) {
const data2 = JSON.parse(xhr2.responseText);
// 第三个请求（依赖第二个请求的结果）
const xhr3 = new XMLHttpRequest();
xhr3.open('POST', '/api/submit', true);
xhr3.setRequestHeader('Content-Type', 'application/json');
xhr3.onreadystatechange = function() {
if (xhr3.readyState === 4 && xhr3.status === 200) {
const result = JSON.parse(xhr3.responseText);
console.log('最终结果:', result);
}
};
xhr3.send(JSON.stringify({ data1, data2 }));
}
};
xhr2.send();
}
};
xhr1.send();

复制代码

为什么不能按顺序写 XHR 请求？
在异步编程中，代码的誊写顺序和实行顺序是两回事。当你按顺序写 XHR 请求时，它们会立刻开始实行，但不会等待前一个请求完成。这会导致严重问题：

// 错误示例：按顺序写但不嵌套
const xhr1 = new XMLHttpRequest();
xhr1.open('GET', '/api/data1', true);
xhr1.onreadystatechange = function() { /* 处理 data1 */ };
xhr1.send();
const xhr2 = new XMLHttpRequest();
xhr2.open('GET', '/api/data2?param=???', true); // 这里需要 data1.id，但 data1 可能还没返回
xhr2.onreadystatechange = function() { /* 处理 data2 */ };
xhr2.send();
const xhr3 = new XMLHttpRequest();
xhr3.open('POST', '/api/submit', true);
xhr3.setRequestHeader('Content-Type', 'application/json');
xhr3.onreadystatechange = function() { /* 处理结果 */ };
xhr3.send(JSON.stringify({ data1, data2 })); // data1 和 data2 都可能不存在

复制代码

为什么会出错？

数据依靠问题：
- 第二个请求必要第一个请求的结果 (data1.id)
- 第三个请求必要前两个请求的结果 (data1 和 data2)
实行顺序不确定：
- 异步请求的完成时间不可预测
- 即使请求 1 先发送，请求 2 和 3 可能先完成
闭包问题：
- 回调函数中的变量会捕捉外部作用域
- 假如不嵌套，变量可能在回调实行时已被修改

嵌套的核心目的：确保实行顺序
通过嵌套回调，你实际上是在告诉步伐：
"只有当请求 1 乐成完成后，才开始请求 2；只有当请求 2 乐成完成后，才开始请求 3"

解决方案

Fetch API

Fetch API 是现代浏览器提供的用于替换 XHR 的新标准，它基于 Promise，提供了更轻便、更强大的接口来处置惩罚网络请求。
重要特点：

基于 Promise，避免回调地狱
支持 async/await 语法
提供 Request 和 Response 对象
支持跨域请求和 CORS
支持流式响应体处置惩罚

基本用法

// 简单的 GET 请求
fetch('https://api.example.com/data')
.then(response => {
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
return response.json(); // 解析为 JSON
})
.then(data => {
console.log('Response:', data);
})
.catch(error => {
console.error('Fetch error:', error);
});
// 使用 async/await
async function fetchData() {
try {
const response = await fetch('https://api.example.com/data');
if (!response.ok) {
throw new Error(`HTTP error! Status: ${response.status}`);
}
const data = await response.json();
console.log('Response:', data);
} catch (error) {
console.error('Fetch error:', error);
}
}
// 带参数的 POST 请求
fetch('https://api.example.com/submit', {
method: 'POST',
headers: {
'Content-Type': 'application/json',
},
body: JSON.stringify({ name: 'John', age: 30 }),
})
.then(response => response.json())
.then(data => console.log(data))
.catch(error => console.error('Error:', error));

复制代码

优缺点：

优点：现代 API、基于 Promise、更轻便、支持流式处置惩罚
缺点：不支持进度变乱、错误处置惩罚必要额外查抄状态码、旧浏览器兼容性差（必要 polyfill）

Fetch API 的局限性详解

1. 不支持进度变乱

Fetch API 的重要计划目的是提供一个现代、轻便的网络请求接口，但它没有内置的进度变乱支持。在上传或下载大文件时，这是一个显着的不足：
XHR 的进度支持：XHR 通过 onprogress 变乱提供上传和下载进度：

xhr.upload.onprogress = function(event) {
if (event.lengthComputable) {
const percentComplete = (event.loaded / event.total) * 100;
console.log(`上传进度: ${percentComplete}%`);
}
};

复制代码

Fetch 的替换方案：Fetch 必要使用更复杂的 ReadableStream API 来实现进度：

fetch('large-file.zip')
.then(response => {
const reader = response.body.getReader();
const contentLength = response.headers.get('Content-Length');
let receivedLength = 0;
return new Response(new ReadableStream({
async start(controller) {
while (true) {
const { done, value } = await reader.read();
if (done) break;
receivedLength += value.length;
const percentComplete = (receivedLength / contentLength) * 100;
console.log(`下载进度: ${percentComplete}%`);
controller.enqueue(value);
}
controller.close();
}
}));
});

复制代码

2. 错误处置惩罚必要额外查抄状态码

Fetch API 的计划与传统 HTTP 错误处置惩罚模式不同：

Fetch 的错误处置惩罚机制：
- 只有网络错误（如断网、DNS 失败）才会触发 reject
- HTTP 错误（如 404、500）不会触发 reject，而是返回一个状态码非 2xx 的 Response 对象

fetch('https://example.com/non-existent')
.then(response => {
// 这里会执行，即使服务器返回 404
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
return response.json();
})
.catch(error => {
console.error('Fetch error:', error);
});

复制代码

XHR 的错误处置惩罚：XHR 的 onerror 变乱会捕捉网络错误，而 HTTP 错误通过状态码判断：

xhr.onerror = function() {
console.error('网络错误');
};
xhr.onreadystatechange = function() {
if (xhr.readyState === 4) {
if (xhr.status >= 400) {
console.error('HTTP 错误:', xhr.status);
}
}
};

复制代码

3. 旧浏览器兼容性差（必要 polyfill）

AXIOS和fetch差异

Axios 是一个基于 Promise 的 HTTP 客户端，专为浏览器和 Node.js 计划。它与原生 Fetch API 有很多区别，这些区别影响着开发者的选择。

具体差异详解

1 错误处置惩罚

Axios：HTTP 错误（404、500 等）会直接 reject Promise

axios.get('/api/data')
.then(response => {
// 仅在 HTTP 状态码为 2xx 时执行
console.log(response.data);
})
.catch(error => {
// 处理所有错误（网络错误和 HTTP 错误）
console.error('请求失败:', error.response?.status);
});

复制代码

Fetch：HTTP 错误不会 reject，必要手动查抄状态码
在 Fetch 请求的 then 回调中，你必要查抄 response.ok 属性或 response.status 状态码：

fetch('https://api.example.com/data')
.then(response => {
// 检查响应状态
if (!response.ok) {
// 手动抛出错误，使 Promise 被 reject
throw new Error(`HTTP error! status: ${response.status}`);
}
// 请求成功，继续处理响应
return response.json();
})
.then(data => console.log('数据:', data))
.catch(error => console.error('请求失败:', error));

复制代码

2 数据格式处置惩罚

Axios：自动解析 JSON 响应

axios.get('/api/data')
.then(response => {
// response.data 已经是解析后的 JSON 对象
console.log(response.data.name);
});

复制代码

Fetch：必要手动解析响应

fetch('/api/data')
.then(response => response.json()) // 手动解析为 JSON
.then(data => console.log(data.name));

复制代码

3 请求取消

Axios：使用 CancelToken

const source = axios.CancelToken.source();
axios.get('/api/data', {
cancelToken: source.token
})
.then(response => console.log(response))
.catch(thrown => {
if (axios.isCancel(thrown)) {
console.log('请求被取消:', thrown.message);
}
});
// 取消请求
source.cancel('用户取消了请求');

复制代码

Fetch：使用 AbortController（必要现代浏览器支持）

const controller = new AbortController();
const signal = controller.signal;
fetch('/api/data', { signal })
.then(response => response.json())
.then(data => console.log(data))
.catch(error => {
if (error.name === 'AbortError') {
console.log('请求被取消');
}
});
// 取消请求
controller.abort();

复制代码

4 进度变乱

Axios：内置支持上传和下载进度

// 下载进度
axios.get('/large-file', {
onDownloadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`下载进度: ${percentCompleted}%`);
}
});
// 上传进度
axios.post('/upload', formData, {
onUploadProgress: progressEvent => {
const percentCompleted = Math.round(
(progressEvent.loaded * 100) / progressEvent.total
);
console.log(`上传进度: ${percentCompleted}%`);
}
});

复制代码

Fetch：必要使用 ReadableStream 手动实现

fetch('/large-file')
.then(response => {
const contentLength = response.headers.get('Content-Length');
const reader = response.body.getReader();
let receivedLength = 0;
return new Response(new ReadableStream({
async start(controller) {
while (true) {
const { done, value } = await reader.read();
if (done) break;
receivedLength += value.length;
const percentComplete = (receivedLength / contentLength) * 100;
console.log(`下载进度: ${percentComplete}%`);
controller.enqueue(value);
}
controller.close();
}
}));
});

复制代码

5 拦截器

Axios：支持请求和响应拦截器，便于统一处置惩罚

// 添加请求拦截器
axios.interceptors.request.use(
config => {
// 在发送请求之前做些什么
config.headers.Authorization = `Bearer ${token}`;
return config;
},
error => {
// 对请求错误做些什么
return Promise.reject(error);
}
);
// 添加响应拦截器
axios.interceptors.response.use(
response => {
// 对响应数据做点什么
return response;
},
error => {
// 对响应错误做点什么
if (error.response.status === 401) {
// 处理未授权情况
}
return Promise.reject(error);
}
);

复制代码

Fetch：不直接支持拦截器，必要手动实现

function fetchWithInterceptor(url, options) {
// 请求拦截
const modifiedOptions = {
...options,
headers: {
...options.headers,
Authorization: `Bearer ${token}`
}
};
return fetch(url, modifiedOptions)
.then(response => {
// 响应拦截
if (response.status === 401) {
// 处理未授权情况
}
return response;
});
}

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。

本帖子中包含更多资源