promis（resolve，reject）入门级别

news2025/4/28 10:53:12

JavaScript Promise 的定义

Promise 是一种用于处理异步操作的对象，表示一个可能已经完成或者尚未完成的操作的结果。它的核心作用在于简化复杂的回调嵌套问题（即所谓的“回调地狱”），使异步代码更加清晰易读。

Promise 的状态

Promise 对象具有三种主要状态：

Pending（等待态）: 初始状态，在此状态下，异步操作还未完成。
Fulfilled（已成功态）: 异步操作已完成，并返回了一个结果。
Rejected（已失败态）: 异步操作失败，并抛出了错误信息。

这些状态的变化是单向的，意味着一旦进入 Fulfilled 或 Rejected 状态，则无法再改变其状态。

使用 Promise 的原因

传统的 JavaScript 异步编程通常依赖于回调函数来处理结果。然而，当多个异步调用相互依赖时，容易形成深层嵌套的回调结构，这不仅降低了代码的可读性，还增加了调试难度。Promise 提供了一种更优雅的方式来管理这种复杂性：

链式调用：通过 .then() 方法可以轻松实现方法链，从而避免深层次的回调嵌套。
错误处理统一化：可以通过 .catch() 统一捕获整个链条中的任何异常，而不需要在每个回调中单独处理错误。
更好的控制流：Promise 支持 async/await 语法糖，进一步提升了异步代码的表现力和简洁度。

以下是基于 Promise 实现的一个简单例子，展示如何利用它来处理异步逻辑：

const fetchData = () => {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const data = "模拟的数据";
            if (data) {
                resolve(data);
            } else {
                reject("获取数据失败");
            }
        }, 1000);
    });
};

fetchData()
    .then(result => console.log(`成功接收到数据: ${result}`))
    .catch(error => console.error(`发生错误: ${error}`));

在这个示例中，fetchData 函数返回的是一个 Promise 对象。如果一切正常，会触发 resolve 并传递成功的数据；如果有误，则触发 reject 来报告错误消息。

总结

Promise 不仅提供了一种标准化的方式去表达异步行为，而且极大地改善了开发者编写和维护异步代码的能力。无论是简单的延迟加载还是复杂的 API 调用场景，都可以借助 Promise 更加高效地解决问题。

在这里插入图片描述

在 JavaScript 中，new Promise 是创建一个新的 Promise 对象的方式。其基本语法结构如下：

const myPromise = new Promise((resolve, reject) => {
    // 执行异步操作或其他逻辑
    if (/* 条件满足 */) {
        resolve(value); // 将 Promise 状态改为 fulfilled 并传递成功值
    } else {
        reject(error); // 将 Promise 状态改为 rejected 并传递错误原因
    }
});

`resolve` 和 `reject` 的作用

resolve 函数
当异步操作成功完成时，调用 resolve 可以将 Promise 的状态从 pending 改为 fulfilled，并可以向后续的 .then() 方法传递成功的数据。
reject 函数
如果异步操作失败，则可以通过调用 reject 将 Promise 的状态从 pending 改为 rejected，并可向后续的 .catch() 或者 .then(null, rejectionHandler) 方法传递错误信息。

使用场景分析

场景一：处理 HTTP 请求

当发起网络请求时，通常会使用 Promise 处理响应的成功或失败情况。例如通过 fetch API 获取远程资源：

function fetchData(url) {
    return new Promise((resolve, reject) => {
        fetch(url)
            .then(response => {
                if (!response.ok) { // 判断响应是否正常
                    reject(new Error(`HTTP error! status: ${response.status}`));
                } else {
                    resolve(response.json()); // 解析 JSON 数据并返回给 then()
                }
            })
            .catch(err => reject(err)); // 捕获 fetch 错误并拒绝 Promise
    });
}

// 调用示例
fetchData('https://api.example.com/data')
    .then(data => console.log('Success:', data))
    .catch(error => console.error('Error:', error.message));

在这个例子中，如果服务器返回的状态码不正常（如 404），则调用 reject 抛出异常；反之，解析成功后调用 resolve 返回数据。

场景二：模拟延迟加载

有时需要模拟某些耗时的操作，比如等待几秒钟后再继续执行下一步动作：

function delay(ms) {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = Math.random() > 0.5;
            if (success) {
                resolve('Operation completed successfully');
            } else {
                reject('An unexpected error occurred');
            }
        }, ms);
    });
}

delay(2000).then(message => console.log(message)).catch(error => console.error(error));