Promise 是一个 ECMAScript 6 提供的类,目的是更加优雅地书写复杂的异步任务。
由于 Promise 是 ES6 新增加的,所以一些旧的浏览器并不支持,苹果的 Safari 10 和 Windows 的 Edge 14 版本以上浏览器才开始支持 ES6 特征。
构造 Promise
现在我们新建一个 Promise 对象:
<script>
new Promise(function(resolve,reject){
//要做的事情...
}
</script>
通过新建一个 Promise 对象好像并没有看出它怎样“更加优雅地书写复杂的异步任务”。我们之前遇到的异步任务都是一次异步,如果需要多次调用异步函数呢?例如,我想分三次输出字符串,第一次间隔1秒,第二次间隔4秒,第三次间隔3秒:
<script>
setTimeout(function(){
console.log("First");
setTimeout(function(){
console.log("Second");
setTimeout(function(){
console.log("Third");
},3000);
},4000);
},1000);
</script>
这段程序实现了这个功能,但是它是用“函数瀑布”来实现的。可想而知,在一个复杂的程序当中,用“函数瀑布”实现的程序无论是维护还是异常处理都是一件特别繁琐的事情,而且会让缩进格式变得非常冗赘。
<script>
new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("First");
resolve();
}, 1000);
}).then(function () {
return new Promise(function (resolve, reject) {
setTimeout(function () {
console.log("Second");
resolve();
}, 4000);
});
}).then(function () {
setTimeout(function () {
console.log("Third");
}, 3000);
});
</script>
这段代码较长,所以还不需要完全理解它,我想引起注意的是 Promise 将嵌套格式的代码变成了顺序格式的代码。
Promise 的使用
下面我们通过刨析这段 Promise “计时器”代码来讲述 Promise 的使用:
Promise 构造函数只有一个参数,是一个参数,这个函数在构造之后会直接被异步运行,所以我们称之为起始函数,起始函数包含两个参数 resolve 和 reject。
当 Promise 被构造时,起始函数会被异步执行:
<script>
new Promise(function(resolve,reject){
console.log("Run");
});
</script>
这段程序会直接输出 Run 。
resolve 和 reject 都是函数,其中调用 resolve 代表一切正常,reject 是出现异常时所调用的:
<script>
new Promise(function (resolve, reject) {
var a = 0;
var b = 1;
if (b == 0) reject("Divide zero");
else resolve(a / b);
}).then(function (value) {
console.log("a / b = " + value);
}).catch(function (err) {
console.log(err);
}).finally(function () {
console.log("End");
});
</script>
这段程序执行结果是:
a / b = 0
End
Promise类有。then().catch()和.finally()三个方法。这三个方法的参数都是一个函数,.then()可以将参数中的函数添加到当前Promise的正常执行序列,.catch()则是设定Promise 的异常处理序列,.finally()是在Promise执行的最后一定会执行的序列。.then()传入的函数会按顺序依次执行,有任何异常都会直接跳到catch序列:
<script>
new Promise(function (resolve, reject) {
console.log(1111);
resolve(2222);
}).then(function (value) {
console.log(value);
return 3333;
}).then(function (value) {
console.log(value);
throw "An error";
}).catch(function (err) {
console.log(err);
});
</script>
执行结果:
1111
2222
3333
An error
resolve()中可以放置一个参数用于向下一个 then 传递一个值,then 中的函数也可以返回一个值传递给 then。但是,如果 then中返回的是一个 Promise 对象,那么下一个then将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。
reject()参数中一般会传递一个异常给之后的catch函数用于处理异常。
但是请注意以下两点:
resolve 和 reject 的作用域只有起始函数,不包括 then 以及其他序列;
resolve 和 reject 并不能够使起始函数停止运行,别忘了 return。
Promise 函数
上述的“计时器”程序看上去比函数瀑布还要长,所以我们可以将它的核心部分写成一个 Promise函数:
<script>
function print(delay,message){
return new Promose(function(resolve,reject){
setTimeout(function(){
console.log(message);
resolve();
},delay);
});
}
</script>
然后我们就可以放心大胆的实现程序功能了:
<script>
print(1000,"First").then(function(){
return print(4000,"Second");
}).then(function(){
print(3000,"Third");
});
</script>
这种返回值为一个 Promise 对象的函数称作 Promise 函数,它常常用于开发基于异步操作的库。