AI 助理
备案控制台
开发者社区 开发与运维 文章 正文

Reflux系列01：异步操作经验小结

2016-04-29 1674
版权
版权声明：
本文内容由阿里云实名注册用户自发贡献，版权归原作者所有，阿里云开发者社区不拥有其著作权，亦不承担相应法律责任。具体规则请查看《 阿里云开发者社区用户服务协议》和 《阿里云开发者社区知识产权保护指引》。如果您发现本社区中有涉嫌抄袭的内容，填写 侵权投诉表单进行举报，一经查实，本社区将立刻删除涉嫌侵权内容。
简介：

写在前面

在实际项目中，应用往往充斥着大量的异步操作，如ajax请求，定时器等。一旦应用涉及异步操作，代码便会变得复杂起来。在flux体系中，让人困惑的往往有几点：

  1. 异步操作应该在actions还是store中进行？
  2. 异步操作的多个状态，如pending（处理中）、completed（成功）、failed（失败），该如何拆解维护？
  3. 请求参数校验：应该在actions还是store中进行校验？校验的逻辑如何跟业务逻辑本身进行分离？

本文从简单的同步请求讲起，逐个对上面3个问题进行回答。一家之言并非定则，读者可自行判别。

本文适合对reflux有一定了解的读者，如尚无了解，可先行查看 官方文档 。本文所涉及的代码示例，可在 此处下载。

Sync Action：同步操作

同步操作比较简单，没什么好讲的，直接上代码可能更直观。

var Reflux = require('reflux');

var TodoActions = Reflux.createActions({
    addTodo: {sync: true}
});

var state = [];
var TodoStore = Reflux.createStore({
    listenables: [TodoActions],
    onAddTodo: function(text){
        state.push(text);
        this.trigger(state);
    },
    getState: function(){
        return state;
    }
});

TodoStore.listen(function(state){
    console.log('state is: ' + state);  
});
TodoActions.addTodo('起床');
TodoActions.addTodo('吃早餐');
TodoActions.addTodo('上班');

看下运行结果

  examples git:(master)  node 01-sync-actions.js
state is: 起床
state is: 起床,吃早餐
state is: 起床,吃早餐,上班

Async Action：在store中处理

下面是个简单的异步操作的例子。这里通过addToServer这个方法来模拟异步请求，并通过isSucc字段来控制请求的状态为成功还是失败。

可以看到，这里对前面例子中的state进行了一定的改造，通过state.status来保存请求的状态，包括：

  • pending：请求处理中
  • completed：请求处理成功
  • failed：请求处理失败
var Reflux = require('reflux');

/**
 * @param {String} options.text 
 * @param {Boolean} options.isSucc 是否成功
 * @param {Function} options.callback 异步回调
 * @param {Number} options.delay 异步延迟的时间
 */
var addToServer = function(options){
    var ret = {code: 0, text: options.text, msg: '添加成功 :)'};

    if(!options.isSucc){
        ret = {code: -1, msg: '添加失败！'};
    }
    
    setTimeout(function(){
        options.callback && options.callback(ret);
    }, options.delay);
};


var TodoActions = Reflux.createActions(['addTodo']);

var state = {
    items: [],
    status: ''
};

var TodoStore = Reflux.createStore({

    init: function(){
        state.items.push('睡觉');
    },

    listenables: [TodoActions],

    onAddTodo: function(text, isSucc){
        var that = this;

        state.status = 'pending';
        that.trigger(state);

        addToServer({
            text: text,
            isSucc: isSucc,
            delay: 500,
            callback: function(ret){
                if(ret.code===0){
                    state.status = 'success';
                    state.items.push(text);
                }else{
                    state.status = 'error';
                }
                that.trigger(state);
            }
        });
    },
    getState: function(){
        return state;
    }
});

TodoStore.listen(function(state){
    console.log('status is: ' + state.status + ', current todos is: ' + state.items);
});

