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 设计之初是为 ...
随机推荐
- Eclipse-Java代码规范和质量检查插件-SonarLint
SonarQube(Sonar)之前的提供的本地工具是需要依赖SonarQube服务器的,这样导致其运行速度缓慢. 新出的SonarLint的扫描引擎直接安装在本地,速度超快,实时探测代码技术债务,给 ...
- C#——await与async实现多线程异步编程
曾经,我们也许用过Thread.在主线程运行的时候.新开还有一个新线程,来运行新方法. 今天看别人发给我的一段代码的时候发现了一个不认识的await,可是又感觉非常熟悉的样子,感觉是线程那块儿的东西, ...
- 编程算法 - n个骰子的点数(递归) 代码(C)
n个骰子的点数(递归) 代码(C) 本文地址: http://blog.csdn.net/caroline_wendy 题目: 把n个骰子仍在地上, 全部骰子朝上一面的点数之和为s. 输入n, 打印出 ...
- YII数据流程浅析
MVC就不解释,直接上代码分析数据流程: 数据库图: 模型部分介绍: <?php /* * 前两个方法必须写 * 继承自CActiveRecord类 这个类位于 \framework\db\ar ...
- HDU1236 排名 题解
Problem Description 今天的上机考试尽管有实时的Ranklist,但上面的排名仅仅是依据完毕的题数排序,没有考虑 每题的分值,所以并非最后的排名.给定录取分数线.请你敲代码找出最后 ...
- Python爬虫开发【第1篇】【HTTP与HTTPS请求与响应】
一.HTTP.HTTPS介绍 HTTP协议(超文本传输协议):一种发布.接收HTML页面的方法 HTTPS协议:简单讲是HTTP安全版,在HTTP下加入SSL层 SSL(安全套接层),用于WEB的安全 ...
- npm won't install packages “npm ERR! network tunneling socket could not be established, cause=Parse Error”
昨天在使用npm安装react-native的时候一直报网络不能connection,可是在浏览器中直接访问时是成功,搜索百度无果,最后在google中找到了这个解决方案:http://stackov ...
- qemu常见选项解析
1 -hda file -hdb file.-hdc file.-hdd file 把文件当成hard disk 0.hard disk 1.hard disk 2和hard disk 3. 2 -a ...
- Ubuntu新版中javascript-common.conf害死人啊
自动把javascript目录映射到系统的/usr/share 下面了,删掉对应的软链接再重启就好了
- 【Codeforces】716D Complete The Graph
D. Complete The Graph time limit per test: 4 seconds memory limit per test: 256 megabytes input: sta ...