6 # 实现简单的 promise

简介: 6 # 实现简单的 promise

什么是 Promise ?

在 JavaScript 中,Promise 是一种用于处理异步操作的对象,它可以更加优雅地处理回调函数嵌套和错误处理。

promise es6已经内部实现了, ie 不兼容 promise,需要 polyfill (比如:es-promise)

Promise A+

Promise A+ 规范是为了解决 Promise 的实现中出现的一些问题和不一致性,以促进 Promise 的标准化和互操作性。

Promise A+ 规范定义了 Promise 对象的行为和状态转换规则,以及 then 方法的参数和返回值要求等,使不同的 Promise 实现可以遵循同样的规范,从而实现互操作性和可组合性。

promise A+ 规范:https://promisesaplus.com/

Promises/A+ 规范,有现成的单元测试套件,很容易搭建开发环境,以及验证代码是否符合规范要求。具体地址:https://github.com/promises-aplus/promises-tests

为什么会产生 promise,它解决了什么问题?

  1. 过个异步请求并发(希望同步最终结果)Promise.all
  2. 链式异步请求问题(上一个的输出是下一个的输入)Promise的链式调用可以解决这个问题
  3. 缺陷:还是基于回调

实现一个简易版本的 promise

promise 特性

  1. promise 有三个状态:成功态(resolve) 失败态(reject) 等待态(pending)(又不成功又不失败)
  2. 用户自己决定失败的原因和成功的原因,成功和失败也是用户定义的
  3. promise 默认执行器立即执行
  4. promise 的实例都拥有一个 then 方法,一个参数是成功的回调,另一个是失败的回调
  5. 如果执行函数时发生了异常也会执行失败的逻辑
  6. 如果 promise 一旦成功就不能失败,反之亦然,只有等待态的时候才能去更新状态

新建文件 kaimo-promise.js 添加下面代码

const RESOLVE = "RESOLVE"; // 成功态
const REJECT = "REJECT"; // 失败态
const PENDING = "PENDING"; // 等待态
class KaimoPromise {
    constructor(executor) {
        this.status = PENDING;
        // value 是任意合法的 Javascript 值,(包括 undefined,thenable, promise)。
        this.value = undefined;
        // reason 是表示 promise 为什么被 rejected 的值
        this.reason = undefined;
        let resolve = (value) => {
            if (this.status === PENDING) {
                this.value = value;
                this.status = RESOLVE;
            }
        };
        let reject = (reason) => {
            if (this.status === PENDING) {
                this.reason = reason;
                this.status = REJECT;
            }
        };
        try {
            // 立即执行
            executor(resolve, reject);
        } catch (error) {
            // 处理错误异常
            reject(error);
        }
    }
    // promise 必须提供 then 方法来存取它当前或最终的值或者原因。
    // then 接收两个参数:onFulfilled 和 onRejected
    then(onFulfilled, onRejected) {
        if (this.status === RESOLVE) {
            onFulfilled(this.value);
        }
        if (this.status === REJECT) {
            onRejected(this.reason);
        }
    }
}
module.exports = KaimoPromise;

使用

let KaimoPromise = require("./6/kaimo-promise.js");
let promise = new KaimoPromise((resolve, reject) => {
    console.log(1);
    // throw new Error("异常");
    resolve("成功");
    // reject("失败");
});
console.log(2);
promise.then(
    (data) => {
        console.log("success", data);
    },
    (err) => {
        console.log("failed", err);
    }
);

目录
相关文章
|
JavaScript 前端开发 API
Node.js在前端的妙用:打造更出色的Web体验
Node.js在前端的妙用:打造更出色的Web体验
615 5
|
JavaScript 前端开发 安全
nodejs 跨域设置
nodejs 跨域设置
392 0
|
7月前
|
并行计算 前端开发 JavaScript
Web Worker:让前端飞起来的隐形引擎
在现代 Web 开发中,前端性能优化是一个至关重要的课题,尤其是对于计算密集型的应用,如图像处理、视频处理、大规模数据分析等任务。单线程的 JavaScript 引擎常常成为性能瓶颈,导致应用变得迟缓。Web Worker,作为一种强大的技术,使得前端能够在后台进行并行计算,从而实现高效的任务处理,不影响主线程的运行和用户的交互体验。
659 108
|
6月前
|
安全
saas是什么意思,saas软件是干嘛的
SaaS(软件即服务)是一种通过互联网按需租用软件的模式,无需购买、安装或维护。它解决传统软件成本高、部署难、升级烦等问题,让企业像用水电一样使用软件,大幅降低门槛,提升效率,实现降本增效。
3473 0
|
缓存 JavaScript API
NodeJS代理配置指南:详细步骤和代码示例
**Node.js 代理配置:解决HTTP请求转发与CORS挑战** 在现代开发环境中,Node.js以其高效和灵活性深受青睐,但正确配置代理以处理跨域请求和API调用仍是复杂任务。本文提供全面指南,从基础到高级设置,教授如何在Node.js中使用代理,覆盖httpOptions、npm代理及第三方库的运用,以增强API调用灵活性。
1541 23
NodeJS代理配置指南:详细步骤和代码示例
|
JSON 自然语言处理 搜索推荐
开发一款专属的 VSCode 代码提示插件
作为前端开发者一定用过VsCode这款利器,而其强大的插件能力无疑更是让我们深深的爱上了它。据不完全统计,VsCode插件市场中的插件数量已经超过了3万,由此可见大家的热情有多高。其中涉及到各种各样功能的插件,有主题曲相关的,有代码开发相关的,比如代码片段、Git插件、tslint等等。作为开发者,肯定用过各种各样的代码提示的插件,代表性的有TabNine、Copilot等等。今天就让我们来自己动手,开发一款专属的代码提示插件。毕竟别人的再好也是别人的, 属于自己的才是最好的。
3501 1
开发一款专属的 VSCode 代码提示插件
|
编解码 监控 网络协议
如何用魔法般的步骤实现RTSP推送H.264与H.265(HEVC),打造震撼视听盛宴,让每一帧都充满魔力!
【9月更文挑战第3天】实现RTSP流媒体服务推送H.264和H.265编码视频是现代视频监控及直播平台的关键技术。本文详细介绍环境搭建、编码配置及服务器与客户端实现方法。首先,通过FFmpeg捕获视频并编码成RTSP流,接着使用VLC等工具接收播放。此外,还提供了C++示例代码,演示如何利用libv4l2和FFmpeg自定义服务器端实现。希望本文能帮助读者成功搭建RTSP视频流系统。
2755 1
|
开发框架 前端开发 JavaScript
现代前端开发中的跨平台解决方案比较与应用
在现代软件开发中,跨平台解决方案成为了开发者们的热门话题。本文将探讨几种主流的跨平台开发框架及其特点,重点比较它们在前端开发中的应用场景和优劣势。通过对比分析,读者可以更好地理解如何选择适合自己项目需求的跨平台解决方案。
|
JSON 开发框架 JavaScript
Node.js之Express、路由、中间件、接口跨域解决方案详解(附实例)
本文主要介绍了Node.js中Express、路由、中间件、接口跨域解决方案
2318 111
Node.js之Express、路由、中间件、接口跨域解决方案详解(附实例)
RTSP服务器之————rtsp-server(轻量级RTSP / RTP流媒体服务器)
github:https://github.com/revmischa/rtsp-server 轻量级RTSP / RTP流媒体服务器
10344 1

热门文章

最新文章