美文网首页
XMLHttpRequest下载学习笔记

XMLHttpRequest下载学习笔记

作者: 超越_xing | 来源:发表于2018-06-26 18:30 被阅读0次

    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的感觉。

    相关文章

      网友评论

          本文标题:XMLHttpRequest下载学习笔记

          本文链接:https://www.haomeiwen.com/subject/ftjgqttx.html