异步等待获取调用触发重复警报

Question

我用 JS 和 PHP 创建了一个编辑器，允许在网页上更改文本和图像。考虑以下 JS 函数：

const publish = () => {

    if (unpublished || Object.keys(files).length) {

        // start spinning loader
        let icon = document.getElementById("loader");
        icon.innerText = 'refresh';
        icon.classList.add("spin");

        // text changes
        if (unpublished) {
            let parcel = new FormData();
            parcel.append("lang", langId);
            parcel.append("page", pageId);
            parcel.append("edits", JSON.stringify(edits));

            send(parcel);

            unpublished = false;
        }

        // image changes
        if (Object.keys(files).length) {

            Object.keys(files).forEach(section => {
                const length = Object.keys(files[section]).length;
                for (let i = 0; i < length; i++) {

                    const tag = Object.keys(files[section])[i];
                    const file = Object.values(files[section])[i];
                    let parcel = new FormData();
                    parcel.append("lang", langId);
                    parcel.append("page", pageId);
                    parcel.append("section", section);
                    parcel.append(tag, file);

                    send(parcel);
                }
            })
            files = {};
        }

        async function send(parcel) {
            const response = await fetch("", {
                method: "POST",
                body: parcel,
            });
            if (!response.ok) alert(Error(response.statusText));
            if (!unpublished && !Object.keys(files).length) {

                // stop spinning loader
                icon.classList.remove("spin");
                icon.innerText = 'save';
                alert("changes published");
            }
        }
    }
}

PHP 处理更改（包裹）。如果用户更改文本或图像，一切正常。但是，如果两者都更改，'changes published' 警报会触发两次，即使条件

if (!unpublished && !Object.keys(files).length)

在

之后才应该是真的

files = {};

Answer 1

@Bergi 谢谢，现在可以了。以下是结果以备不时之需：

const publish = () => {

if (Object.keys(edits).length || Object.keys(files).length) {

    let promises = [];

    // start spinning loader
    let icon = document.getElementById("loader");
    icon.innerText = 'refresh';
    icon.classList.add("spin");

    // text changes
    if (Object.keys(edits).length) {
        let parcel = new FormData();
        parcel.append("lang", langId);
        parcel.append("page", pageId);
        parcel.append("edits", JSON.stringify(edits));

        promises.push(send(parcel));

        edits = {};
    }

    // image changes
    if (Object.keys(files).length) {

        Object.keys(files).forEach(section => {
            const length = Object.keys(files[section]).length;
            for (let i = 0; i < length; i++) {

                const tag = Object.keys(files[section])[i];
                const file = Object.values(files[section])[i];
                let parcel = new FormData();
                parcel.append("lang", langId);
                parcel.append("page", pageId);
                parcel.append("section", section);
                parcel.append(tag, file);

                promises.push(send(parcel));
            }
        })

        files = {};
    }

    // send parcel
    async function send(parcel) {
        const response = await fetch("", {
            method: "POST",
            body: parcel,
        });
        if (!response.ok) alert(Error(response.statusText));
    }

    Promise.all(promises).then(() => {

        // stop spinning loader
        icon.classList.remove("spin");
        icon.innerText = 'save';
        alert("changes published");
        return;
    })
}

}

异步等待获取调用触发重复警报

Async-await fetch call triggers duplicate alerts

javascript

fetch

async-await