认识 Promise

一、使用Promise管理异步任务的基础步骤

<!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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // 2、执行异步代码
        setTimeout(() => {
            resolve('模拟AJAX请求-成功的结果')
        },2000)
            })
    // 3、获取结果
    p.then(result => {
        console.log(result);
    })
  </script>
</body>

</html>

运行结果如下：

.catch：处理失败的结果（对应 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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // 2、执行异步代码
        setTimeout(() => {
            // resolve('模拟AJAX请求-成功的结果')
            reject(new Error('模拟AJAX请求-失败的结果'));
        },2000)
            })
    // 3、获取结果
    p.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error)
    })
  </script>
</body>

</html>

运行结果如下：

二、Promise 三种状态

Promise 对象在生命周期中只会处于以下三种状态之一，且状态的转换有严格的规则：

1. pending（等待 / 进行中）

含义：这是 Promise 的初始状态，表示异步操作还未完成，结果尚未确定。
特点：
- 刚创建 Promise 时，默认处于这个状态；
- 此时既不是成功，也不是失败。
示例：

// 刚创建的 Promise 处于 pending 状态
const p = new Promise((resolve, reject) => {
  // 异步操作还在执行中（比如定时器还没到时间）
  setTimeout(() => {}, 1000);
});
console.log(p); // 控制台会显示 Promise { <pending> }

使用一下实战的代码，如下：

<!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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // 2、执行异步代码
        setTimeout(() => {
            // resolve('模拟AJAX请求-成功的结果')
            reject(new Error('模拟AJAX请求-失败的结果'));
        },2000)
            })
    console.log(p);
    // 3、获取结果
    p.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error)
    })
  </script>
</body>

</html>

运行结果如下

以上截图要在2秒内打开，可以看到是“pending”状态。

如果是在2s之后打开的，就是另一种状态了。

<!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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // Promose对象创建时，此处的代码就会立即执行，测试如下：
                console.log('Promise 代码已执行了！')
        // 2、执行异步代码
        setTimeout(() => {
            // resolve('模拟AJAX请求-成功的结果')
            reject(new Error('模拟AJAX请求-失败的结果'));
        },5000)
            })
    console.log(p);
    // 3、获取结果
    p.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error)
    })
  </script>
</body>

</html>

运行结果如下

可以看到，

console.log('Promise 代码已执行了！'

上面这段代码先于

console.log(p);

显示出来了，说明Promise对象创建的时候里面的代码就执行了的。

2. fulfilled（已成功 / 已兑现）

含义：表示异步操作成功完成，Promise 会将操作结果传递出去。
触发条件：在 Promise 执行器函数中调用 resolve() 方法时，状态会从 pending 转为 fulfilled。
特点：状态一旦变为 fulfilled，就永久固定，不会再改变。

<!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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // Promose对象创建时，此处的代码就会立即执行，测试如下：
                console.log('Promise 代码已执行了！')
        // 2、执行异步代码
        setTimeout(() => {
            resolve('模拟AJAX请求-成功的结果')
            // reject(new Error('模拟AJAX请求-失败的结果'));
        },2000)
            })
    console.log(p);
    // 3、获取结果
    p.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error)
    })
  </script>
</body>

</html>

运行结果如下

3. rejected（已失败 / 已拒绝）

含义：表示异步操作执行失败，Promise 会将失败的原因（错误信息）传递出去。
触发条件：在 Promise 执行器函数中调用 reject() 方法，或执行器内部抛出未捕获的错误时，状态会从 pending 转为 rejected。
特点：状态一旦变为 rejected，同样永久固定，不会再改变。

<!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</title>
</head>

<body>
  <script>
    /**
     * 目标：使用Promise管理异步任务
    */
    // 1、创建Promise对象
    const p = new Promise((resolve,reject) => {
        // Promose对象创建时，此处的代码就会立即执行，测试如下：
                console.log('Promise 代码已执行了！')
        // 2、执行异步代码
        setTimeout(() => {
            // resolve('模拟AJAX请求-成功的结果')
            reject(new Error('模拟AJAX请求-失败的结果'));
        },2000)
            })
    console.log(p);
    // 3、获取结果
    p.then(result => {
        console.log(result);
    }).catch(error => {
        console.log(error)
    })
  </script>
</body>

</html>

运行结果如下

状态转换的核心规则

Promise 的状态转换是单向且不可逆的，只有两种合法的转换路径：

pending → fulfilled（异步操作成功）
pending → rejected（异步操作失败）

注意：

不存在 fulfilled → rejected、rejected → fulfilled 这类反向转换；
也不存在 fulfilled/rejected 转回 pending 的情况；
即使多次调用 resolve() 或 reject()，也只有第一次调用会生效（状态一旦改变，后续调用无效）。

示例验证状态不可逆：

const p = new Promise((resolve, reject) => {
  resolve("第一次调用"); // 状态转为 fulfilled
  reject("后续调用无效"); // 无效果，状态已固定
});
p.then(res => console.log(res)) // 输出：第一次调用
 .catch(err => console.error(err)); // 不会执行

posted @ 2026-01-24 17:25 chenlight 阅读(2) 评论(0) 收藏举报

刷新页面返回顶部

chenlight

认识 Promise

1. pending（等待 / 进行中）

2. fulfilled（已成功 / 已兑现）

3. rejected（已失败 / 已拒绝）

状态转换的核心规则

公告