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 设计之初是为 ...
随机推荐
- Redis基于客户端分片的集群案例（待实践）
说明: 下面的示例基本都是基于Linux去实现,目的是为了环境的统一,以便于把性能调整到最优.且基于Java.建议生产环境不要使用Windows/Mac OS这些. 在Java领域,基于客户端进行分片 ...
- Analyzing Storage Performance using the Windows Performance Analysis ToolKit (WPT)
https://blogs.technet.microsoft.com/robertsmith/2012/02/07/analyzing-storage-performance-using-the-w ...
- 2011:Audio Classification (Train/Test) Tasks - MIREX Wiki
Contents [hide] 1 Audio Classification (Test/Train) tasks 1.1 Description 1.1.1 Task specific mailin ...
- ubuntu12.04安装NVIDIA显卡驱动和CUDA
1.安装显卡驱动 vim /etc/modprobe.d/blacklist.conf #编辑该文件 blacklist nouveau #行末添加,禁用原来的显卡驱动 apt-get install ...
- #pragma pack (n) 惹的祸
今天遇到了一个问题,使用数据流传输的数据在解析的时候数据错位.想了非常久,发现是#pragma pack (n)惹的祸. 首先.解析方使用了编译字节设置,可是在发送方没有使用,于是用相同的结构体解析数 ...
- Python按行输出文件内容具体解释及延伸
下面两端測试代码分别为笔者所写,第一段为错误版本号.后者为正确版本号: #! /usr/bin/python2.7 try: filename = raw_input('please inpu ...
- 【OI】指针线段树&指针
对于线段树,我们一般需要n*4的空间去存储线段树,然后有一种玄学操作是用指针来实现线段树. #include <inttypes.h> #include <algorithm> ...
- Semaphore and SemaphoreSlim
https://msdn.microsoft.com/en-us/library/z6zx288a(v=vs.110).aspx The System.Threading.Semaphore clas ...
- P1198 [JSOI2008]最大数（线段树）
P1198 [JSOI2008]最大数(线段树) 题目描述 现在请求你维护一个数列,要求提供以下两种操作: 1. 查询操作. 语法:Q L 功能:查询当前数列中末尾L个数中的最大的数,并输出这个数的值 ...
- Java 基础 —— 注解
注解(annotation)不是注释(comment): 注解,是一种元数据(metadata),可为我们在代码中添加信息提供了一种形式化的方法.注解在一定程度上实现了元数据和源代码文件的结合,而不是 ...