How to exit callback functions in Async/Await elegantly?

Gracefully terminate callback function in Async/Await

How to safely exit from a callback function with uncertain execution time is a common challenge when using async/await for asynchronous operations. This article will provide a scenario to demonstrate how to effectively control the exit of the callback function in the async/await environment.

Problem: The code uses MutationObserver to listen for changes in button properties. When the properties change, you need to exit the asynchronous function. The traditional writing of Promise is easy to implement, but when the code is complex, nested Promise will reduce readability and maintainability. The goal is to rewrite the code to async/await style while solving the problem of how to safely exit the asynchronous function in the callback function.

Sample code:

 // Use the traditional writing method of Promise const a = (): Promise<void> => {
  return new Promise((resolve) => {
    const callback = (mutations: MutationRecord[]) => {
      // Listen to the button attribute changes, exit the function resolve() here;
    };
    const observer = new MutationObserver(callback);
    observe.observe(buttonEl, { attributes: true });

    // Call the Promise function, trigger the button click event after success, and then listen for property changes p().then(() => {
      buttonEl.click();
    });
  });
};

// Use async/await to write const b = async (): Promise<void> => {
  const callback = (mutations: MutationRecord[]) => {
    // Listen to the changes in button attributes, how to exit the function here?
  };
  const observer = new MutationObserver(callback);
  observe.observe(buttonEl, { attributes: true });

  // Call the Promise function, trigger the button click event after success, and then listen for property changes await p();
  buttonEl.click();
};</void></void>

Solution:

In order to implement the same function as the a function in async/await, you can use Promise.withResolvers() method. This method returns an object containing the Promise and resolve functions.

Improved code:

 const b = async (): Promise<void> => {
  const { promise, resolve } = Promise.withResolvers<void> ();

  const callback = (mutations: MutationRecord[]) => {
    resolve(); // Call resolve() in the callback function to solve the Promise
  };
  const observer = new MutationObserver(callback);
  observe.observe(buttonEl, { attributes: true });

  await p();
  buttonEl.click();
  await promise; // Wait for the promise to resolve};</void></void>

Compatibility description:

Promise.withResolvers() is currently in the proposal stage and not all browsers are natively supported. To ensure compatibility, polyfills, such as core-js , may be required. Similarly, TypeScript users need to update to version 5.4 or higher and configure lib to include esnext in tsconfig.json .

With Promise.withResolvers() , you can call resolve() in the callback function to solve the Promise, thereby effectively controlling the exit process of the async/await function, avoiding complex Promise nesting, and improving the readability and maintainability of the code.

The above is the detailed content of How to exit callback functions in Async/Await elegantly?. For more information, please follow other related articles on the PHP Chinese website!