ES6 Promise 状态机

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

一、Promise 是什么?

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

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

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

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

二、Promise 怎么用?

(一)基本语法

创建一个 Promise 得用 new Promise(),里面传一个函数,这个函数有两个参数,myResolvemyReject

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

(二)处理结果

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

  • 第一个函数是任务成功时执行的。
  • 第二个函数是任务失败时执行的。这两个函数都是可选的,你可以只写成功的或者只写失败的处理函数。
javascript 复制代码
promise.then(
    function(value) { /* 成功了咋处理 */ },
    function(error) { /* 失败了咋处理 */ }
);

(三)举个栗子

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

javascript 复制代码
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 来处理文件请求:

javascript 复制代码
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 及以上等等,所以不用担心兼容性问题,可以放心用起来啦!

相关推荐
你怎么知道我是队长2 分钟前
python---eval函数
开发语言·javascript·python
溟洵5 分钟前
Qt 窗口 工具栏QToolBar、状态栏StatusBar
开发语言·前端·数据库·c++·后端·qt
用户25191624271110 分钟前
Canvas之图像合成
前端·javascript·canvas
每天开心10 分钟前
噜噜旅游App(4)——构建旅游智能客服模块,实现AI聊天
前端·微信小程序·前端框架
超凌11 分钟前
el-input-number出现的点击+-按钮频现不生效
前端
三小河11 分钟前
contentEditable 实现可编辑区域
前端
一道雷19 分钟前
🧩 Vue Router嵌套路由新范式:无需嵌套 RouterView 的布局实践
前端·vue.js
Mintopia24 分钟前
🎯 光与面的命运交锋:Möller-Trumbore 线段三角形相交算法全解析
前端·javascript·计算机图形学
Ares-Wang31 分钟前
Vue》》@ 用法
前端·javascript·vue.js
心.c1 小时前
JavaScript单线程实现异步
开发语言·前端·javascript·ecmascript