Vue.js front-end web page pop-up asynchronous behavior example analysis

1. Preface

Web page pop-up boxes are a very common feature, such as when users need to be informed of a message (Alert), when users need to confirm (Confirm), when users need to add some information (Prompt)... You can even pop up a box to let users fill out a form (Modal Dialog).

After the pop-up window appears, developers need to know when the pop-up window is closed in order to proceed with the next operation.

In the older UI components, this is done through event callbacks, which look something like this:

showDialog(content, title, {
    closed: function() { console.log("Dialog box has been closed"); }
})

However the behavior of the dialog box. You see, it pops up, but it doesn't block the following code, and the developer doesn't know when it is closed because it is a user behavior. Since it is asynchronous, it would be more comfortable to encapsulate it into Promise and call it using await syntax. A simple package might look like this:

async function asyncShowDialog(content, title, options) {
    return new Promise(resolve => {
        showDialog(content, title, {
            ...options,
            closed: resolved
        });
    });
}
 
(async () => {
    await asyncShowDialog(content, title);
    console.log("Dialog box has been closed");
})();

The basic asynchronous behavior of the pop-up window is as simple as that, and that’s it? If you are still not satisfied, study it further!

2. Find two pop-up components

Ant Design Vue uses the form of events. Clicking the "OK" button will trigger the ok event, and clicking "Cancel" or the close button in the upper right corner will trigger the cancel event.

These two event handling functions are mounted through onOk and onCancel properties of the parameter object. It looks plain, but if the event handler returns a Promise object, a loading animation will appear after clicking the button, and the dialog box will not be closed until the Promise object is completed. This design combines the asynchronous waiting animation into the pop-up window, which is simple and intuitive, and the code is also easy to write. Take the confirm dialog box as an example:

Modal.confirm({
    ...
    onOk() {
        // After clicking the "OK" button, the loading animation will be displayed and the dialog box will be closed after one second return new Promise(resolve => {
            setTimeout(resolve, 1000);
        });
    }
    ...
});

Element Plus uses the Promise format. When opening the dialog box, it does not pass the confirmation or cancellation processing function as a parameter, but directly returns a Promise object for developers to handle through .then()/.catch() or await . Example:

try {
    await ElMessageBox.confirm(...);
    // Press the OK button to handle it here} catch(err) {
    // Cancel button press is handled here }

The Element Plus processing method requires that the business can only be processed after the dialog box is closed. This is also the limitation of using Promise - it is difficult to insert new logic into an already encapsulated Promise object.

If you want to perform some asynchronous operations before closing ElMessageBox like Ant Design does, you can only look for it to see if it provides processing events before closing. I actually found it after searching for a while. It has beforeClose event. The event handler signature is beforeClose(action, instance, done) :

action indicates which button was pressed, and possible values ​​are "confirm" , "cancel" and "close" (no explanation required).

instance is a MessageBox instance, which can be used to control some interface effects, such as

instance.confirmButtonLoading = true will display a loading animation on the "OK" button, instance.confirmButtonText can be used to change the button text... These operations can provide a better user experience when performing asynchronous waiting.

done is a function that is called to indicate that the asynchronous processing of beforeClose() is complete and the dialog box can now be closed!

So the Ant Design-like processing can be written like this:

try {
    await ElMessageBox.confirm({
        ...
        beforeClose: async (action, instance, done) => {
            await new Promise(resolve => setTimeout(resolve, 1000));
            done();
        }
    });
    // Press the OK button to handle it here} catch(err) {
    // Cancel button press is handled here }

3. Make one yourself

After analyzing the behavior processing of the two bullet box components, we already know that a bullet box component with good experience should have the following characteristics:

• Provide Promise-based asynchronous control capabilities (Ant Design Vue does not provide this, but it can be encapsulated like in the "Sequence").
• Allows some operations to be performed before closing, even asynchronous operations.
• Provide interface feedback during the asynchronous loading process, and it is best not to require developer control (from this point of view, Ant Design is more convenient than Element Plus).

Next, let's write one ourselves and see how to implement the above features. However, since we are mainly studying behavior rather than data processing, we will not use the Vue framework, but directly use DOM operations, and then introduce jQuery to simplify DOM processing.

The HTML skeleton of the dialog box is also relatively simple: a mask layer at the bottom, a fixed-size <div> layer on top, and the internal <div> is divided into three areas: title, content, and operation area:

<div class="dialog" id="dialogTemplate">
  <div class="dialog-window">
    <div class="dialog-title">Dialog box title</div>
    <div class="dialog-content">Dialog content</div>
    <div class="dialog-operation">
      <button type="button" class="ensure-button">Confirm</button>
      <button type="button" class="cancel-button">Cancel</button>
    </div>
  </div>
</div>

Here it is defined as a template, and we hope to clone a DOM from it each time for presentation, and destroy it when it is closed.

The content of the style sheet is long and can be obtained from the example link below. The code and its evolution are the focus of this article.

The simplest way to present it is to use jQuery to clone it and display it, but before displaying it, be sure to delete id attribute and add it to <body> :

$("#dialogTemplate").clone().removeAttr("id").appendTo("body").show();

Wrap it in a function and add processing for the "OK" and "Cancel" buttons:

function showDialog(content, title) {
    const $dialog = $("#dialogTemplate").clone().removeAttr("id"); 
    // Set the title and content of the dialog box (simple example, so only handles text)
    $dialog.find(".dialog-title").text(title);
    $dialog.find(".dialog-content").text(content); 
    // Handle two button events through event proxy (or without proxy) $dialog
        .on("click", ".ensure-button", () => {
            $dialog.remove();
        })
        .on("click", ".cancel-button", () => {
            $dialog.remove();
        }); 
    $dialog.appendTo("body").show();
}

The basic logic of the pop-up window is revealed. Now let's make two optimizations: ① Encapsulate $dialog.remove() into a function to facilitate unified processing of closing dialog boxes (code reuse) ② Using .show() is too abrupt, so change it fadeIn(200) ; similarly, fadeOut(200) should be called before .remove() .

function showDialog(...) {
    ... 
    const destroy = () => {
        $dialog.fadeOut(200, () => $dialog.remove());
    }; 
    $dialog
        .on("click", ".ensure-button", destroy)
        .on("click", ".cancel-button", destroy); 
    $dialog.appendTo("body").fadeIn(200);
}

3.1. Encapsulating Promises

At this point, the pop-up window can be popped up/closed normally, but there is no way to inject the "OK" or "Cancel" logic code. As mentioned earlier, the interface can be provided in two forms: events or promises. Here, the promise method is used. If you click "OK" it will resolve, and if you click "Cancel" it will reject.

function showDialog(...) {
    ... 
    const promise = new Promise((resolve, reject) => {
        $dialog
            .on("click", ".ensure-button", () => {
                destroy();
                resolve("ok");
            })
            .on("click", ".cancel-button", () => {
                destroy();
                reject("cancel");
            });
    }); 
    $dialog.appendTo("body").fadeIn(200);
    return promise();
}

The encapsulation is done, but there is a problem: destroy() is an asynchronous process, but the code does not wait for it to finish, so after showDialog() completes the asynchronous processing, it is still performing fadeOut() and remove() operations. To solve this problem, you can only encapsulate destory() . Of course, don't forget to add await when calling, and to add await , you need to declare the outer function as async :

function showDialog(...) {
    ...
    const destroy = () => {
        return new Promise(resolve => {
            $dialog.fadeOut(200, () => {
                $dialog.remove();
                resolve();
            });
        });
    };
     const promise = new Promise((resolve, reject) => {
        $dialog
            .on("click", ".ensure-button", async () => {
                await destroy();
                resolve("ok");
            })
            .on("click", ".cancel-button", async () => {
                await destroy();
                reject("cancel");
            });
    }); 
    ...
}

3.2. Allow asynchronous waiting when certain

Whether you click "Confirm" or "Cancel", the pop-up window can be kept displayed for asynchronous waiting. But as an example, only the "OK" case is handled here.

This asynchronous waiting process needs to be injected into the pop-up window, and can only be injected in the form of parameters. Therefore, you need to add an options parameter to showDialog() to allow a processing function to be injected into onOk property. If this processing function returns Promise Like, asynchronous waiting is performed.

First modify showDialog() interface:

function showDialog(conent, title, options = {}) { ... }

Then handle the $dialog.on("click", ".ensure-button", ...) event:

$dialog
    .on("click", ".ensure-button", async () => {
        const { onOk } = options;
        // Get onOk from options. If it is a function, it needs to wait for processing if (typeof onOk === "function") {
            const r = onOk();
            // Determine whether the result of onOk() is a Promise Like object // Only Promise Like objects need asynchronous waiting if (typeof r?.then === "function") {
                const $button = $dialog.find(".ensure-button");
                // During the asynchronous waiting process, the user needs to be given some feedback // I am lazy here and do not use loading animation, only use text for feedback $button.text("Processing...");
                await r;
                // Because after completion, there is a 200 millisecond fade-out process before closing,
                // So it is necessary to change the button text to "Done" to give users timely feedback $button.text("Done");
            }
        }
        await destroy();
        resolve("ok");
    })

