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

相关推荐
某公司摸鱼前端28 分钟前
uniapp socket 封装 (可拿去直接用)
前端·javascript·websocket·uni-app
要加油哦~30 分钟前
vue | 插件 | 移动文件的插件 —— move-file-cli 插件 的安装与使用
前端·javascript·vue.js
小林学习编程35 分钟前
Springboot + vue + uni-app小程序web端全套家具商场
前端·vue.js·spring boot
柳鲲鹏37 分钟前
WINDOWS最快布署WEB服务器:apache2
服务器·前端·windows
weixin-a153003083162 小时前
【playwright篇】教程(十七)[html元素知识]
java·前端·html
ai小鬼头2 小时前
AIStarter最新版怎么卸载AI项目?一键删除操作指南(附路径设置技巧)
前端·后端·github
wen's2 小时前
React Native 0.79.4 中 [RCTView setColor:] 崩溃问题完整解决方案
javascript·react native·react.js
一只叫煤球的猫3 小时前
普通程序员,从开发到管理岗,为什么我越升职越痛苦?
前端·后端·全栈
vvilkim3 小时前
Electron 自动更新机制详解:实现无缝应用升级
前端·javascript·electron
vvilkim3 小时前
Electron 应用中的内容安全策略 (CSP) 全面指南
前端·javascript·electron