在react / redux中排队AJAX请求

Posted 2021-03-26

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

我认为最好的解决方案可能是将它全部封装在一个类中，只需使用像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调用的最佳实践？

答案

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

如果您还不熟悉RxJS，可能需要一段时间才能学习并了解它是如何工作的，但在我看来，这是值得的。对我来说，它已成为在各种情况下使用的重要工具。