使用Pull模型来实现前端的业务逻辑

简介: 使用Pull模型来实现前端的业务逻辑

640.jpg


写在前面


最近在总结自己在业务开发中遇到的问题,经过思考,发现了一个可能值得总结一下的点:使用Pull模型来实现业务逻辑


背景


先不管什么是Pull模型,我们先来看下面的场景:

有一个异步操作A,A完成后,需要根据A返回的结果,再进行下一步的业务逻辑。

一种很常见的实现方式是:


A(res => {  if(res === true) {    // 业务逻辑M  } else {    // 业务逻辑N  }});


这种实现方式没有什么大问题。但是考虑这样一个问题:

经过一段时间的迭代,业务逻辑M和业务逻辑N越来越复杂。这个时候,产品经理突然要加一个前置条件:异步操作A完成后,如果返回值是true,那么需要先进行一个异步操作B,如果B返回的同样是true,再进行业务逻辑M。当这种情况越来越多时,这个时候,代码维护起来就比较麻烦了。


A(resA => {  if(resA === true) {    B(resB => {      if(resB === true) {        // 业务逻辑M      }    })  } else {    // 业务逻辑N  }});


我之前就遇到了这个问题。


怎么解决


要解决这个问题,其实很简单。使用promise 和 await。


const resA = await PromiseA();if(resA === false) {  // 业务逻辑N  return ;}const resB = await PromiseB();if(resB === true) {  // 业务逻辑M}


改造后的代码,我们就可以很方便的添加前置逻辑、和分支条件判断了。


Pull模型


之所以await可以解决上述问题,在我看来,是因为:await其实可以看做是一个Pull模型。所谓Pull模型,其实是来自消息中间件的一个概念。简单来说,Pull模型就是:我需要什么数据的时候,我再去拿。与之对应的,是Push模型:数据产生了,给你拿去用吧。


结合上面的代码来看,我们来看看Push模型和Pull模型的区别。


Push模型:


const asyncFn = function() {};const callback = function(res) {  if(res === true) {    // ....  }};asyncFn(callback);


上面的代码,异步函数执行完成后,回调函数会立即执行。如果我们想判断异步函数执行的结果后,再去做逻辑,就必须在callback里面写代码。异步函数直接把数据Push给了回调函数,回调函数会立即执行。


Pull模型:


const callback = function() {};const asyncFn = async function() {};const asyncRes = await asyncFn();if(asyncRes === true) {    callback();}


上面的代码,从异步函数中Pull了数据后,先进行判断,然后再进入回调函数里面的逻辑。


在我平时的业务开发中,会涉及到许多的异步操作,每一个异步操作都涉及到时序性问题和条件分支问题。使用Pull模型,可以很好的处理异步操作之间的时序问题,并且把代码中的许多if else外置,每一个函数专心实现一个业务逻辑,方便维护,且不易出错。Pull模型可以增强我们对于异步操作的控制能力。


写在后面

业务中使用await来书写代码,可以解决许多问题,其根本原因是await和回调函数在思想上就是不一样的。本次总结,某种程度上加深了自己对于语言的理解,符合预期。

相关文章
|
2月前
|
存储 人工智能 前端开发
前端大模型应用笔记(三):Vue3+Antdv+transformers+本地模型实现浏览器端侧增强搜索
本文介绍了一个纯前端实现的增强列表搜索应用,通过使用Transformer模型,实现了更智能的搜索功能,如使用“番茄”可以搜索到“西红柿”。项目基于Vue3和Ant Design Vue,使用了Xenova的bge-base-zh-v1.5模型。文章详细介绍了从环境搭建、数据准备到具体实现的全过程,并展示了实际效果和待改进点。
188 2
|
14天前
|
前端开发 JavaScript API
(前端3D模型开发)网页三维CAD中加载和保存STEP模型
本文介绍了如何使用`mxcad3d`库在网页上实现STEP格式三维模型的导入与导出。首先,通过官方教程搭建基本项目环境,了解核心对象如MxCAD3DObject、Mx3dDbDocument等的使用方法。接着,编写了加载和保存STEP模型的具体代码,包括HTML界面设计和TypeScript逻辑实现。最后,通过运行项目验证功能,展示了从模型加载到保存的全过程。此外,`mxcad3d`还支持多种其他格式的三维模型文件操作。
|
4月前
|
前端开发 开发者
【前端大揭秘】CSS盒子模型的爱恨情仇:一场关于标准与IE模型的精彩对决!
【8月更文挑战第26天】本文深入探讨CSS中的两大盒子模型——标准盒模型与IE盒模型。通过理论解析与实例代码,清晰展示了两种模型下元素尺寸的构成方式及其应用场景。标准盒模型适合精确控制内容区尺寸,而IE盒模型在处理固定宽度元素时更为直观。掌握这些知识将帮助前端开发者在实际项目中做出更优的设计决策,提升网页布局的质量与美观性。
41 1
|
4月前
|
API UED 开发者
如何在Uno Platform中轻松实现流畅动画效果——从基础到优化,全方位打造用户友好的动态交互体验!
【8月更文挑战第31天】在开发跨平台应用时,确保用户界面流畅且具吸引力至关重要。Uno Platform 作为多端统一的开发框架,不仅支持跨系统应用开发,还能通过优化实现流畅动画,增强用户体验。本文探讨了Uno Platform中实现流畅动画的多个方面,包括动画基础、性能优化、实践技巧及问题排查,帮助开发者掌握具体优化策略,提升应用质量与用户满意度。通过合理利用故事板、减少布局复杂性、使用硬件加速等技术,结合异步方法与预设缓存技巧,开发者能够创建美观且流畅的动画效果。
90 0
|
4月前
|
存储 开发框架 前端开发
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
EAV模型(实体-属性-值)的设计和低代码的处理方案(3)-- 实体属性定义及前端列表展示和数据录入处理
|
5月前
|
开发框架 前端开发 JavaScript
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
循序渐进VUE+Element 前端应用开发(22)--- 简化main.js处理代码,抽取过滤器、全局界面函数、组件注册等处理逻辑到不同的文件中
|
5月前
|
JavaScript 前端开发
前端 JS 经典:统一 Vite 中图片转换逻辑
前端 JS 经典:统一 Vite 中图片转换逻辑
88 0
|
7月前
|
人工智能 前端开发 算法
参加完全球开发者大会之后,我一个小前端尝试使用了一些AI模型
参加完全球开发者大会之后,我一个小前端尝试使用了一些AI模型
|
7月前
|
人工智能 自然语言处理 前端开发
前端训练不规范导致AIGC模型“上梁不正”
【1月更文挑战第23天】前端训练不规范导致AIGC模型“上梁不正”
92 1
前端训练不规范导致AIGC模型“上梁不正”
|
7月前
|
开发框架 前端开发 机器人
从模型到前端,你应该知道的LLM生态系统指南
LLM在在2023年发展的风生水起,一个围绕LLM的庞大生态系统正在形成,本文通过介绍这个生态系统的核心组成部分,来详细整理LLM的发展。
474 2