TodoActions.addTodo('起床', true);
TodoActions.addTodo('吃早餐', false);
TodoActions.addTodo('上班', true);

看下运行结果：

  examples git:(master)  node 02-async-actions-in-store.js 
status is: pending, current todos is: 睡觉
status is: pending, current todos is: 睡觉
status is: pending, current todos is: 睡觉
status is: success, current todos is: 睡觉,起床
status is: error, current todos is: 睡觉,起床
status is: success, current todos is: 睡觉,起床,上班

Async Action：在store中处理 潜在的问题

首先，祭出官方flux架构示意图，相信大家对这张图已经很熟悉了。flux架构最大的特点就是单向数据流，它的好处在于 可预测、易测试。

一旦将异步逻辑引入store，单向数据流被打破，应用的行为相对变得难以预测，同时单元测试的难度也会有所增加。

enter image description here

ps：在大部分情况下，将异步操作放在store里，简单粗暴有效，反而可以节省不少代码，看着也直观。究竟放在actions、store里，笔者是倾向于放在actions里的，读者可自行斟酌。

毕竟，社区对这个事情也还在吵个不停。。。

Async 操作：在actions中处理

还是前面的例子，稍作改造，将异步的逻辑挪到actions里，二话不说上代码。

reflux是比较接地气的flux实现，充分考虑到了异步操作的场景。定义action时，通过asyncResult: true标识：

  1. 操作是异步的。
  2. 异步操作是分状态（生命周期）的，默认的有completed、failed。可以通过children参数自定义请求状态。
  3. 在store里通过类似onAddTodo、onAddTodoCompleted、onAddTodoFailed对请求的不同的状态进行处理。
var Reflux = require('reflux');

/**
 * @param {String} options.text 
 * @param {Boolean} options.isSucc 是否成功
 * @param {Function} options.callback 异步回调
 * @param {Number} options.delay 异步延迟的时间
 */
var addToServer = function(options){
    var ret = {code: 0, text: options.text, msg: '添加成功 :)'};

    if(!options.isSucc){
        ret = {code: -1, msg: '添加失败！'};
    }
    
    setTimeout(function(){
        options.callback && options.callback(ret);
    }, options.delay);
};


var TodoActions = Reflux.createActions({
    addTodo: {asyncResult: true}
});

TodoActions.addTodo.listen(function(text, isSucc){
    var that = this;
    addToServer({
        text: text,
        isSucc: isSucc,
        delay: 500,
        callback: function(ret){
            if(ret.code===0){
                that.completed(ret);
            }else{
                that.failed(ret);
            }
        }
    });
});


var state = {
    items: [],
    status: ''
};

var TodoStore = Reflux.createStore({

    init: function(){
        state.items.push('睡觉');
    },

    listenables: [TodoActions],

    onAddTodo: function(text, isSucc){
        var that = this;

        state.status = 'pending';
        this.trigger(state);
    },

    onAddTodoCompleted: function(ret){
        state.status = 'success';
        state.items.push(ret.text);
        this.trigger(state);
    },

    onAddTodoFailed: function(ret){
        state.status = 'error';
        this.trigger(state);
    },

    getState: function(){
        return state;
    }
});

TodoStore.listen(function(state){
    console.log('status is: ' + state.status + ', current todos is: ' + state.items);
});

TodoActions.addTodo('起床', true);
TodoActions.addTodo('吃早餐', false);
TodoActions.addTodo('上班', true);

运行，看程序输出

  examples git:(master)  node 03-async-actions-in-action.js 
status is: pending, current todos is: 睡觉
status is: pending, current todos is: 睡觉
status is: pending, current todos is: 睡觉
status is: success, current todos is: 睡觉,起床
status is: error, current todos is: 睡觉,起床
status is: success, current todos is: 睡觉,起床,上班

Async Action：参数校验

前面已经示范了如何在actions里进行异步请求，接下来简单演示下异步请求的前置步骤：参数校验。

