xhr、fetch和axios

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 都可能不存在

为什么会出错？

  1. 数据依赖问题：

    • 第二个请求需要第一个请求的结果 (data1.id)

    • 第三个请求需要前两个请求的结果 (data1 和 data2)

  2. 执行顺序不确定：

    • 异步请求的完成时间不可预测

    • 即使请求 1 先发送，请求 2 和 3 可能先完成

  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 => {// 这里会执行，即使服务器返回 404if (!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 被 rejectthrow 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;});
}

本文来自互联网用户投稿，该文观点仅代表作者本人，不代表本站立场。本站仅提供信息存储空间服务，不拥有所有权，不承担相关法律责任。
如若转载，请注明出处：http://www.tpcf.cn/web/81998.html

如若内容造成侵权/违法违规/事实不符，请联系多彩编程网进行投诉反馈email:809451989@qq.com，一经查实，立即删除！

相关文章

电脑驱动程序更新工具， 3DP Chip 中文绿色版，一键更新驱动！

电脑驱动程序更新工具， 3DP Chip 中文绿色版，一键更新驱动！

介绍 3DP Chip 是一款免费的驱动程序更新工具，可以帮助用户快速、方便地识别和更新计算机硬件驱动程序。 驱动程序更新工具下载 https://pan.quark.cn/s/98895d47f57c 软件截图 软件特点 简单易用：用户界面简洁明了，操作方便，…
阅读更多...
机器学习与深度学习06-决策树02

机器学习与深度学习06-决策树02

目录 前文回顾5.决策树中的熵和信息增益6.什么是基尼不纯度7.决策树与回归问题8.随机森林是什么 前文回顾 上一篇文章地址：链接 5.决策树中的熵和信息增益 熵和信息增益是在决策树中用于特征选择的重要概念，它们帮助选择最佳特征进行划分。 熵&#…
阅读更多...
【Kotlin】数字字符串数组集合

【Kotlin】数字字符串数组集合

【Kotlin】简介&变量&类&接口 【Kotlin】数字&字符串&数组&集合 文章目录 Kotlin_数字&字符串&数组&集合数字字面常量显式转换数值类型转换背后发生了什么 运算字符串字符串模板字符串判等修饰符数组集合通过序列提高效率惰性求值序列的操…
阅读更多...
oscp练习PG Monster靶机复现

oscp练习PG Monster靶机复现

端口扫描 nmap -A -p- -T4 -Pn 192.168.134.180 PORT STATE SERVICE VERSION 80/tcp open http Apache httpd 2.4.41 ((Win64) OpenSSL/1.1.1c PHP/7.3.10) |_http-server-header: Apache/2.4.41 (Win64) OpenSSL/1.1.1c PHP/7.3.10 | http-methods:…
阅读更多...
近期知识库开发过程中遇到的一些问题

近期知识库开发过程中遇到的一些问题

我们正在使用Rust开发一个知识库系统，遇到了一些问题，在此记录备忘。 错误：Unable to make method calls because underlying connection is closed 场景：在docker中调用headless_chrome时出错 原因：为减小镜像大小&am…
阅读更多...
Ubuntu 22.04 系统下 Docker 安装与配置全指南

Ubuntu 22.04 系统下 Docker 安装与配置全指南

Ubuntu 22.04 系统下 Docker 安装与配置全指南 一、前言 Docker 作为现代开发中不可或缺的容器化工具，能极大提升应用部署和环境管理的效率。本文将详细介绍在 Ubuntu 22.04 系统上安装与配置 Docker 的完整流程，包括环境准备、安装步骤、权限配置及镜…
阅读更多...
C#获取磁盘容量：代码实现与应用场景解析

C#获取磁盘容量：代码实现与应用场景解析

