基于C++11手撸前端Promise

优质文章学习记录

— 7 min read
基于C++11手撸前端Promise

文章导航

引言

在前端开发中，Promise 是处理异步操作的重要工具。它通过将异步操作封装在 Promise 实例中，解决了传统回调地狱的问题，提高了代码的可读性和可维护性。Promise 的概念并非前端独有，在 C++11 标准中也引入了 std::promise，用于实现类似的功能。

本文将从一个手写的 C++ Promise 实现（基于 C++11）出发，分析其工作原理，并与 std::promise 进行对比，探讨两者的异同点以及适用场景。

前端Promise的应用与优势

常见应用场景

定时器
Promise 还可以用于处理定时器，使代码更加直观。

functiontimeout(ms){returnnewPromise((resolve)=>{setTimeout(resolve, ms);});}timeout(1000).then(()=>{ console.log('1秒后执行');});

网络请求
Promise 可以用于处理 AJAX 请求，简化异步数据获取的逻辑。

fetch('https://api.example.com/data').then(response=> response.json()).then(data=>{ console.log('获取到数据:', data);}).catch(error=>{ console.error('请求失败:', error);});

并发请求

使用 Promise.all 可以同时处理多个异步请求。

const promise1 =fetch('https://api.example.com/data1');const promise2 =fetch('https://api.example.com/data2'); Promise.all([promise1, promise2]).then(responses=>{const[data1, data2]= responses.map(response=> response.json());return Promise.all([data1, data2]);}).then(([data1, data2])=>{ console.log('两个数据都获取成功:', data1, data2);}).catch(error=>{ console.error('至少一个请求失败:', error);});

Promise 解决的问题

  1. 回调地狱：通过链式调用，Promise 解决了传统回调嵌套导致的代码难以阅读和维护的问题【6†source】。
  2. 错误处理：Promise 提供了统一的错误处理机制，通过 catch 方法可以集中处理所有异步操作中的错误【1†source】。
  3. 代码可读性：Promise 使得异步代码的逻辑更加清晰，符合同步代码的书写习惯【6†source】。
  4. 并发控制：通过 Promise.all 和 Promise.race，可以方便地控制多个异步操作的执行顺序和结果【5†source】。

手写 C++ Promise 实现

类结构与成员变量

template<typenameElement>classCProimse{private:using Resolve = std::function<void(Element)>;using Reject = std::function<void(const std::string&)>;private: Element m_element;/**< 异步操作的结果 */ std::string m_reason;/**< 拒绝的原因 */ CProimseState m_state;/**< 当前状态 */ std::list<Resolve> m_resolves;/**< 成功回调函数列表 */ std::list<Reject> m_rejects;/**< 失败回调函数列表 */public:CProimse();voidreject(const std::string& reason);voidresolve(Element element);voidonCatch(const Reject& rej); CProimse*then(const Resolve& res);};
  • Resolve 和 Reject ：定义了成功和失败回调函数的类型。
  • m_element 和 m_reason ：分别存储 Promise 的结果和拒绝原因。
  • m_state ：表示 Promise 的当前状态，初始状态为 PENDING。
  • m_resolves 和 m_rejects ：存储注册的成功和失败回调函数列表。

构造函数

CProimse():m_state(CProimseState::PENDING){}
  • 作用：初始化 Promise 的状态为 PENDING。

resolve 方法

voidresolve(Element element){ m_element = element;if(m_state == CProimseState::PENDING){ m_state = CProimseState::FULFILLED;for(Resolve res : m_resolves){res(element);}}}
  • 作用：将 Promise 的状态设置为 FULFILLED，并执行所有注册的成功回调函数。

reject 方法

voidreject(const std::string& reason){ m_reason = reason;if(m_state == CProimseState::PENDING){ m_state = CProimseState::REJECTED;for(Reject rej : m_rejects){rej(reason);}}}
  • 作用：将 Promise 的状态设置为 REJECTED，并执行所有注册的失败回调函数。

then 方法

CProimse*then(const Resolve& res){if(m_state == CProimseState::FULFILLED){res(m_element);}elseif(m_state == CProimseState::PENDING){ m_resolves.push_back(res);}returnthis;}
  • 作用：注册一个成功回调函数。如果 Promise 已经完成，则立即执行回调；否则，将回调添加到成功回调列表中。

