深入浅出ES6教程『Promise』
标签:
JavaScript
大家好,本人名叫苏日俪格,大家叫我 (格格) 就好,在上一章节中我们学到了对象的用法,下面我们一起来继续学习Promise:
作用:解决异步回调的问题,ajax交互的回调复用性太差,通过promise可以解决,多说无益,我们来看一个例子:
let a = 1;new Promise(function(resolve, reject){ if (a == 1) { resolve('成功'); } else{ reject('失败'); } }).then(res => { console.log(res); // 成功},err => { console.log(err); });
resolve是成功的回调函数
reject是失败的回调函数
成功失败的回调都可以简写成一个成功状态的或是失败状态的promise对象:
var p = Promise.resolve('成功'); p.then(res => { console.log(res); // 成功});
上面的这种成功回调简写和下面这种正常写法是一样的:
var p = new Promise(function(resolve){ resolve('成功'); }); p.then(res => { console.log(res); // 成功});
失败的回调函数也是同理,另外失败的回调还可以通过catch捕获,然后放在then函数的后面即可,个人推荐这种写法:
new Promise(function(resolve,reject){ if(false){ resolve('成功'); }else{ reject('失败'); } }).then(res => { console.log(res); }).catch(err => { console.log(err); // 失败});
Promise.all()/Promise.race():两者可以将多个promise对象打包在一个数组里,打包完还是一个promise对象:
let p1 = Promise.resolve('aaa');let p2 = Promise.resolve('bbb');let p3 = Promise.resolve('ccc');Promise.all([p1,p2,p3]).then(res => { let [res1,res2,res3] = res; // 解构赋值 console.log(res); // ["aaa", "bbb", "ccc"] console.log(res1,res2,res3); // aaa bbb ccc});
二者的区别:在没有catch抛出异常的时候:all是所有扔进数组的Promise对象都必须是resolve状态的,只要有一个reject状态的就会失败;而race是只要有一个promise对象是resolve状态的就会成功
研究了一波之后,在网上看到了一个关于Promise的面试题:
setTimeout(function () { console.log(1); }, 0);Promise.resolve(function () { console.log(2); })new Promise(function (resolve) { console.log(3); }).then(() => { console.log(4); });console.log(5);
先后执行顺序一次是什么呢?这时候要先来看看JavaScript的事件执行机制了
关于Promise我们都已经了然于心,预知模块化如何,请听下回分解 (^∀^)/~~~
本文的所有内容均是一字一句敲上去的,希望大家阅读完本文可以有所收获,因为能力有限,掌握的知识也是不够全面,欢迎大家提出来一起分享!谢谢O(∩_∩)O~
作者:苏日俪格
链接:https://www.jianshu.com/p/5b1db8806e80
点击查看更多内容
为 TA 点赞
评论
共同学习,写下你的评论
评论加载中...
作者其他优质文章
正在加载中
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