第七节JavaScript Promise
一、JavaScript Promise
1、简介
Promise是一个ES6提供的类,目的是更加优雅地书写复杂的异步任务。
由于Promise是ES6新增的,所以一些旧的浏览器并不支持,苹果的Safari 10和Windows的Edge 14版本以上的浏览器才支持,这个需要注意。
2、构造Promise
新构建第一个Promise对象:
???? new Promise(function(resolve, reject) {
// 处理的逻辑
});
??? 通过新建一个Promise对象好像并没有看出它怎么实现“更加优雅地书写复杂的异步任务”。接下来,我们通过需要多次调用异步函数来看下:
普通方式:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript基础学习</title>
</head>
<body>
<h2>JavaScript Promise</h2>
<button onclick="yibu()">异步</button>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
</body>
<script>
function yibu() {
setTimeout(function() {
document.getElementById("one").innerHTML = "3000ms -- First";
console.log("First");
setTimeout(function() {
document.getElementById("two").innerHTML = "4000ms -- Second";
console.log("Second");
setTimeout(function() {
document.getElementById("three").innerHTML = "1000ms -- Third";
console.log("Third");
}, 3000);
}, 4000);
}, 1000);
}
</script>
</html>
输出结果:
从上面也能看出,这种“函数瀑布”实现的无论是维护还是异常处理都是特别繁琐的事情,而且也会让缩进格式变得冗赘。
下面我们用Promise来实现同样的功能:
代码:
<script>
function yibu() {
new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("one").innerHTML = "3000ms -- First";
console.log("First");
resolve();
}, 3000);
}).then(function() {
return new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("two").innerHTML = "4000ms -- Second";
console.log("Second");
resolve();
}, 4000);
});
}).then(function() {
setTimeout(function() {
document.getElementById("three").innerHTML = "1000ms -- Third";
console.log("Third");
}, 1000);
});
}
</script>
输出结果:
这段代码也是很长的,现在我们不需要完全理解它,代码引起我们注意的是Promise将嵌套格式的代码变成了顺序格式的代码。
3、Promise 的构造函数
Promise构造函数是JavaScript中用于创建Promise对象的内置构造函数。
Promise构造函数接受一个函数作为参数,该函数是同步的并且立即执行,所以我们称之为起始函数。起始函数包含两个参数 resolve和reject,分别表示Promise成功和失败的状态。
起始函数执行成功时,它应该调用resolve函数并传递成功的结果。当起始函数执行失败时,它应该调用reject函数并传递失败的原因。
Promise构造函数返回一个Promise对象,该对象具有以下几个方法:
- then:用于处理Promise成功状态的回调函数
- catch:用于处理Promise失败状态的回调函数
- finally:无论Promise是成功还是失败,都会执行的回到函数。
????????下面实例是使用Promise构造含税创建Promise对象(当Promise被构造时,起始函数会被同步执行):
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript基础学习</title>
</head>
<body>
<h2>JavaScript Promise</h2>
<button onclick="yibu()">异步</button>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
</body>
<script>
function yibu() {
const prpmise01 = new Promise(function(resolve, reject) {
setTimeout(function() {
document.getElementById("one").innerHTML = "3000ms -- First";
console.log("First");
resolve("success First");
}, 3000);
})
prpmise01.then(function(result) {
document.getElementById("two").innerHTML = result;
})
const prpmise02 = new Promise(function(resolve, reject) {
setTimeout(function() {
console.log("prpmise02");
reject("error three First");
}, 3000);
})
prpmise02.catch(function(error) {
document.getElementById("three").innerHTML = error;
})
}
</script>
</html>
输入结果:
????????在上面例子中,我们使用Promise构造函数创建了两个Promise对象,并使用setTimeout模拟一个异步场景。第一个异步操作成功,则会调用resolve函数并传递成功的结果;第二个异步场景失败,则调用reject函数并传递失败的原因。然后,我们使用then方法处理Promise成功状态的回调函数,使用catch方法处理Promise失败状态的回调函数。
接下来我们再看个小示例:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript基础学习</title>
</head>
<body>
<h2>JavaScript Promise</h2>
<button onclick="yibu()">计算(a / b 或 a / c)</button>
<p id="one"></p>
<p id="two"></p>
</body>
<script>
function yibu() {
new Promise(function(resolve, reject) {
var a = 4;
var b = 2;
if (b == 0) {
reject("a / b The denominator cannot be zero")
} else {
var value = a / b;
resolve(value);
}
}).then(function(result) {
document.getElementById("one").innerHTML = "a / b = " + result;
}).catch(function(error) {
document.getElementById("two").innerHTML = "a / c error = " + error;
})
new Promise(function(resolve, reject) {
var a = 4;
var c = 0;
if (c == 0) {
reject("a / c - The denominator cannot be zero")
} else {
var value = a / c;
resolve(value);
}
}).then(function(result) {
document.getElementById("one").innerHTML = "a / c = " + result;
}).catch(function(error) {
document.getElementById("two").innerHTML = "a / c error = " + error;
}).finally(function(){
document.getElementById("three").innerHTML = "End";
})
}
</script>
</html>
输出结果:
????????说明:Promise类有.then()、.catch()和.finally()三个方法,这三个方法的参数都是一个函数,.then()可以将参数中的函数添加到当前Promise的正常执行序列,.catch()则是设定的异常处理序列,.finally()是在Promise执行的最后一定会执行的序列。.then()传入的函数会按照顺序依次执行,在有任何异常都会直接跳转到catch序列。
例如:
resolve()中可以放置一个参数,用于向下一个then传递一个值,then中的函数也可以返回一个值传递给then。但是,如果 then 中返回的是一个 Promise 对象,那么下一个 then 将相当于对这个返回的 Promise 进行操作,这一点从刚才的计时器的例子中可以看出来。
reject() 参数中一般会传递一个异常给之后的 catch 函数用于处理异常。
注意:
- resolve和reject的作用域只有起始函数,不包括then以及其他序列。
- resolve和reject并不能够使起始函数停止运行,别忘了return。
4、Promise 函数
上述使用计时器实现时,代码还是很长的,所以我们可以将核心代码写成一个Promise函数:
<!DOCTYPE html>
<html>
<head>
<meta charset="utf-8">
<title>Javascript基础学习</title>
</head>
<body>
<h2>JavaScript Promise</h2>
<button onclick="yibu()">Promise函数</button>
<p id="one"></p>
<p id="two"></p>
<p id="three"></p>
</body>
<script>
// 实现一个Promise函数
function myPromise(delay, msg, pID) {
return new Promise(function(resolve, reject) {
setTimeout(function() {
console.log(msg);
document.getElementById(pID).innerHTML = msg;
resolve();
}, delay);
});
}
function yibu() {
myPromise(4000, "4000ms First", "one").then(function() {
return myPromise(2000, "200ms Second", "two");
}).then(function() {
myPromise(2000, "end", "three");
});
}
</script>
</html>
输出结果:
这种返回值为一个 Promise 对象的函数称作 Promise 函数,它常常用于开发基于异步操作的库。
5、常见的问题(FAQ)
Q: then、catch 和 finally 序列能否顺序颠倒?
A: 可以,效果完全一样。但不建议这样做,最好按 then-catch-finally 的顺序编写程序。
Q: 除了 then 块以外,其它两种块能否多次使用?
A: 可以,finally 与 then 一样会按顺序执行,但是 catch 块只会执行第一个,除非 catch 块里有异常。所以最好只安排一个 catch 和 finally 块。
Q: then 块如何中断?
A: then 块默认会向下顺序执行,return 是不能中断的,可以通过 throw 来跳转至 catch 实现中断。
Q: 什么时候适合用 Promise 而不是传统回调函数?
A: 当需要多次顺序执行异步操作的时候,例如,如果想通过异步方法先后检测用户名和密码,需要先异步检测用户名,然后再异步检测密码的情况下就很适合 Promise。
Q: Promise 是一种将异步转换为同步的方法吗?
A: 完全不是。Promise 只不过是一种更良好的编程风格。
Q: 什么时候我们需要再写一个 then 而不是在当前的 then 接着编程?
A: 当你又需要调用一个异步任务的时候。
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。 如若内容造成侵权/违法违规/事实不符,请联系我的编程经验分享网邮箱:veading@qq.com进行投诉反馈,一经查实,立即删除!