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代码规范和质量检查插件-PMD
PMD是一个源代码分析器. 它发现常见的编程缺陷,如未使用的变量.空catch块.不必要的对象创建等等. 它支持Java.JavaScript.Salesforce.com Apex.PLSQL.Ap ...
- 010 ACL
Router>en Router#config t Enter configuration commands, one per line. End with CNTL/Z. Router(co ...
- 码农小汪-spring框架学习之2-spring IoC and Beans 控制反转 依赖注入 ApplicationContext BeanFactory
spring Ioc依赖注入控制反转 事实上这个东西很好理解的,并非那么的复杂. 当某个Java对象,须要调用还有一个Java对象的时候(被依赖的对象)的方法时.曾经我们的做法是怎么做呢?主动的去创建 ...
- PHP导入和导出CSV文件
CREATE TABLE `student` ( `id` ) NOT NULL auto_increment, `name` varchar() NOT NULL, `sex` varchar() ...
- 程序中使用cocostudio移植到android手机须要的若干配置过程
首先在解决方式下加入现有项: libCocosStudio.vcxproj E$uVS5Sbv! WL:0n"BExtensions.vcxproj libGUI.vcxproj 然后在pr ...
- build.gradle解析
1 providedCompile.testImplementation.implementation.api.runtime.testCompile.classpath.natives 这些都是和p ...
- python 三维坐标图
绘制3D柱状图,其数据格式为,二维数组或三维数组. from numpy import * file=open('C:\\Users\\jyjh\\Desktop\\count.txt','r') a ...
- java操作linux，调用shell命令
import org.junit.jupiter.api.Test; import java.io.BufferedReader; import java.io.IOException; import ...
- H264 介绍[1]
频编解码技术有两套标准,国际电联(ITU-T)的标准H.261.H.263.H.263+等:还有ISO 的MPEG标准Mpeg1.Mpeg2.Mpeg4等等.H.264/AVC是两大组织集合H.263 ...
- YTU 2623: B 抽象类-形状
2623: B 抽象类-形状 时间限制: 1 Sec 内存限制: 128 MB 提交: 235 解决: 143 题目描述 定义一个抽象类Shape, 类中有两个纯虚函数. 具体类正方形类Shape ...