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 设计之初是为 ...
随机推荐
- 域名添加HTTPS
准备 需要python版本为2.7以上,所以centos6需要把2.6升级成2.7 升级python ###安装python2.7 tar -xvf Python-2.7.5tar.bz2 cd Py ...
- 016 ppp authentication
Press RETURN to get started! Router>en Router#config t Enter configuration commands, one pe ...
- 使用RoboCopy 命令[转载]
经常进行文件管理操作的朋友们,不满意于Windows系统内置的复制功能,因为它太龟速了.于是大家就使用FastCopy.TeraCopy之类的软件来加速复制,但是你是否知道Windows 7已经内置快 ...
- 关于android中的单位（dp、sp）
android让人头疼的适配问题. --------- Android 中的单位大概有这些: 经常使用的dip.sp.有时候用到px. --------- 介绍两个类: TypedValue:有一些单 ...
- C# VS如何整个项目中查找字符串
Ctrl+F打开查找对话框,然后输入查找字符串,电机右边的小三角,选择整个解决方案,就可以遍历所有文件查找指定字符了
- Js、Jquery对goTop功能的实现
本文介绍用原生JS和Jquery分别实现的网页goTopbutton功能,以及在这个过程中碰到的问题. 终于实现的效果类似:http://sc2.163.com/home(注意右下角的top) 代码: ...
- C++入门学习——模板
为什么须要模板? 我们已经学过重载(Overloading),对重载函数而言,C++ 通过函数參数(參数个数.參数类型)的正确匹配来调用重载函数.比如.为求两个数的最大值,我们定义 max () 函数 ...
- 75. Autorelease机制及释放时机
Autorelease机制是iOS开发人员管理对象内存的好伙伴.MRC中.调用[obj autorelease]来延迟内存的释放是一件简单自然的事:ARC下,我们甚至能够全然不知道Autoreleas ...
- ios7 UIBarButtonItem 默认蓝色
[self.navigationItem setLeftBarButtonItem:leftButton]; 这样设置在ios7上button默认是蓝色 解决方法: leftButton.tintCo ...
- 【bzoj2748】[HAOI2012]音量调节
设F[i][j]表示在第i首歌曲结束后,音量能否刚好为j 转移:F[i][j]=F[i][j-C[i]] or F[i][j+C[i]] 初始化:F[0][beginlevel]=true 最后在所有 ...