前端学习：Promise的用法介绍-CSDN博客

本文链接：https://blog.csdn.net/xuukai/article/details/147993686

Promise 基本概念
- Promise 是 JavaScript 中的异步编程解决方案。它代表一个异步操作的最终完成（或失败）及其结果值。
- Promise 有三种状态：
  - pending（进行中）：初始状态，既不是成功，也不是失败。
  - fulfilled（已成功）：异步操作成功完成。
  - rejected（已失败）：异步操作失败。

Promise 的基本用法

创建 Promise

通过构造函数创建一个新的 Promise 对象。构造函数接收一个执行器函数作为参数，执行器函数有两个参数，分别是 resolve 和 reject。这两个函数用于改变 Promise 的状态。

例如：

const myPromise = new Promise((resolve, reject) => {
    // 异步操作模拟
    setTimeout(() => {
        const isSuccess = true;
        if (isSuccess) {
            resolve('操作成功'); // 改变状态为fulfilled，传递成功数据
        } else {
            reject('操作失败'); // 改变状态为rejected，传递失败数据
        }
    }, 1000);
});

使用 .then() 方法处理成功情况
- .then() 方法用于指定异步操作成功时的回调函数。它可以接收一个函数作为参数，当 Promise 的状态变为 fulfilled 时，这个函数会被调用，并且可以获取到 resolve 传递的值。
- 例如：
```
myPromise.then((data) => {
    console.log('成功回调：', data); // 输出 "成功回调： 操作成功"
});
```
使用 .catch() 方法处理失败情况
- .catch() 方法用于指定异步操作失败时的回调函数。当 Promise 的状态变为 rejected 时，这个函数会被调用，并且可以获取到 reject 传递的值。
- 例如：
```
myPromise.catch((error) => {
    console.log('失败回调：', error);
});
```

使用 .finally() 方法处理完成后的操作（可选）

.finally() 方法用于指定不管 Promise 最终是成功还是失败，都会执行的回调函数。通常用于清理操作，如关闭加载动画等。

例如：

myPromise
    .then((data) => {
        console.log('成功回调：', data);
    })
    .catch((error) => {
        console.log('失败回调：', error);
    })
    .finally(() => {
        console.log('操作完成，不管成功还是失败都会执行');
    });

Promise 链式调用

.then() 方法会返回一个新的 Promise 对象，这使得可以进行链式调用，用于处理多个依赖的异步操作。

例如：

myPromise
    .then((data) => {
        console.log('第一个成功回调：', data);
        // 返回一个新的 Promise 或者直接返回值
        return new Promise((resolve) => {
            resolve('第二个成功回调数据');
        });
    })
    .then((newData) => {
        console.log('第二个成功回调：', newData); // 输出 "第二个成功回调： 第二个成功回调数据"
    })
    .catch((error) => {
        console.log('失败回调：', error);
    });

读取 data 值的方式

通常，Promise 的.then()方法的第一个参数就是一个用于读取 resolve 传递的数据的函数。这个函数的参数就是 resolve 函数传递的值（data 值），在.then()的回调函数中可以直接使用这个参数来获取和处理 data 值。

以获取 API 数据为例：

// 模拟 API 请求返回 Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        // 模拟网络请求
        setTimeout(() => {
            const data = { name: '张三', age: 20 };
            resolve(data);
        }, 2000);
    });
}

fetchData().then((data) => {
    console.log(data); // 读取 data 值，输出 {name: "张三", age: 20}
    console.log(data.name); // 输出 "张三"
    console.log(data.age); // 输出 20
});