onCatch 方法

voidonCatch(const Reject& rej){if(m_state == CProimseState::REJECTED){rej(m_reason);}elseif(m_state == CProimseState::PENDING){ m_rejects.push_back(rej);}}
  • 作用：注册一个失败回调函数。如果 Promise 已经被拒绝，则立即执行回调；否则，将回调添加到失败回调列表中。

链式调用

通过 then 和 onCatch 方法，可以实现链式调用，使得异步操作的处理更加简洁和直观。

proimse->then([](int ele)->void{ std::cout << ele << std::endl;})->onCatch([](const std::string& reason)->void{ std::cout << reason << std::endl;});

使用示例

CProimse<int>* proimse =new CProimse<int>(); proimse->then([](int ele)->void{ std::cout << ele << std::endl;})->onCatch([](const std::string& reason)->void{ std::cout << reason << std::endl;}); proimse->reject("网络异常!!!");

std::promise 与 CProimse 对比

1. 基础功能对比

功能CProimse 实现std::promise
状态管理手动实现标准库实现
回调注册与执行手动实现标准库实现
异步支持需结合线程内置支持
链式调用支持不支持

2. 实现细节对比

(1) 状态管理

  • CProimse ：通过自定义枚举 CProimseState 管理状态。
  • std::promise ：状态管理由标准库实现，用户无需关注底层细节。

(2) 回调注册与执行

  • CProimse ：手动维护回调队列，通过 then 和 onCatch 方法注册回调。
  • std::promise ：通过 std::future 与 std::promise 配合，回调通过 future 的 get 方法触发。

(3) 异步支持

  • CProimse ：需要结合 std::thread 或其他异步框架实现异步操作。
  • std::promise ：内置支持异步操作，通常与 std::async 或 std::thread 结合使用。

(4) 链式调用

  • CProimse ：支持链式调用，通过返回 this 实现。
  • std::promise ：不支持链式调用，无法直接链式注册回调。

3. 代码示例对比

(1) CProimse 示例

CProimse<int>* proimse =new CProimse<int>(); proimse->then([](int ele)->void{ std::cout << ele << std::endl;})->onCatch([](const std::string& reason)->void{ std::cout << reason << std::endl;}); proimse->reject("网络异常!!!");

(2) std::promise 示例

#include<future>#include<thread>#include<iostream>intmain(){ std::promise<int> prom; std::future<int> fut = prom.get_future();// 异步操作 std::thread([&prom](){// 模拟网络请求 std::this_thread::sleep_for(std::chrono::seconds(1)); prom.set_value(42);}).detach();// 注册回调 fut.then([](std::future<int> fut){try{int result = fut.get(); std::cout <<"结果: "<< result << std::endl;}catch(const std::exception& e){ std::cout <<"错误: "<< e.what()<< std::endl;}});// 主线程阻塞等待 std::this_thread::sleep_for(std::chrono::seconds(2));return0;}

4. 优缺点分析

(1) CProimse

  • 优点：
    • 代码简洁，易于理解。
    • 支持链式调用，使用方式类似前端 Promise。
    • 可以作为学习 Promise 实现原理的示例。
  • 缺点：
    • 不支持内置异步操作，需要结合线程实现。
    • 功能较为基础，缺乏 std::promise 的高级特性（如 then 的链式返回）。

(2) std::promise

  • 优点：
    • 内置异步支持，与 std::future 配合使用，功能强大。
    • 标准库实现，性能优化和稳定性有保障。
    • 支持 C++11 及以上标准，兼容性好。
  • 缺点：
    • 使用方式较为复杂，缺乏链式调用的支持。
    • 回调机制不够灵活，无法像前端 Promise 那样优雅地处理异步流程。

总结与展望

通过手写 CProimse，我们可以深入理解 Promise 的实现原理，包括状态管理、回调注册与执行等核心机制。然而，在实际开发中，std::promise 仍然是更好的选择，因为它提供了更强大的功能和更好的性能保障。

对于开发者来说，理解 std::promise 的工作原理以及其与手写实现的异同点，有助于更好地选择合适的工具来处理异步操作。同时，手写实现虽然功能有限，但作为学习和探索的工具，仍然具有重要的价值。

希望本文能够帮助读者更好地理解 Promise 的实现原理，并在实际开发中做出更明智的选择。

