ES6之Promise对象使用方法

渣渣盟

已于 2025-04-30 18:34:48 修改

阅读量464

点赞数 13

分类专栏： JavaScript 文章标签： es6 前端 ecmascript

于 2023-12-13 20:24:51 首次发布

本文链接：https://blog.youkuaiyun.com/m0_57376564/article/details/134981143

版权

JavaScript 专栏收录该内容

3 篇文章

订阅专栏

本文详细介绍了JavaScript中的Promise对象，包括其三种状态（pending,fulfilled,rejected）、then、catch、finally方法的用法，以及Promise.resolve和Promise.reject的使用，以及Promise.all和Promise.allSettled的异步处理机制。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

这段代码是一个 HTML 文件，其中包含一个 <script> 标签，里面用 JavaScript 实现了 Promise 的相关功能。以下是代码的详细解释和总结：

这段代码演示了 JavaScript 中 Promise 的基本用法，包括：

创建 Promise 对象。
使用 then、catch 和 finally 方法处理 Promise 的状态。
使用 Promise.resolve 和 Promise.reject 快速创建 Promise 对象。
使用 Promise.all 和 Promise.allSettled 处理多个 Promise 对象。

通过 Promise，可以更好地管理异步操作，避免回调地狱（Callback Hell），并提高代码的可读性和可维护性。

<!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>Document</title>
    <script>
        TODO://实例化一个promise对象
        // promise对象有三种状态
        // pending(等待) fulfilled(成功) rejected(失败)
        // promise对象的状态只能从pending转换为fulfilled或者rejected
        // promise对象的状态一旦转换，就不会再变化
        // promise对象的状态转换只能由pending转换为fulfilled或者rejected
        // promise对象的状态转换不受外界影响
        // promise对象的状态转换只能发生一次
        // promise对象的状态转换一旦发生，就会立即执行then方法指定的回调函数
        // promise对象的then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p=new Promise((resolve,reject)=>{
            //resolve:成功时执行的函数
            //reject:失败时执行的函数
            //resolve('成功');
            reject('失败');
        });

        p.then((data)=>{
            console.log(data);
        },(err)=>{
            console.log(err);
        });

        console.log('同步任务');

        TODO:
        //promise对象的then方法可以被多次调用
        //promise对象的then方法返回一个新的promise对象
        //promise对象的then方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p1=new Promise((resolve,reject)=>{
            resolve('成功');
        });

        p1.then((data)=>{
            console.log(data);
            return '成功';
        },(err)=>{
            console.log(err);
        }).then((data)=>{
            console.log(data);
        },(err)=>{
            console.log(err);
        });

        TODO:
        //catch方法用于指定promise对象状态为rejected时的回调函数
        //catch方法返回一个新的promise对象
        //catch方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p2=new Promise((resolve,reject)=>{
            reject('失败');
        });

        p2.then((data)=>{
            console.log(data);
        }).catch((err)=>{
            console.log(err);
        });

        TODO:
        //finally方法用于指定promise对象状态为fulfilled或者rejected时的回调函数
        //finally方法返回一个新的promise对象
        //finally方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p3=new Promise((resolve,reject)=>{
            resolve('成功');
        });

        p3.then((data)=>{
            console.log(data);
        }).finally(()=>{
            console.log('finally');
        });

        let p4=new Promise((resolve,reject)=>{
            reject('失败');
        });

        p4.then((data)=>{
            console.log(data);
        }).finally(()=>{
            console.log('finally');
        });

        TODO:
        //Promise.resolve方法用于将现有对象转换为promise对象
        //Promise.resolve方法返回一个新的promise对象
        //Promise.resolve方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p5=Promise.resolve('成功');

        p5.then((data)=>{
            console.log(data);
        });

        TODO:
        //Promise.reject方法用于将现有对象转换为promise对象
        //Promise.reject方法返回一个新的promise对象
        //Promise.reject方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p6=Promise.reject('失败');

        p6.then((data)=>{
            console.log(data);
        }).catch((err)=>{
            console.log(err);
        });

        TODO:
        //Promise.all方法用于将多个promise对象包装成一个新的promise对象(全部成功才返回成功，有一个失败就返回失败)
        //Promise.all方法返回一个新的promise对象
        //Promise.all方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p7=Promise.resolve('成功');
        let p8=Promise.resolve('成功');
        let p9=Promise.resolve('成功');

        Promise.all([p7,p8,p9]).then((data)=>{
            console.log(data);
        });

        //Promise.allSettled方法用于将多个promise对象包装成一个新的promise对象
        //Promise.allSettled方法返回一个新的promise对象
        //Promise.allSettled方法指定的回调函数，将在当前脚本所有同步任务执行完才会执行

        let p10=Promise.resolve('成功');
        let p11=Promise.resolve('成功');
        let p12=Promise.resolve('成功');

        Promise.allSettled([p10,p11,p12]).then((data)=>{
            console.log(data);
        });

    </script>
</head>
<body>
    
</body>
</html>

1. Promise 的基本概念

