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

简介:

写在前面

在实际项目中,应用往往充斥着大量的异步操作,如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. 异步操作是分状态(生命周期)的,默认的有completedfailed。可以通过children参数自定义请求状态。
  3. 在store里通过类似onAddTodoonAddTodoCompletedonAddTodoFailed对请求的不同的状态进行处理。
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,也可以有多种实现方式,具体全看判断取舍。

最后,欢迎交流。

相关文章
|
6月前
|
前端开发 JavaScript
跟着Promise的节奏,让你的代码脱颖而出
跟着Promise的节奏,让你的代码脱颖而出
|
前端开发 JavaScript API
谈谈你对promise的理解?
Promise是ES6异步编程的一种解决方案(目前最先进的解决方案是async和await的搭配(ES8),但是它们是基于promise的),从语法上讲,Promise是一个对象或者说是构造函数,用来封装异步操作并可以获取其成功或失败的结果。
|
前端开发 API UED
💡异步编程发展历程:从回调地狱到async/await!
从最初的回调地狱到现代的async/await,逐步介绍不同的异步编程方式,并探讨它们的优势和劣势。通过对比不同的代码示例,我们将看到如何改善异步代码的可读性和可维护性
131 0
💡异步编程发展历程:从回调地狱到async/await!
|
前端开发
前端学习案例-多个promise竞争会怎么样1
前端学习案例-多个promise竞争会怎么样1
57 0
前端学习案例-多个promise竞争会怎么样1
|
前端开发
前端学习案例-多个promise竞争会怎么样2
前端学习案例-多个promise竞争会怎么样2
67 0
前端学习案例-多个promise竞争会怎么样2
|
前端开发 JavaScript 程序员
Promise难懂?一篇文章让你轻松驾驭
Promise难懂?一篇文章让你轻松驾驭 🔥前言 前端js学习中,让大家最难受的就是异步的问题,解决异步、回调地狱等问题时你必须得学会promise,对于多数前端程序员来说promise简直就是噩梦,本篇文章就是从通俗易懂的角度做为切入点,帮助大家轻松掌握promise
Promise难懂?一篇文章让你轻松驾驭
|
Java
笑了,面试官问我知不知道异步编程的Future。 (4)
笑了,面试官问我知不知道异步编程的Future。 (4)
93 0
笑了,面试官问我知不知道异步编程的Future。 (4)
|
Dubbo Java 应用服务中间件
笑了,面试官问我知不知道异步编程的Future。 (1)
笑了,面试官问我知不知道异步编程的Future。 (1)
98 0
笑了,面试官问我知不知道异步编程的Future。 (1)
|
Java
笑了,面试官问我知不知道异步编程的Future。 (3)
笑了,面试官问我知不知道异步编程的Future。 (3)
104 0
笑了,面试官问我知不知道异步编程的Future。 (3)