Read more

web网络安全-每日一练-Training-WWW-Robots

web网络安全-每日一练-Training-WWW-Robots

练习题目：Training-WWW-Robots 练习网站（攻防世界）：https://adworld.xctf.org.cn/ 解题步骤 1、打开题目场景 在这个小小的训练挑战中，你将了解Repbots_exclusion_standard。 robots.txt文件被网络爬虫用于检查它们是否被允许爬取和索引你的网站，或者只是网站的部分内容。 有时这些文件会暴露目录结构，而不是保护内容不被爬取。 祝你玩得开心！ 2、利用Robots协议 发现根目录下有一个 f10g.php 的文件，访问这个文件内容 3、访问网站根目录的 f10g.php 文件 得到正确答案 知识点讲解：Web 安全信息收集：robots.txt 的原理、利用与防御实战 ⚠️ 警告： 本文仅用于授权测试和安全学习，未经授权扫描目标属于违法行为。 一、写在前面：关于「Repbots」的纠正
前端存储三剑客：localStorage、sessionStorage、cookie 超详细对比

前端存储三剑客：localStorage、sessionStorage、cookie 超详细对比

在前端开发中，数据本地存储是提升用户体验、优化性能、实现持久化状态的核心技术。我们最常用的就是 localStorage、sessionStorage 和 cookie 这三种方案，但很多开发者容易混淆它们的用法、存储特性和适用场景。 这篇博客就用最清晰、最实用的方式，一次性讲透三者的区别、用法和最佳实践。 一、先搞懂核心概念 * cookie：最早的客户端存储方案，会随 HTTP 请求自动发送到服务器，主要用于身份验证、会话保持。 * localStorage：HTML5 新增的本地存储，持久化存储，手动清除才会消失，不参与网络请求。 * sessionStorage：HTML5 新增的会话存储，页面会话期间有效，关闭标签页 / 浏览器就清空。 二、核心区别一张表看懂 表格 特性localStoragesessionStoragecookie生命周期永久有效，手动清除仅当前会话（关闭标签 / 浏览器失效）可设置过期时间，默认会话级存储容量约 5MB约 5MB很小，仅 4KB与服务端通信不参与不参与自动携带在
【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情

【前端小站】HTML 标签：网页骨架，从空白到惊艳，全靠这些 HTML 标签搞事情

半桔：个人主页  🔥 个人专栏: 《前端扫盲》《手撕面试算法》《C++从入门到入土》 🔖为什么有人总是赞美生活的丰富多彩？我想这是因为他们善于品尝生活中随时出现的意外。 -余华- 文章目录 * 前言 * 一. HTML结构 * 1.1 初始HTML标签 * 1.2 标签的层次 * 二. HTML文本标签 * 2.1 标题标签 * 2.2 段落标签 * 2.3 强调标签 * 2.3.1 加粗 * 2.3.2 倾斜 * 2.3.3 删除线 * 2.3.4 下划线 * 三. 媒体与交互标签 * 3.
前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案

前端引入的JS加载失败页面功能无法使用？JS加载失败的终极解决方案

🌷 古之立大事者，不惟有超世之才，亦必有坚忍不拔之志 🎐 个人CSND主页——Micro麦可乐的博客 🐥《Docker实操教程》专栏以最新的Centos版本为基础进行Docker实操教程，入门到实战 🌺《RabbitMQ》专栏19年编写主要介绍使用JAVA开发RabbitMQ的系列教程，从基础知识到项目实战 🌸《设计模式》专栏以实际的生活场景为案例进行讲解，让大家对设计模式有一个更清晰的理解 🌛《开源项目》本专栏主要介绍目前热门的开源项目，带大家快速了解并轻松上手使用 🍎 《前端技术》专栏以实战为主介绍日常开发中前端应用的一些功能以及技巧，均附有完整的代码示例 ✨《开发技巧》本专栏包含了各种系统的设计原理以及注意事项，并分享一些日常开发的功能小技巧 💕《Jenkins实战》专栏主要介绍Jenkins+Docker的实战教程，让你快速掌握项目CI/CD，是2024年最新的实战教程 🌞《Spring Boot》专栏主要介绍我们日常工作项目中经常应用到的功能以及技巧，代码样例完整 👍《Spring Security》专栏中我们将逐步深入Spring Security的各个