Question

我有许多异步运行的程序，当每个步骤完成评估是否显示弹出窗口时，我都可以将队列步骤插入列表中。有时我需要在下一个位置插入一个模态以进行跟踪（动态队列），但是我事先不知道该模态的内容，因此SweetAlert2文档中提供了硬编码的动态队列示例没有帮助。

当模式（承诺）被确认或取消（解决）时，我需要能够调用一些逻辑，然后插入新的队列步骤或完成队列。我尝试了无数种不同的方法来执行此操作，但是找不到任何有效的方法。我最后得到的是模态的内容在没有等待任何解决的情况下被猛烈地撞击。因此，我不得不放弃队列，而使用数组暂时保存“看不见的”模态。

我什至把它作为类定义的一部分放在了一个保持循环中，如您在下面看到的（只要对包含挂起列表的数组进行任何更改，就会调用update：

class WarningList {
    constructor() {
        this.pending = [];
        this.old = [];
    }

    getWarnings() {
        return this.pending;
    }

    getOldList() {
        return this.old;
    }

    insertWarning(warning, idx) {
        warning.id = makeId();
        console.log('new warning inserted with id: ' +warning.id);
        console.log(warning);
        if (idx >= 0) {
            this.pending.splice(idx, 0, warning);   
        } else {
            this.pending.push(warning);        
        }

        this.update();
    }

    moveToOldList(oldItem) {
        this.old.push(oldItem);
        console.log('item id: ' + oldItem.id + ', moved to old.');
    }

    showSwals() {
        console.log('!swal.isVisible()' +!swal.isVisible());
        if (!swal.isVisible()){
            let item = this.pending.shift();
            console.log(item);
            item.old = true;
            swal(item)
                .then(resolve => {
                    console.log('warning resolved with result: ');
                    if (resolve.dismiss === 'cancel') {
                        console.log('modal canceled');
                        this.moveToOldList(item);
                        this.update();
                    } else {
                        console.log('other resoution');
                        this.moveToOldList(item);
                        this.update();
                    }
                    console.log('resolution reason: ');
                    console.log(resolve);
                })
                .catch(reject => {
                    console.log(reject);
                });
        } else {
            // wait for update to be triggered
        }
    }


    update(){
        this.showSwals();
    }


} // END OF WarningList CLASS

以下功能是一项测试，该测试将插入3个具有不同属性的警告。预期的行为是将插入并显示测试警告，并且由于swal.isVisible（），其他警告将在挂起的数组中等待，直到再次调用update（）。应该在索引0处插入testWarning3，使其显示为2nd，然后在解决testWarning3之后显示testWarning2。

function testWarningSystem() {
    let warningsList = new WarningList();
    console.log(warningsList);
    let testWarning = {
        type: 'error',
        title: 'This is an Error',
        html: 'Error Modal'
    };
    let testWarning2 = {
        type: 'info',
        title: 'Informational Pop-Up ',
        html: 'Info pop-up dismissed (canceled) with OK button',
    };
    let testWarning3 = {
        idx: 0,
        type: 'question',
        title: 'Need More Info?',
        html: 'This warning inserted at index 0',
        showConfirmButton: true,
        confirmButtonText: 'Give me More!'
    };
    warningsList.insertWarning(testWarning);
    warningsList.insertWarning(testWarning2);
    warningsList.insertWarning(testWarning3);
}

我想念什么？

SweetAlert2手动队列不会等待Promise结果

0 个答案: