ES6 Promise 状态机

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

一、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() 来统一处理结果，让代码更简洁。

四、Promise 原理是

Promise 的核心原理其实就是状态机：

1. 一开始，Promise 处于 pending 状态，这时候生产代码在执行。
2. 当生产代码执行成功，就会调用 myResolve()，Promise 状态变成 fulfilled，然后执行 .then() 里的成功回调函数。
3. 要是生产代码执行出错，就会调用 myReject()，Promise 状态变成 rejected，接着执行 .then() 里的失败回调函数。

而且，Promise 的状态一旦改变，就不会再变了。也就是说，一旦变成 fulfilled 或者 rejected，就定格在这个状态了，这样可以避免重复处理结果。

Promise 是 ES6（ECMAScript 2015）引入的特性，现在主流的浏览器基本都支持，比如 Chrome 33 及以上、Firefox 29 及以上等等，所以不用担心兼容性问题，可以放心用起来啦！