promise: 粗暴理解,不管成功还是失败都会告诉我们 ES6 异步编程的一种解决方案,比传统的方案(回调函数和事件)更加的合理和强大
好处:异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数 promise可以解决异步的问题,本身不能说promise是异步的
什么时候用? 回调地狱(第一个函数返回的值是第二个函数需要的)
怎么用? new Promise(function(resolve,reject){}).then((res)=>{//res成功时的返回值}) //中的函数为异步函数
Promise().then().then…catch() 多任务串行执行
Promise.all() 多任务并行执行
var p1 = new Promise(function (resolve, reject) { setTimeout(resolve, 500, 'P1'); }); var p2 = new Promise(function (resolve, reject) { setTimeout(resolve, 600, 'P2'); });
// 同时执行p1和p2,并在它们都完成后执行then: Promise.all([p1, p2]).then(function (results) { console.log(results); // 获得一个Array: ['P1', 'P2'] });
1、promise有三种状态:
pedding(待定,挂起,未完成)
fulfilled(已成功)
rejected(已失败)
这三种状态的变化最终结果只有两种,也就是说一旦发生了变化,后面将不会有新的变化 异步操作成功,Promise对象传回一个值,状态pedding变为resolved。 异步操作时报,Promise对象抛出一个错误,状态pedding变为rejected
2、then 链式操作的用法
p.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
})
.then((data) => {
console.log(data);
});
3、all的用法:谁跑的慢,以谁为准执行回调。all接收一个数组参数,里面的值最终都算返回Promise对象 let Promise1 = new Promise(function(resolve, reject){}) let Promise2 = new Promise(function(resolve, reject){}) let Promise3 = new Promise(function(resolve, reject){})
let p = Promise.all([Promise1, Promise2, Promise3])
p.then(funciton(){
// 三个都成功则成功
}, function(){
// 只要有失败,则失败
})
有一个场景是很适合用这个的,一些游戏类的素材比较多的应用,打开网页时,预先加载需要用到的各种资源如图片、flash以及各种静态文件。所有的都加载完后,我们再进行页面的初始化。 或者下载的时候: const zip = new JSZip(); const cache = {}; const promises = []; data.forEach(item => { const promise = getFile(item.url).then(data => { // 下载文件, 并存成ArrayBuffer对象
const file_name = item.name + "." + item.format; // 获取文件名 ,拼接格式
zip.file(file_name, data, { binary: true }); // 逐个添加文件
cache[file_name] = data;
});
promises.push(promise);
});
Promise.all(promises).then(() => { zip.generateAsync({ type: "blob" }).then(content => { // 生成二进制流 FileSaver.saveAs(content, zip_name + "课件.zip"); // 利用file-saver保存文件 }); }); 4、race的用法:谁跑的快,以谁为准执行回调 race的使用场景:比如我们可以用race给某个异步请求设置超时时间,并且在超时后执行相应的操作
参考: blog.csdn.net/qq_43201542… blog.csdn.net/weixin_4181… caibaojian.com/es6-promise… www.jianshu.com/p/1b63a13c2…