Promise对象的使用

news2024/11/18 23:35:26

一、什么是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>