C#获取磁盘容量：代码实现与应用场景解析 在软件开发过程中，尤其是涉及文件存储、数据备份等功能时，获取磁盘容量信息是常见的需求。通过获取磁盘的可用空间和总大小，程序可以更好地进行资源管理、预警提示等操作。在 C# 语言中&a…
阅读更多...
2025年- H56-Lc164--200.岛屿数量(图论,深搜）--Java版

2025年- H56-Lc164--200.岛屿数量(图论,深搜）--Java版

1.题目描述 2.思路 （1）主函数，存储图结构 （2）主函数，visit数组表示已访问过的元素 （3）辅助函数，用递归（深搜），遍历以已访问过的元素&…
阅读更多...
详细到用手撕transformer下半部分

详细到用手撕transformer下半部分

之前我们讨论了如何实现 Transformer 的核心多头注意力机制，那么这期我们来完整地实现整个 Transformer 的编码器和解码器。 Transformer 架构最初由 Vaswani 等人在 2017 年的论文《Attention Is All You Need》中提出，专为序列到序列（seq2s…
阅读更多...
WPF事件处理器+x名称空间

WPF事件处理器+x名称空间

目录 ​编辑 一、事件处理器知识点 1. XAML中的事件绑定 2. C#中的事件处理方法 3. 方法签名解释 4. 命名规范 工作流程 二、导入引用名称空间 三、x名称空间及其常用元素 （1）x名称空间的由来和作用 （2）x名称空间里都有…
阅读更多...
Axure设计案例——科技感渐变线性图

Axure设计案例——科技感渐变线性图

想让数据变化趋势展示告别枯燥乏味，成为吸引观众目光的亮点吗？快来看看这个Axure设计的科技感渐变线性图案例！科技感设计风格凭借炫酷的渐变色彩打破传统线性图的单调，营造出一种令人过目难忘的视觉体验。每一条线条都仿佛是流动的…
阅读更多...
Git全流程操作指南

Git全流程操作指南

Git全流程操作指南 一、Git 环境配置 1. 安装 Git Windows：下载 Git for Windows macOS：brew install git Linux： sudo apt-get update && sudo apt-get install git # Debian/Ubuntu sudo yum install git …
阅读更多...
AI与软件工程结合的未来三年发展路径分析

AI与软件工程结合的未来三年发展路径分析

基于对数字化、制造业、工业、零售业等行业的系统调研，以及微软、谷歌、阿里、华为等大厂的实践案例，我们可以预见未来三年AI与软件工程结合将呈现以下发展路径和趋势。 一、技术应用维度 1. AI辅助编程工具全面普及 未来三年，AI辅助编程工…
阅读更多...
tiktoken学习

tiktoken学习

1.tiktoken是OpenAI编写的进行高效分词操作的库文件。 2.操作过程： enc tiktoken.get_encoding("gpt2") train_ids enc.encode_ordinary(train_data) val_ids enc.encode_ordinary(val_data) 以这段代码为例，get_encoding是创建了一个En…
阅读更多...
DeepSeek 赋能文化遗产数字化修复：AI 重构千年文明密码

DeepSeek 赋能文化遗产数字化修复：AI 重构千年文明密码

目录 一、引言二、文化遗产数字化修复概述2.1 文化遗产数字化修复的意义2.2 传统数字化修复方法与局限 三、DeepSeek 技术剖析3.1 DeepSeek 技术原理与核心优势3.2 相比其他技术的独特之处 四、DeepSeek 在文化遗产数字化修复中的应用4.1 破损文物的智能修复4.2 文化遗产的虚拟…
阅读更多...
leetcode题解513：找树左下角的值（递归中的回溯处理）！

leetcode题解513：找树左下角的值（递归中的回溯处理）！

一、题目内容： 题目要求找到一个二叉树的最底层最左边节点的值。具体来说，我们需要从根节点开始遍历二叉 树，找到最深的那层中的最左边的节点，并返回该节点的值。因为要先找到最底层左侧的值，所以我们选择遍历顺序一定…
阅读更多...
C#面试问题41-60

C#面试问题41-60

41. What is the Singleton design pattern? Singleton is a class that only allows creating a single instance of itselt. 单例设计模式是一个类，它只允许创建自己的单个实例。 构造函数防止他在单例类以外的地方被调用。 使用情景：need a sing…
阅读更多...
笔记思考法

笔记思考法

掌握麦肯锡流笔记术，对大家来说有以下几种好处: 1) 可以将自己的思考可视化，使之变得更加清晰 2) 避免无用功 3) 经常能够提出有创意的想法 4) 遇到问题时能够及时找到解决办法 5) 不管面对什么情况都能够找出真正有效的解决办法 为什么仅仅通过改变使用…
阅读更多...
Rust 学习笔记：关于闭包的练习题

Rust 学习笔记：关于闭包的练习题

Rust 学习笔记：关于闭包的练习题 Rust 学习笔记：关于闭包的练习题问题 1问题 2以下程序能否通过编译？若能，输出是？以下程序能否通过编译？若能，输出是？考虑该 API，空白处填…
阅读更多...
（一）微服务（垂直AP/分布式缓存/装饰器Pattern）

（一）微服务（垂直AP/分布式缓存/装饰器Pattern）

文章目录 项目地址一、创建第一个垂直API1.1 创建Common层1. ICommand接口2. IQuery接口 1.2 创建API1. 实体2. Handler3. endpoint 1.3 使用Marten作为ORM 二、Redis缓存2.1 使用缓存装饰器1. 创建装饰器2. 注册装饰器 2.2 创建docker-compose1. docker-compose2. docker-comp…
阅读更多...
最新文章

Copyright @ 2022~2023