http网络请求与下载进度

news/2024/9/18 9:05:14/ 标签: http, 网络协议, 网络
http://www.w3.org/2000/svg" style="display: none;">

Http_request 目录

一、XMLHttpRequest

在使用 Fetch API 进行网络请求时,原生的 Fetch API 并不直接支持获取下载进度的功能,因为 Fetch API 主要是基于 Promise 的,它主要关注于请求的成功或失败,以及响应数据的处理,而不直接处理像进度跟踪这样的底层细节。

不过,你可以通过一些技巧或方法间接实现下载进度的跟踪。以下是一些常用的方法:

1. 使用 XMLHttpRequest

虽然 Fetch API 较为现代,但如果你需要跟踪下载进度,XMLHttpRequest 可能是一个更好的选择。XMLHttpRequest 提供了 onprogress 事件,可以用来追踪下载进度。

var xhr = new XMLHttpRequest();
xhr.open('GET', 'your-file-url', true);
xhr.responseType = 'blob';xhr.onprogress = function (e) {if (e.lengthComputable) {var percentComplete = (e.loaded / e.total) * 100;console.log(percentComplete + '% downloaded');}
};xhr.onload = function () {if (this.status == 200) {// 处理响应数据}
};xhr.send();

在上述代码中,我们创建了一个 XMLHttpRequest 对象,并设置了 onprogress 事件处理函数。在该函数中,通过判断 e.lengthComputable 是否为真,来确定是否可以计算下载进度。如果可以计算,则通过 e.loaded 和 e.total 计算出已下载的百分比,并将其打印到控制台

2.XMLHttpRequest 的进一步封装

   xhrToDownload(options, onProgress, onSuccess, onError) {return new Promise((resolve, reject) => {const xhr = new XMLHttpRequest();xhr.open(options.method || 'GET', options.url);xhr.responseType = options.responseType || 'blob';xhr.onprogress = function(e) {if (e.lengthComputable) {const progress = (e.loaded / e.total) * 100;onProgress && onProgress(progress);}};xhr.onload = function(e) {if (xhr.status === 200) {// onSuccess && onSuccess(xhr.response);console.log('上传成功', xhr);resolve({ status: xhr.status, data: xhr.response })} else {onError && onError(xhr.statusText);reject({ status: xhr.status, data: xhr.statusText }); // 拒绝 Promise}}xhr.onerror = function(e) {onError && onError(xhr.statusText);reject({ status: xhr.status, data: xhr.statusText }); // 拒绝 Promise};xhr.send();});},

这个示例进一步封装了 XMLHttpRequest,使其可以返回一个 Promise,方便进行异步处理。

3. 创建 a 标签下载

        downloadFile(blob, fileName = '2.mp4') {// 创建a 标签const a = document.createElement('a');const blobUrl = URL.createObjectURL(blob);a.setAttribute('href', blobUrl);a.setAttribute('download', fileName);a.style.display = 'none';document.body.appendChild(a);a.click();document.body.removeChild(a);URL.revokeObjectURL(blobUrl)},

使用实例:

    async downloadVideo(row) {const url = row.path;if (!url) {return;}var index = this.tableData.findIndex(item => item.id === row.id);// 使用示例const response = await this.xhrToDownload({ url: url }, (progress) => {console.log('Download progress:', progress);if (index !== -1) {this.tableData[index].downLoadProgress = progress}}, (res) => {// 这里处理 Blob,例如保存到 IndexedDB、FileSystem API 或其他console.log('Download successful:', res);// 如果你确实需要下载文件,可以在这里创建 <a> 标签并触发点击}, (error) => {console.error('Download failed:', error);})if (response && response.status === 200) {this.downloadFile(response.data)}},

二、 Fetch API

1. 使用 Fetch API

  • 链式调用

            fetch(url).then(res => {return res.blob()}).then(res => {console.log('res', res);})
    
  • async - await 语法糖

        // const response = await fetch(url)// const blod = await response.blob()

2. 使用 Stream API 和 ReadableStream

Fetch API 支持响应体作为 ReadableStream,但直接使用它来跟踪进度可能不太直观。不过,你可以通过监听流的读取操作来大致估计进度(虽然这通常不如 XMLHttpRequest 那样精确)。

    //your_file_url fetch('http://127.0.0.1:456/proxy/DJI_0003.MP4')fetch('http://127.0.0.1:456/proxy/DJI_0003.MP4').then(response=>{console.log(response);const reader = response.body.getReader() //  ReadableStreamconst contentLength = response.headers.get('content-length')let readTotal = 0if(!contentLength){console.log('无法获取进度');return}const sizeTotal = parseInt(contentLength)const chunks =[]function read(){reader.read().then(({done,value})=>{if(done){console.log('下载完成');const type = response.headers.get('content-type')const blob = new Blob(chunks,{type})return}readTotal += value.lengthconst progress = Math.ceil(readTotal/sizeTotal*100)console.log('下载进度:',progress);chunks.push(value)read()})}read()})

注意:上面的代码示例并不直接计算下载进度,因为 ReadableStream API 并不直接提供总大小信息(除非你在响应头中通过 Content-Length 获取)。你需要有一个方式来获取文件的总大小,以便能够计算进度。

3. 使用fetch下载并获取进度

简单获取下载进度fetchToDownlod(url, options, onProgress, onSuccess, onError) {try {// eslint-disable-next-line no-async-promise-executorreturn new Promise(async(resolve, reject) => {const response = await fetch(url, options);const reader = response.body.getReader();// Step 2:获得总长度(length)const contentLength = +response.headers.get('Content-Length');console.log('contentLength', contentLength);// Step 3:读取数据let receivedLength = 0; // 当前接收到了这么多字节const chunks = []; // 接收到的二进制块的数组(包括 body)// eslint-disable-next-line no-constant-conditionwhile (true) {const { done, value } = await reader.read();if (done) {// 如果没有更多的数据可读,则退出循环break;}chunks.push(value);receivedLength += value.length;const progress = Math.round(receivedLength / contentLength * 100);onProgress && onProgress(progress);}// 将响应体转换为 Blob 对象const blob = new Blob(chunks, { type: 'application/octet-stream' });if (response.status === 200) {resolve({ status: response.status, blob });}if (response.status === 404) {reject({ status: response.status, blob });}});} catch (err) {console.log('err', err);return Promise.reject(err);}},

调用实例:

       async downloadVideo(row) {const url = row.path;if (!url) {return;}let fileName = 'text.mp4'const lastIndex = url.lastIndexOf('/');if (lastIndex !== -1) {fileName = url.substring(lastIndex + 1);}var index = this.tableData.findIndex(item => item.id === row.id);const options = {method: 'GET', // *GET, POST, PUT, DELETE, etc.mode: 'cors', // no-cors, *cors, same-origincache: 'no-cache', // *default, no-cache, reload, force-cache, only-if-cachedcredentials: 'same-origin', // include, *same-origin, omitresponseType: 'blob', //重要代码'Access-Control-Allow-Origin': '*','Access-Control-Allow-Credentials': true,headers: {'Content-Type': 'application/json'}}const res = await this.fetchToDownlod(url, options, (progress) => {// console.log('Download progress:', progress);if (index !== -1) {this.tableData[index].downLoadProgress = progress}})console.log('res', res);if (!res || res.status !== 200) {return this.$message.error('下载失败')}this.downloadFile(res.blob, fileName)},

结论

如果你的应用需要精确地跟踪下载进度,并且你的环境允许,使用 XMLHttpRequest 可能是最直接和简单的方法。如果你正在寻找更现代的方法,并可以接受一些复杂性,你可以考虑使用 Service Workers 或 Stream API 来实现类似的功能。


http://www.ppmy.cn/news/1525199.html

相关文章

微信小程序开发——比较两个数字大小

在这里我们使用的工具是 需要自行安装和配置。 在微信小程序中比较两个数字大小有以下几种方式&#xff1a; 一、普通条件判断 在小程序的.js 文件中&#xff0c;先定义两个数字&#xff0c;如let num1 5; let num2 3;。通过if - else if - else语句&#xff0c;根据num1与…

MVC设计模式与delegate,tablview,Appdelegate,SceneDelegate

一、MVC MVC就是Model&#xff08;模型&#xff09;、View&#xff08;视图&#xff09;、Controller&#xff08;控制器&#xff09; 例如上面的 excel表&#xff0c; 数据、数据结构就是模型Model 根据数据形成的直观的、用户能直接看见的柱形图是视图View 数据构成的表格…

假期学习-- iOS 通知详解

iOS 通知详解 数据结构 从我们之前使用通知的流程和代码来看&#xff0c;通知其实就是一个单例&#xff0c;方便随时访问。 NSNotificationCenter&#xff1a;消息中心 这个单例类中主要定义了两个表&#xff0c;一个存储所有注册通知信息的表的结构体&#xff0c;一个保存…

模版方法模式template method

学习笔记&#xff0c;原文链接 https://refactoringguru.cn/design-patterns/template-method 超类中定义了一个算法的框架&#xff0c; 允许子类在不修改结构的情况下重写算法的特定步骤。 上层接口有默认实现的方法和子类需要自己实现的方法

神经网络学习笔记——如何设计、实现并训练一个标准的前馈神经网络

1.从零设计并训练一个神经网络https://www.bilibili.com/video/BV134421U77t/?spm_id_from333.337.search-card.all.click&vd_source0b1f472915ac9cb9cdccb8658d6c2e69 一、如何设计、实现并训练一个标准的前馈神经网络&#xff0c;用于手写数字图像的分类&#xff0c;重…

【SpringBoot3】面向切面 AspectJ AOP 使用详解

文章目录 一、AspectJ介绍二、简单使用步骤1、引入依赖2、定义一个Aspect3、开启AOP支持 三、AOP 核心概念四、切点&#xff08;Pointcut&#xff09;1. execution2. within3. this & target4. args & args5. within & target & annotation 五、通知&#xff0…

Unix时间戳与C语言的time.h库函数

目录 Unix时间戳介绍 UTC/GMT 时间与秒计数器转换代码 time.h库函数 Unix时间戳介绍 Unix 时间戳&#xff08;Unix Timestamp&#xff09;定义为从UTC/GMT的1970年1月1日0时0分0秒开始所经过的秒数&#xff0c;不考虑闰秒 时间戳存储在一个秒计数器中&#xff0c;秒计数器…

15.5 创建监控控制平面的service

本节重点介绍 : k8s中service的作用和类型创建k8s控制平面的service 给prometheus采集用&#xff0c; 类型clusterIp kube-schedulerkube-controller-managerkube-etcd service的作用 Kubernetes Service定义了这样一种抽象&#xff1a; Service是一种可以访问 Pod逻辑分组…

MATLAB求解0-1线性规划问题的详细分析

引言 0-1线性规划是整数规划中的一种特殊形式&#xff0c;它广泛应用于资源分配、工厂选址、投资组合优化、物流运输等多个领域。0-1线性规划的特点是&#xff0c;决策变量只能取0或1的离散值&#xff0c;通常用于描述“是-否”决策问题。随着计算机技术的发展&#xff0c;数学…

《仙境传说RO:新启航》游戏攻略:VMOS云手机提升装备获取辅助!自由交易,辅助挂机操作!

在《仙境传说RO&#xff1a;新启航》中&#xff0c;想要快速提升战斗力并获取顶级装备&#xff0c;玩家需要熟练掌握多种获取资源与提升角色的途径。为了让玩家更加轻松地享受游戏&#xff0c;VMOS云手机推出了专属定制版云手机&#xff0c;内置游戏安装包&#xff0c;不需要重…

【c++实现】统计上升四元组

&#x1f308;个人主页&#xff1a;Yui_ &#x1f308;Linux专栏&#xff1a;Linux &#x1f308;C语言笔记专栏&#xff1a;C语言笔记 &#x1f308;数据结构专栏&#xff1a;数据结构 &#x1f308;C专栏&#xff1a;C 文章目录 1. 题目描述2. 解释3. DP前缀和枚举 1. 题目描…

使用 nvm 管理 node 版本:如何在 macOS 和 Windows 上安装使用nvm

&#x1f525; 个人主页&#xff1a;空白诗 文章目录 一、引言二、nvm的安装与基本使用2.1 macOS安装nvm2.1.1 使用 curl 安装2.1.2 使用 Homebrew 安装 2.2 Windows安装nvm2.2.1 下载 nvm-windows2.2.2 安装 nvm-windows 2.3 安装node2.4 切换node版本 三、常见问题及解决方案…

graphQL 参数使用报错问题

query{getMembers(sid:0,nodeId:"ns6;i7896"){methods} } //报错 "message": "Field \"methods\" of type \"[UaMethod]\" must have a selection of subfields. Did you mean \"methods { ... }\"?",这个错误信…

观众登记2025中国(深圳)国际智能手机供应链展览会

时间&#xff1a;2024年4月9-11日 地点&#xff1a;深圳会展中心 ◆展会背景background&#xff1a; 近年来&#xff0c;国内手机品牌在全球市场上的影响力不断增强&#xff0c;华为、OPPO、VIVO和小米等…

实战案例(2)防火墙+二交换机VLAN组网

案例二&#xff1a;防火墙充当三层交换机与路由器角色功能进行组网 拿到这样的拓扑后&#xff0c;首先要了解好客户的需求&#xff0c;然后根据需求进行划分 比如客户那边有监控跟办公网络&#xff0c;可以通过VLAN划分不同的区域&#xff0c;然后二层交换机对接终端的口划入到…

Spring Boot属性注入的多种方式!

Spring Boot的一个问题&#xff0c;证明你是不是真正的 "会用" Spring boot ?Spring Boot的一个问题&#xff0c;直接暴露你是不是真正使用Spring Boothttps://mp.weixin.qq.com/s?__bizMzkzMTY0Mjc0Ng&mid2247484040&idx1&sn64ad15d95e44c874cc890973…

国产服务器CPU发展分析

CPU行业概览&#xff1a;信创带动服务器CPU国产化 目前CPU行业由两大生态体系主导&#xff1a;一是基于X86指令系统和Windows操作系统的Wintel体系&#xff0c;主要用于服务器与电脑等&#xff1b;二是基于ARM指令系统和Android操作系统的AA体系&#xff0c;主要用于移动设备…

机器学习和深度学习存在显著区别

机器学习和深度学习在多个方面存在显著的区别&#xff0c;以下是对这些区别的详细阐述&#xff1a; 定义与起源 机器学习&#xff1a;是人工智能的一个分支领域&#xff0c;它使计算机能够从数据中学习并改进其性能&#xff0c;而无需进行显式编程。机器学习起源于20世纪50年代…

认识原码反码补码

目录 一.何为原码反码和补码? (1)原码 (2)反码 (3)补码 (4)总结 二.原反补之间的简单计算 (1)补码加法 (2) 补码减法 (3) 溢出问题 一.何为原码反码和补码? (1)原码 原码:直接将数值按照正负数的形式翻译成⼆进制得到的就是原码。 符号位&#xff1a;最高位&#xf…

uniapp数据缓存和发起网络请求

数据缓存 uni.onStorageSync同步的方式将数据存储到本地缓存 <template><button click"onStorageSync()">存储数据</button> </template><script setup>const onStorageSync () > {// 存储数据uni.setStorageSync(username, 张三)…