一、什么是Promise
Promise 是异步编程的一种解决方案,比传统的解决方案(回调函数和事件)更合理和更强大。从语法上说,Promise 是一个对象,从它可以获取异步操作的消息。Promise 提供统一的 API,各种异步操作都可以用同样的方法进行处理。
二、Promise 的特点
1、对象的状态不受外界影响。 Promise对象代表一个异步操作,有三种状态:pending(进行中)
、fulfilled(已成功)
和rejected(已失败)
。只有异步操作的结果,可以决定当前是哪一种状态,任何其他操作都无法改变这个状态。
2、一旦状态改变,就不会再变,任何时候都可以得到这个结果。 Promise对象的状态改变,只有两种可能:从pending变为fulfilled和从pending变为rejected。 只要这两种情况发生,状态就凝固了,不会再变了,会一直保持这个结果,这时就称为 resolved(已定型)
。如果改变已经发生了,你再对Promise对象添加回调函数,也会立即得到这个结果。这与事件(Event)完全不同,事件的特点是,如果你错过了它,再去监听,是得不到结果的。
三、then 方法
1、它的作用是为 Promise 实例添加状态改变时的回调函数。前面说过,then方法的第一个参数是fulfilled(已成功)
状态的回调函数,第二个参数是rejected(已失败)
状态的回调函数,它们都是可选的。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//设置口袋的钱金额
//var money = 100
var money = 90
//购物方法
function goShop(m) {
return new Promise((resolve, reject) => {
if (m >= 100) {
resolve("购物愉快")
} else {
reject("钱不够了")
}
});
}
//进行购物
goShop(money).then(msg => console.log(msg), err => console.log(err))
</script>
</html>
运行结果:
2、then方法返回的是一个 新的Promise实例(注意,不是原来那个Promise实例)。因此可以采用链式写法,即then方法后面再调用另一个then方法。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//设置口袋的钱金额
var money = 100
//购物方法
function goShop(m) {
return new Promise((resolve, reject) => {
if (m >= 100) {
resolve("购物愉快")
} else {
reject("钱不够了")
}
});
}
//进行购物
goShop(money).then(msg => '恭喜你!' + msg).then(msg => alert(msg))
</script>
</html>
运行结果:
四、catch()方法
1、如果异步操作抛出错误,状态就会变为rejected(已失败)
,就会调用catch()方法指定的回调函数,处理这个错误。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//设置口袋的钱金额
var money = 90
//购物方法
function goShop(m) {
return new Promise((resolve, reject) => {
if (m >= 100) {
resolve("购物愉快")
} else {
throw new Error('钱不够了');
}
});
}
//进行购物
goShop(money).then(msg => alert('恭喜你!' + msg)).catch(err => alert('对不起!' + err.message))
</script>
</html>
运行结果:
2、then()
方法指定的回调函数,如果运行中抛出错误,也会被catch()方法捕获。
例:
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
</head>
<body>
</body>
<script>
//设置口袋的钱金额
var money = 100
//购物方法
function goShop(m) {
return new Promise((resolve, reject) => {
resolve("消费了:"+m+"元")
});
}
//进行购物
goShop(money)
.then(msg => {
console.log(msg)
throw new Error('请继续充值');
})
.catch(err => alert('对不起!' + err.message))
</script>
</html>
运行结果:文章来源:https://www.toymoban.com/news/detail-423557.html
文章来源地址https://www.toymoban.com/news/detail-423557.html
到了这里,关于Promise对象的使用的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!