预期中的流程是：

流程1：参数校验 --> 校验通过 --> 请求处理中 --> 请求处理成功（失败）
流程2：参数校验 --> 校验不通过 --> 请求处理失败

预期之外：store.onAddTodo 触发

直接对上一小节的代码进行调整。首先判断传入的text参数是否是字符串，如果不是，直接进入错误处理。

var Reflux = require('reflux');

/**
 * @param {String} options.text 
 * @param {Boolean} options.isSucc 是否成功
 * @param {Function} options.callback 异步回调
 * @param {Number} options.delay 异步延迟的时间
 */
var addToServer = function(options){
    var ret = {code: 0, text: options.text, msg: '添加成功 :)'};

    if(!options.isSucc){
        ret = {code: -1, msg: '添加失败！'};
    }
    
    setTimeout(function(){
        options.callback && options.callback(ret);
    }, options.delay);
};


var TodoActions = Reflux.createActions({
    addTodo: {asyncResult: true}
});

TodoActions.addTodo.listen(function(text, isSucc){
    var that = this;

    if(typeof text !== 'string'){
        that.failed({ret: 999, text: text, msg: '非法参数！'});
        return;
    }

    addToServer({
        text: text,
        isSucc: isSucc,
        delay: 500,
        callback: function(ret){
            if(ret.code===0){
                that.completed(ret);
            }else{
                that.failed(ret);
            }
        }
    });
});


var state = {
    items: [],
    status: ''
};

var TodoStore = Reflux.createStore({

    init: function(){
        state.items.push('睡觉');
    },

    listenables: [TodoActions],

    onAddTodo: function(text, isSucc){
        var that = this;

        state.status = 'pending';
        this.trigger(state);
    },

    onAddTodoCompleted: function(ret){
        state.status = 'success';
        state.items.push(ret.text);
        this.trigger(state);
    },

    onAddTodoFailed: function(ret){
        state.status = 'error';
        this.trigger(state);
    },

    getState: function(){
        return state;
    }
});

TodoStore.listen(function(state){
    console.log('status is: ' + state.status + ', current todos is: ' + state.items);
});

// 非法参数
TodoActions.addTodo(true, true);

运行看看效果。这里发现一个问题，尽管参数校验不通过，但store.onAddTodo 还是被触发了，于是打印出了status is: pending, current todos is: 睡觉。

而按照我们的预期，store.onAddTodo是不应该触发的。

  examples git:(master)  node 04-invalid-params.js 
status is: pending, current todos is: 睡觉
status is: error, current todos is: 睡觉

shouldEmit 阻止store.onAddTodo触发

好在reflux里也考虑到了这样的场景，于是我们可以通过shouldEmit来阻止store.onAddTodo被触发。关于这个配置参数的使用，可参考文档。

看修改后的代码

var Reflux = require('reflux');

/**
 * @param {String} options.text 
 * @param {Boolean} options.isSucc 是否成功
 * @param {Function} options.callback 异步回调
 * @param {Number} options.delay 异步延迟的时间
 */
var addToServer = function(options){
    var ret = {code: 0, text: options.text, msg: '添加成功 :)'};

    if(!options.isSucc){
        ret = {code: -1, msg: '添加失败！'};
    }
    
    setTimeout(function(){
        options.callback && options.callback(ret);
    }, options.delay);
};


var TodoActions = Reflux.createActions({
    addTodo: {asyncResult: true}
});

TodoActions.addTodo.shouldEmit = function(text, isSucc){
    if(typeof text !== 'string'){
        this.failed({ret: 999, text: text, msg: '非法参数！'});
        return false;
    }
    return true;
};

TodoActions.addTodo.listen(function(text, isSucc){
    var that = this;

    addToServer({
        text: text,
        isSucc: isSucc,
        delay: 500,
        callback: function(ret){
            if(ret.code===0){
                that.completed(ret);
            }else{
                that.failed(ret);
            }
        }
    });
});