Now the behavior of this pop-up box is basically processed, and the calling example is:

const result = await showDialog(
    "Hello, here is the content of the dialog box",
    "Say hello",
    {
        onOk: () => new Promise((resolve) => { setTimeout(resolve, 3000); })
    }
).catch(msg => msg); // Here, the reject caused by cancellation is turned into a resolve to avoid using try...catch...
 
console.log(result === "ok" ? "Press OK" : "Press Cancel");

3.3. Improve the details

It's a bit inappropriate to use console.log(...) at the end of the dialog box. Wouldn't it be better to directly pop up a prompt message?

But now showDialog() only handles the Confirm pop-up box, not the Alert pop-up box... It’s not a big problem, just add a type in options . If type is "alert" , remove the "Cancel" button.

async function showDialog(content, title, options = {}) {
    ...
    
    if (options.type === "alert") {
        $dialog.find(".cancel-button").remove();
    }    
    ...
}

Then, the final console.log(...) can be evolved:

showDialog(result === "ok" ? "Press OK" : "Press Cancel", "Prompt", { type: "alert" });

3.4. Reform

If you don’t like injecting the processing function in options , you can also inject it in the returned Promise object. First, change const { onOk } = options const { onOk } = promise in the .ensure-button event, that is, get the injected onOk from promise . Then change the calling part:

const dialog = showDialog("Hello, here is the content of the dialog box", "Say hello");
// Inject the processing function into promise's onOk
dialog.onOk = () => new Promise((resolve) => { setTimeout(resolve, 3000); });
const result = await dialog.catch(msg => msg);
showDialog(result === "ok" ? "Press OK" : "Press Cancel", "Prompt", { type: "alert" });

There are a few things to note here:

dialog must only be returned directly from showDialog() . If .catch() is called, another Promise object will be obtained. At this time, injecting onOk will not be able to inject it into the Promise object generated in showDialog() .

showDialog() cannot be declared as async , otherwise the Promise object returned will not be the one generated inside.

Don't forget await .

The above is the detailed analysis of the example of asynchronous behavior of vue.js front-end web page pop-up box. For more information about vue.js front-end asynchronous web page pop-up box, please pay attention to other related articles on 123WORDPRESS.COM!