ES6 Promise 状态机

news2026/2/19 14:11:30

状态机：抽象的计算模型，根据特定的条件或者信号切换不同的状态

一、Promise 是什么？

简单来说，Promise 就是一个“承诺对象”。在ES6 里，有些代码执行起来需要点时间，比如加载文件、等待网络请求或者设置定时器，这些代码被叫做“生产代码”；而另外一些代码得等着生产代码出结果才能执行，这就是“消费代码”。Promise 就像一座桥，把生产代码和消费代码连接起来。

它本身包含了生产代码，还会调用消费代码。Promise 有三种状态：

pending（进行中）：就像任务还在执行中，结果还没出来。
fulfilled（已完成）：任务成功完成，有了一个结果值。
rejected（已拒绝）：任务出错了，得到一个错误对象。

不过呢，咱们不能直接去访问 Promise 的状态（state）和结果（result），得通过它的方法来处理。

二、Promise 怎么用？

（一）基本语法

创建一个 Promise 得用 new Promise()，里面传一个函数，这个函数有两个参数，myResolve 和 myReject：

let promise = new Promise(function(resolve, reject) {
    // 生产代码
    if (/* 条件满足，任务成功 */) {
        resolve("成功啦！"); // 成功时调用
    } else {
        reject("出错咯！"); // 失败时调用
    }
});

（二）处理结果

用 .then() 来处理 Promise 的结果，它可以接收两个函数：

第一个函数是任务成功时执行的。
第二个函数是任务失败时执行的。这两个函数都是可选的，你可以只写成功的或者只写失败的处理函数。

promise.then(
    function(value) { /* 成功了咋处理 */ },
    function(error) { /* 失败了咋处理 */ }
);

（三）举个栗子

比如，我们用 Promise 来模拟一个 3 秒后的定时器：

function showMessage(some) {
    document.getElementById("demo").innerHTML = some;
}

let promise = new Promise(function(resolve, reject) {
    let x = 0;
    if (x == 0) {
        resolve("OK"); // x 等于 0，任务成功
    } else {
        reject("Error"); // x 不等于 0，任务失败
    }
});

promise.then(
    function(value) { showMessage(value); }, // 成功时显示 "OK"
    function(error) { showMessage(error); } // 失败时显示 "Error"
);

再比如，用 Promise 来处理文件请求：

let promise = new Promise(function(resolve, reject) {
    let req = new XMLHttpRequest();
    req.open('GET', "xxx.html");
    req.onload = function() {
        if (req.status == 200) {
            resolve(req.response); // 请求成功，返回文件内容
        } else {
            reject("File not Found"); // 请求失败，返回错误信息
        }
    };
    req.send();
});

promise.then(
    function(value) { showMessage(value); }, // 成功时显示文件内容
    function(error) { showMessage(error); } // 失败时显示错误信息
);

三、什么时候该用 Promise？

当你遇到以下情况时，就可以考虑用 Promise 啦：

需要处理异步操作：像定时器 setTimeout、网络请求（AJAX）、文件读取这些操作，都是异步的，不会阻塞代码执行，这时候用 Promise 能让代码更清晰。
避免回调地狱：如果有多个异步操作需要按顺序执行，用传统的回调函数可能会写成嵌套的形式，代码看起来像个“地狱”，而 Promise 可以通过链式调用让代码更有条理。
统一处理成功和失败：不管异步操作是成功还是失败，都可以通过 .then() 或者 .catch() 来统一处理结果，让代码更简洁。