var state = {
    items: [],
    status: ''
};

var TodoStore = Reflux.createStore({

    init: function(){
        state.items.push('睡觉');
    },

    listenables: [TodoActions],

    onAddTodo: function(text, isSucc){
        var that = this;

        state.status = 'pending';
        this.trigger(state);
    },

    onAddTodoCompleted: function(ret){
        state.status = 'success';
        state.items.push(ret.text);
        this.trigger(state);
    },

    onAddTodoFailed: function(ret){
        state.status = 'error';
        this.trigger(state);
    },

    getState: function(){
        return state;
    }
});

TodoStore.listen(function(state){
    console.log('status is: ' + state.status + ', current todos is: ' + state.items);
});

// 非法参数
TodoActions.addTodo(true, true);
setTimeout(function(){
    TodoActions.addTodo('起床', true);
}, 100)

再次运行看看效果。通过对比可以看到，当shouldEmit返回false，就达到了之前预期的效果。

  examples git:(master)  node 05-invalid-params-shouldEmit.js 
status is: error, current todos is: 睡觉
status is: pending, current todos is: 睡觉
status is: success, current todos is: 睡觉,起床

写在后面

flux的实现细节存在不少争议，而针对文中例子，reflux的设计比较灵活，同样是使用reflux，也可以有多种实现方式，具体全看判断取舍。

最后，欢迎交流。

文章标签：
开发工具
git
前端开发
测试技术
程序猿小卡
目录
相关文章
叫个什么名字
|
设计模式 算法 搜索推荐
后端开发中的设计模式应用与实践
在软件开发的广袤天地中，后端技术如同构筑高楼大厦的钢筋水泥，支撑起整个应用程序的骨架。本文旨在通过深入浅出的方式，探讨后端开发领域内不可或缺的设计模式，这些模式犹如精雕细琢的工具箱，能够助力开发者打造出既健壮又灵活的系统架构。从单例模式到工厂模式，从观察者模式到策略模式，每一种设计模式都蕴含着深刻的哲理与实践价值，它们不仅仅是代码的组织方式，更是解决复杂问题的智慧结晶。
叫个什么名字
206 6
蚝油菜花
|
10月前
|
存储 人工智能 图计算
MiniRAG：迷你 RAG 系统加成小型语言模型，爆发出与大型语言模型相当的性能
MiniRAG 是香港大学推出的新型 RAG 系统，专为资源受限场景设计，支持高效知识检索与推理，适用于多种应用场景。
蚝油菜花
455 12
MiniRAG：迷你 RAG 系统加成小型语言模型，爆发出与大型语言模型相当的性能
大数据文摘
|
9月前
|
JSON 前端开发 JavaScript
SpringBoot 2.0 多图片上传加回显
本文记录了在SpringBoot 2.0中实现商户注册后台功能时，处理多图片上传及回显的过程。通过使用`MultipartFile[]`接收前端传来的图片文件，并确保前后端参数名一致。展示了Controller、前端HTML和JS代码，以及配置文件中对上传图片大小的设置。还介绍了全局异常处理机制，使用`@ControllerAdvice`注解捕获异常。最后总结了一些常见问题及解决方法。
大数据文摘
193 0
SpringBoot 2.0 多图片上传加回显
算精通
|
存储 Cloud Native 数据挖掘
Ganos
Ganos
算精通
353 3
站大爷
|
Linux API 开发工具
使用PySimpleGUI库打造一款轻量级计算器
使用PySimpleGUI创建简单计算器的教程。PySimpleGUI是Python的GUI库，适合新手快速构建GUI应用。文中通过实例介绍PySimpleGUI的基本操作，包括组件、事件处理和布局管理。首先讲解PySimpleGUI的特性与安装，接着展示计算器界面的代码，定义布局和窗口。然后实现计算器功能，包括数字和运算符的回调函数处理。最后，总结了如何使用PySimpleGUI创建GUI应用，并鼓励读者进一步探索其更多功能。
站大爷
373 1
杀死一只知更鸟debug
|
JavaScript
particles 粒子背景插件在vue3中的使用
本文介绍了如何在Vue 3项目中使用`particles.vue3`库来创建粒子背景特效。文章提供了粒子背景插件的概述、安装步骤、配置参数说明，并展示了粒子特效的实现效果。同时，提供了在main.js中进行全局配置、在Vue组件中使用粒子背景组件的示例代码，以及完整代码的下载链接。
杀死一只知更鸟debug
1694 2
亚丁号
|
移动开发 开发框架 小程序
分享133个JSP源码，总有一款适合你
分享133个JSP源码，总有一款适合你
亚丁号
776 0
分享133个JSP源码，总有一款适合你
ModelScope运营小助手
|
编解码 人工智能 算法
社区供稿 | AIGC图像分辨率太低？快来试试像素感知扩散超分模型，你想要的细节都在这里！
本文介绍了一种全新的基于SD生成先验的图像超分辨率和修复算法，在多个任务上都有着SOTA的表现。
ModelScope运营小助手
495 0
1941623231718325
|
监控 jenkins 测试技术
持续集成/持续部署(CI/CD)的最佳实践
【6月更文挑战第19天】CI/CD最佳实践概括： 确定CI（集成早期发现错误）和CD（自动化部署）概念，选择适配团队的工具如Jenkins、GitLab CI；编写自动化测试，确保每次提交时运行；实行代码审查和质量检查；自动化构建与部署，利用容器技术；建立监控与反馈机制，快速响应问题；采用分支策略如特性分支和拉取请求；持续学习与改进流程，优化效率和质量。
1941623231718325
568 3
richard_yuu
|
算法 计算机视觉
【Qt&OpenCV 图像的感兴趣区域ROI】
【Qt&OpenCV 图像的感兴趣区域ROI】
richard_yuu
570 1

