javascript异步下载 Promise实现
一般下载都是直接打开一个链接就行。
var URL = 'XXXX';
window.open(URL)
其实这样会有些问题：
1. 浏览器禁止打开新窗口，导致无法下载
那么怎么解决呢？
这样：
<a href="http://somehost/somefile.zip" download="filename.zip">Download file</a>
注意download属性，它说明要下载，并且文件名：filename.zip
那么如何异步下载？
JS的代码：
var myDownload = function(){};
myDownload.prototype = {
// 同步 下载，只是将上面的例子变为js罢了
download: function( url, filename ){
var a = document.createElement('a');
a.href = url;
a.download = filename;
a.click();
},
// 根据blob对象来下载
downloadByBlob: function(blod,name){
console.log('blod',blod);
name = name || blod.name;
var fileURL = window.URL.createObjectURL(blod); // 转换为可访问的URL
this.download(fileURL, name); // 下载
window.URL.revokeObjectURL(fileURL); //下载后释放URL
},
// 异步 data='name=mynam&age=20'
ajax:function(url,data,method,type,successFuc,errorFuc){
method = method || 'GET';
data = data || '';
type = type || 'blob';
var request = new XMLHttpRequest();
if (window.XMLHttpRequest){
request=new XMLHttpRequest();
}
else if (window.ActiveXObject){
request=new ActiveXObject("Microsoft.XMLHTTP");
}else{
return false;
}
request.open(method, url);
request.responseType = type;
// When the request loads, check whether it was successful
request.onload = function() {
if (request.status === 200) {
if(successFuc){
var filename = request.getResponseHeader('Content-Disposition');
if(filename){
var index = filename.indexOf('filename=');
if(index!==-1){
filename = filename.substring(index+9);
}
}
successFuc(request.response,filename)
}
} else {
if(successFuc){
successFuc(request.response)
}
}
}
request.onerror = function(error) {
// Also deal with the case when the entire request fails to begin with
// This is probably a network error, so reject the promise with an appropriate message
if(errorFuc){
errorFuc(error.response)
}
};
// Send the request
request.setRequestHeader("Content-type", "application/x-www-form-urlencoded");
request.send(data);
},
// 异步下载 没有Promise
downloadAsync:function(url,name,data,method){
var self = this;
this.ajax(url,data,method,'blob',function(blob,filename){
self.downloadByBlob(blob,name||filename);
});
},
// 异步下载 使用Promise
downloadPromise:function(url,name,data,method){
if(window.Promise){
var self = this;
return new Promise(function(resolve, reject) {
console.log(this,'this');
self.ajax(url,data,method,'blob',function(response,filename){
resolve({
data:response,
filename:filename
});
},function(response,filename){
reject({
data:response,
filename:filename
});
})
}).then(function(json){
self.downloadByBlob(json.data,json.filename);
});;
}else{
self.downloadAsync(url,data,method);
}
}
}
PHP的代码：
ini_set('memory_limit', '64M');
$file="myLittleVader.jpg";
header('Content-Type:application/octet-stream');
header('Content-Disposition:attachment; filename='.$file); //设定文件名
header('Content-Length:'.filesize($file));
readfile($file);
HTML：
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge,chrome=1">
<meta name="viewport" content="width=device-width"> <title>异步下载 example</title>
</head> <body>
<h1>异步下载 example</h1>
<a href="#" onclick='DownJs.downloadPromise("download.php")'>DownloadJs</a>
</body> <script type="text/javascript" src="./download.js"></script>
<script>
var DownJs = new myDownload();
</script>
</html>
一般使用download既可以了，可以直接：
DownJs.download(url)
参考：
https://segmentfault.com/a/1190000005863250
promise下载
javascript异步下载 Promise实现的更多相关文章
- JavaScript异步与Promise基本用法(resolve与reject)
Promise解决的问题相信每个前端都遇到过这样一个问题,当一个异步任务的执行需要依赖另一个异步任务的结果时,我们一般会将两个异步任务嵌套起来,这种情况发生一两次还可以忍,但是发生很多次之后,就形成了 ...
- JavaScript异步编程（1）- ECMAScript 6的Promise对象
JavaScript的Callback机制深入人心.而ECMAScript的世界同样充斥的各种异步操作(异步IO.setTimeout等).异步和Callback的搭载很容易就衍生"回调金字 ...
- javascript异步编程，promise概念
javascript 异步编程 概述 采用单线程模式工作的原因: 避免多线dom操作同步问题,javascript的执行环境中负责执行代码的线程只有一个 内容概要 同步模式和异步模式 事件循环和消息队 ...
- JavaScript 异步编程的前世今生（上）
前言 提到 JavaScript 异步编程,很多小伙伴都很迷茫,本人花费大约一周的业余时间来对 JS 异步做一个完整的总结,和各位同学共勉共进步! 目录 part1 基础部分 什么是异步 part2 ...
- 深入理解 JavaScript 异步——转载
本文章转载于深入理解 JavaScript 异步 前言 2014年秋季写完了<深入理解javascript原型和闭包系列>,已经帮助过很多人走出了 js 原型.作用域.闭包的困惑,至今仍能 ...
- Func-Chain.js 另一种思路的javascript异步编程解决方案
本文转载自:https://www.ctolib.com/panruiplay-func-chain.html Func-Chain.js 另一种思路的javascript异步编程,用于解决老式的回调 ...
- JavaScript异步编程的主要解决方案—对不起，我和你不在同一个频率上
众所周知(这也忒夸张了吧?),Javascript通过事件驱动机制,在单线程模型下,以异步的形式来实现非阻塞的IO操作.这种模式使得JavaScript在处理事务时非常高效,但这带来了很多问题,比如异 ...
- JavaScript异步编程原理
众所周知,JavaScript 的执行环境是单线程的,所谓的单线程就是一次只能完成一个任务,其任务的调度方式就是排队,这就和火车站洗手间门口的等待一样,前面的那个人没有搞定,你就只能站在后面排队等着. ...
- javascript异步编程的前世今生，从onclick到await/async
javascript与异步编程 为了避免资源管理等复杂性的问题, javascript被设计为单线程的语言,即使有了html5 worker,也不能直接访问dom. javascript 设计之初是为 ...
随机推荐
- Ubuntu清理内存命令（效果不明显）
注意:最好不要在生产环境上使用!!! 1.检查内存使用情况 watch -n 3 free -m watch -n 3 cat /proc/meminfo 2.清理 #释放页缓存 echo 1 > ...
- 解决confluence的乱码问题
使用confluence时发现一些含有中文的页面中,中文都变成了问号. 继续搜索解决方案,发现时数据库中数据的格式不对, 在mysql中输入以下命令: mysql> show variabl ...
- 条款十六: 在operator=中对所有数据成员赋值
当涉及到继承时,派生类的赋值运算符也必须处理它的基类成员的赋值!否则,当派生类对象向另一个派生类对象赋值时,只有派生类部分赋值了.看看下面: class base { public: ): x(ini ...
- 关于Windows 8使用WMP播放音乐时WUDFHost跑CPU和硬盘的问题解决
Windows 8使用Windows Media Player播放音乐的时候.事实上有一个这种情况,WMP和某个什么名字看起来非常屌的进程跑CPU非常高,这个跑非常高视你插入的SD卡内的文件数或者移动 ...
- 【Android】应用安全——反编译
用java开发最操心的就是得到反编译,所以作为开发人员我们须要知道怎么反编译,那样才干知道怎样防止反编译.保证代码安全. 以下来看下比較经常使用的方法! 第一种方式:利用apktool反编译 1,首先 ...
- leetcode第一刷_Best Time to Buy and Sell Stock
这样的题就不要去考虑N^2的算法了.肯定会超时的.乍一看,非常可能会想到贪心,可是普通的贪心思路是不行的,比方想找到一个最小值用来买入.尽管它跟最大值之间的差一定是最好的,可是最大值出如今它前面就不行 ...
- Redis缓存数据库安全加固指导（二）
背景 在众多开源缓存技术中,Redis无疑是目前功能最为强大,应用最多的缓存技术之一,参考2018年国外数据库技术权威网站DB-Engines关于key-value数据库流行度排名,Redis暂列第一 ...
- Linux环境部署（一）
最近被老大安排了个任务,解决Linux的安装部署问题,特做如下笔记,以便下次安装配置: --------------------Linux上部署项目------------------- 1.解压缩相 ...
- mysql default null empty string concat varchar text
text不可设置默认值 null empty string 前者update 初始值时 我响应,但不报错
- Groonga开源搜索引擎——列存储做聚合，没有内建分布式，分片和副本是随mysql或者postgreSQL作为存储引擎由MySQL自身来做分片和副本的
1. Characteristics of Groonga ppt:http://mroonga.org/publication/presentation/groonga-mysqluc2011.pd ...