XMLHttpRequest下载学习笔记

2018-06-26  本文已影响0人  超越_xing

1:使用背景

需要下载一个zip格式文件到本地,保存解压到本地,然后删除zip文件。

2:遇到的难点

在网上找到的例子都是使用浏览器的API进行保存,使用浏览器的API保存的话就会弹出windos文件管理器,由于很少使用JS 进行开发。导致这里被卡住,这时候一位大神出场,帮忙解决了这个问题。下面就讲讲自己学到的知识点。

3:对应API的理解

(1) : XMLHttpRequest

var req = new XMLHttpRequest();   //new 一个 XMLHttpRequest对象。

req .open(method, url);

req .open(method, url, async);

req .open(method, url, async, user);

req .open(method, url, async, user, password);  

method  要使用的HTTP方法,比如「GET」、「POST」、「PUT」、「DELETE」、等。对于非HTTP(S) URL被忽略。

url :一个DOMString表示要向其发送请求的URL。

async  可选   一个可选的布尔参数,默认为true,表示要不要异步执行操作。如果值为false,send()方法直到收到答复前不会返回。如果true    ,已完成事务的通知可供事件监听器使用。如果multipart属性为true则这个必须为true,否则将引发异常。

user 可选 可选的用户名用于认证用途;默认为null。

password  可选  可选的密码用于认证用途,默认为null。

(2): XMLHttpRequest.responseType 属性是一个枚举值,返回响应的类型。 它还允许作者将响应类型更改为一个"arraybuffer", "blob", "document", "json", 或 "text" 。如果将一个空字符串设置为responseType的值,则将其假定为类型“text”。

req.responseType= "blob";  刚开始参考网上的例子,没有具体的看对应的API ,使用了blob类型。饶了挺大的一个弯才实现了对应的效果。

(3):下面写一下对blob的介绍:

Blob 对象表示一个不可变、原始数据的类文件对象。Blob 表示的不一定是JavaScript原生格式的数据。File接口基于Blob,继承了 blob 的功能并将其扩展使其支持用户系统上的文件。

要从其他非blob对象和数据构造一个Blob,请使用 Blob()构造函数。要创建包含另一个blob数据的子集blob,请使用 slice()方法。要获取用户文件系统上的文件对应的Blob对象,请参阅 File文档。

然后就查看file文档 使用了 FileReader 对 返回的blob 对象进行操作    var fr = new FileReader();

fr.readAsArrayBuffer(rsp); 因为这个操作是异步的,需要监听一个函数来查看返回结果。

 FileReader 接口提供的readAsArrayBuffer() 方法用于启动读取指定的 Blob 或File 内容。当读取操作完成时,readyState 变成 DONE(已完成),并触发 loadend 事件,同时result 属性中将包含一个ArrayBuffer 对象以表示所读取文件的数据。

 fr.onload = function(e) { 

var int8View = new Uint8Array(fr.result);

}

(4): nodejs fs 模块的  fs.writeFile(file, data[, options], callback)  writeFile函数  支持写入 string | Buffer | Uint8Array 这三种格式的数据,所以就转换成  Uint8Array格式的数据,然后写入对应的绝对路径。

(5) : 上文写到responseType  可以指定arraybuffer 类型,就不用上文  FileReader  这一系列的API了

var data = new Uint8Array(rsp.response);     有一种一顿操作猛如虎,一看战绩0-5的感觉。

上一篇下一篇

猜你喜欢

热点阅读