热门文章

最新文章

  • 1
    初识LVM及ECS上LVM分区扩容
  • 2
    【X-Pack解读】阿里云Elasticsearch X-Pack 监控组件功能详解
  • 3
    spanner 的前世今生
  • 4
    什么是CDN服务
  • 5
    Canal是怎么伪装成 MySQL slave？
  • 6
    还记得“童年回忆”小霸王吗？现在它要打造市值500亿的VR产业
  • 7
    管道符和作业控制、shell变量、环境变量配置文件
  • 8
    url请求中去掉根目录
  • 9
    【OJ】贪心——区间问题 hzu.acmclub.com 1126看电视
  • 10
    SubSonic框架使用图解
  • 1
    Java零基础学习笔记（一）
    27
  • 2
    使用容器部署python flask ubuntu 环境的时候，网页跳转路由无法保持端口号的问题
    29
  • 3
    智能体来了：AI教育与创业的新引擎｜黎跃春谈智能体教育与产业融合
    33
  • 4
    智能体来了：AI教育与产业融合的新时代 ——从大学生智能体开发实训到智能体创业新风口的系统变革
    42
  • 5
    RAG不是“外挂提示词”，而是让大模型真正懂你业务的大脑外
    39
  • 6
    别再用“人肉运维”了！深度学习正在让企业系统自己“懂事”
    34
  • 7
    别把无人驾驶想太玄，大数据才是背后真正的老司机
    127
  • 8
    基于MATLAB的自然图像梯度分布重尾特性验证方案
    130
  • 9
    Mac版Color Folder v3.8安装教程（附dmg文件安装步骤和搜索关键词）
    46
  • 10
    UUID 与 MD5 重复概率深度分析
    55

    • 相关电子书

    更多
  • 低代码开发师（初级）实战教程
  • 冬季实战营第三期：MySQL数据库进阶实战
  • 阿里巴巴DevOps 最佳实践手册
    • 下一篇
    开通oss服务