Promise 是 JavaScript 中用于处理异步操作的对象。它有三种状态：

Pending（等待）: 初始状态，既不是成功，也不是失败。
Fulfilled（成功）: 操作成功完成。
Rejected（失败）: 操作失败。

Promise 的状态一旦从 Pending 转换为 Fulfilled 或 Rejected，就不会再改变。

2. 代码中的 Promise 示例

(1) 基本 Promise 示例

javascript

let p = new Promise((resolve, reject) => {
    reject('失败');
});

p.then((data) => {
    console.log(data);
}, (err) => {
    console.log(err);
});

console.log('同步任务');

解释:
- 创建一个 Promise 对象 p，并立即调用 reject('失败')，将状态设置为 Rejected。
- 使用 then 方法注册回调函数：
  - 第一个回调函数处理成功状态（Fulfilled）。
  - 第二个回调函数处理失败状态（Rejected）。
- console.log('同步任务') 是同步代码，会先于 Promise 的回调函数执行。
输出:
```
同步任务
失败
```

(2) 链式调用 `then` 方法

javascript

let p1 = new Promise((resolve, reject) => {
    resolve('成功');
});

p1.then((data) => {
    console.log(data);
    return '成功';
}).then((data) => {
    console.log(data);
});

解释:
- 创建一个 Promise 对象 p1，并立即调用 resolve('成功')，将状态设置为 Fulfilled。
- 第一个 then 方法处理成功状态，并返回一个新的值 '成功'。
- 第二个 then 方法接收上一个 then 方法的返回值，并打印出来。
输出:
```
成功
成功
```

(3) 使用 `catch` 方法处理错误

javascript

let p2 = new Promise((resolve, reject) => {
    reject('失败');
});

p2.then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(err);
});

解释:
- 创建一个 Promise 对象 p2，并立即调用 reject('失败')，将状态设置为 Rejected。
- then 方法不会处理失败状态，因此使用 catch 方法捕获错误。
输出:
```
失败
```

(4) 使用 `finally` 方法

javascript

let p3 = new Promise((resolve, reject) => {
    resolve('成功');
});

p3.then((data) => {
    console.log(data);
}).finally(() => {
    console.log('finally');
});

解释:
- 创建一个 Promise 对象 p3，并立即调用 resolve('成功')，将状态设置为 Fulfilled。
- finally 方法无论 Promise 成功还是失败，都会执行。
输出:
```
成功
finally
```

(5) 使用 `Promise.resolve` 和 `Promise.reject`

javascript

let p5 = Promise.resolve('成功');
p5.then((data) => {
    console.log(data);
});

let p6 = Promise.reject('失败');
p6.then((data) => {
    console.log(data);
}).catch((err) => {
    console.log(err);
});

解释:
- Promise.resolve 直接创建一个状态为 Fulfilled 的 Promise 对象。
- Promise.reject 直接创建一个状态为 Rejected 的 Promise 对象。
输出:
```
成功
失败
```

(6) 使用 `Promise.all` 和 `Promise.allSettled`

javascript

let p7 = Promise.resolve('成功');
let p8 = Promise.resolve('成功');
let p9 = Promise.resolve('成功');

Promise.all([p7, p8, p9]).then((data) => {
    console.log(data);
});

let p10 = Promise.resolve('成功');
let p11 = Promise.resolve('成功');
let p12 = Promise.resolve('成功');

Promise.allSettled([p10, p11, p12]).then((data) => {
    console.log(data);
});

解释:
- Promise.all: 将多个 Promise 对象包装成一个新的 Promise 对象，只有所有 Promise 都成功时，才会返回成功状态。
- Promise.allSettled: 无论 Promise 成功还是失败，都会返回结果。

输出:

['成功', '成功', '成功']
[
  { status: 'fulfilled', value: '成功' },
  { status: 'fulfilled', value: '成功' },
  { status: 'fulfilled', value: '成功' }
]

3. 总结

这段代码演示了 JavaScript 中 Promise 的基本用法，包括：

创建 Promise 对象。
使用 then、catch 和 finally 方法处理 Promise 的状态。
使用 Promise.resolve 和 Promise.reject 快速创建 Promise 对象。
使用 Promise.all 和 Promise.allSettled 处理多个 Promise 对象。

通过 Promise，可以更好地管理异步操作，避免回调地狱（Callback Hell），并提高代码的可读性和可维护性。

ES6之Promise对象使用方法

1. Promise 的基本概念

2. 代码中的 Promise 示例

(1) 基本 Promise 示例

(2) 链式调用 then 方法

(3) 使用 catch 方法处理错误

(4) 使用 finally 方法

(5) 使用 Promise.resolve 和 Promise.reject

(6) 使用 Promise.all 和 Promise.allSettled

3. 总结

(2) 链式调用 `then` 方法

(3) 使用 `catch` 方法处理错误

(4) 使用 `finally` 方法

(5) 使用 `Promise.resolve` 和 `Promise.reject`

(6) 使用 `Promise.all` 和 `Promise.allSettled`