一、promise 的 API 说明
Promise构造函数:Promise (excutor) {},如下所示:
executor函数: 执行器(resolve, reject) => {}resolve函数: 内部定义成功时我们调用的函数value => {}reject函数: 内部定义失败时我们调用的函数reason => {}- 说明:
executor会在Promise内部立即同步调用,异步操作在执行器中执行
Promise.prototype.then方法:(onResolved, onRejected) => {},如下所示:
onResolved函数: 成功的回调函数(value) => {}onRejected函数: 失败的回调函数(reason) => {}- 说明: 指定用于得到成功
value的成功回调和用于得到失败reason的失败回调
返回一个新的promise对象
Promise.prototype.catch方法:(onRejected) => {},如下所示:
onRejected函数: 失败的回调函数(reason) => {}- 说明:
then()的语法糖, 相当于:then(undefined, onRejected)
Promise.resolve方法:(value) => {},如下所示:
value: 成功的数据或promise对象- 说明: 返回一个成功/失败的
promise对象
Promise.reject方法:(reason) => {},如下所示:
reason: 失败的原因- 说明: 返回一个失败的
promise对象
Promise.all方法:(promises) => {},如下所示:
promises: 包含n个promise的数组- 说明: 返回一个新的
promise, 只有所有的promise都成功才成功, 只要有一个失败了就
直接失败
Promise.race方法:(promises) => {},如下所示:
promises: 包含n个promise的数组- 说明: 返回一个新的
promise, 第一个完成的promise的结果状态就是最终的结果状态
二、promise API 的使用
promise的API之then和catch,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise的API之then和catch</title>
</head>
<body>
<script>
let p = new Promise((resolve, reject) => {
// 同步调用
// 修改 promise 对象的状态
reject('error');
});
// 执行 catch 方法
p.catch(reason => {
console.log(reason);
});
</script>
</body>
</html>
promise的API之resolve,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise的API之resolve</title>
</head>
<body>
<script>
let p1 = Promise.resolve(123);
//如果传入的参数为 非Promise类型的对象, 则返回的结果为成功promise对象
//如果传入的参数为 Promise 对象, 则参数的结果决定了 resolve 的结果
let p2 = Promise.resolve(new Promise((resolve, reject) => {
reject('error');
}));
p2.catch(reason => {
console.log(reason);
});
</script>
</body>
</html>
promise的API之reject,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise的API之reject</title>
</head>
<body>
<script>
let p1 = Promise.reject('123');
let p2 = Promise.reject('456');
let p3 = Promise.reject(new Promise((resolve, reject) => {
resolve('ok');
}));
console.log(p3);
</script>
</body>
</html>
promise的API之all,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise的API之all</title>
</head>
<body>
<script>
let p1 = new Promise((resolve, reject) => {
resolve('ok1');
});
// let p2 = Promise.resolve('ok2')
let p2 = Promise.reject('Error');
let p3 = Promise.resolve('ok3');
let result = Promise.all([p1, p2, p3]);
console.log(result);
</script>
</body>
</html>
promise的API之race,代码如下所示:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<meta http-equiv="X-UA-Compatible" content="IE=edge">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>promise的API之race</title>
</head>
<body>
<script>
let p1 = new Promise((resolve, reject) => {
setTimeout(() => {
resolve('ok');
}, 1000);
});
let p2 = Promise.resolve('success');
let p3 = Promise.resolve('true');
// 调用
const result = Promise.race([p1, p2, p3]);
console.log(result);
</script>
</body>
</html>
最后
以上就是英勇月亮最近收集整理的关于Promise 的 API 理解与使用的全部内容,更多相关Promise内容请搜索靠谱客的其他文章。
本图文内容来源于网友提供,作为学习参考使用,或来自网络收集整理,版权属于原作者所有。
发表评论 取消回复