Question

我有一组需要在服务器端按顺序执行的任务。问题是我似乎无法弄清楚如何在不混淆商店的情况下实现队列。

我认为最好的解决方案可能是将它全部封装在一个类中，只需使用SET_QUEUE(queue)之类的单个操作来使其保持最新。但是那时反应引擎效果不佳 - 对象从方法中被剥离。

可能的解决方案可能是在类中添加一些序列化/反序列化功能。但是，如果请求在状态同步之前发出请求，我担心会有松散的结局吗？

以下是我尝试之一的草稿。

export default class Queue {
    constructor() {
        this.waiting = [];
        this.finished = [];
        this.processingNow = null;

    }

    register(items) {
        this.waiting = items;
    }

    process() {
        if(!this.isBusy() && this.hasWaitingItems()) {
            this.processItem(this.waiting.shift());
        }
    }

    hasWaitingItems() {
        return this.waiting.length > 0;
    }

    isBusy() {
        return this.processingNow == null;
    }

    processItem(item) {
        this.processingNow = item;

        $.ajax({
            type: "POST",
            url: "/perform/" + item.data.name,
            data: {
                data: JSON.stringify(item.data)
            },
            success: function(result){
                this.processingNow = null;    
            }.bind(this),
            error: function(error) {
                ....
                this.processingNow = null;
                this.waiting = [];
            }.bind(this)
        });        
    }
}

在父级 - 组件

中

componentWillReceiveProps(nextProps){
    if(!_.isEqual(this.props.queue, nextProps.queue)) {
        nextProps.queue.process();
    }
}

这可能吗？是否有处理队列/连续ajax调用的最佳实践？

Answer 1

我不确定我是否完全理解您的问题，但是在我当前的项目中，我也遇到了类似的问题，即需要按特定顺序将一批AJAX请求发送到我们的REST API。我最终使用了Redux Observables https://redux-observable.js.org，它是Redux的RxJS中间件。它使我能够聆听某些redux动作，并通过启动连续AJAX请求的另一个动作对它们进行反应。

如果您还不熟悉RxJS，则可能需要花一些时间来学习和理解RxJS的真正工作原理，但我认为这是值得的。对我来说，它已成为在各种情况下使用的重要工具。

在react / redux中排队AJAX请求

1 个答案: