How to Utilize Async/Await with Callbacks in JavaScript?

Await Callback Resolution

In a scenario where a simple callback is utilized, such as the example below:

test() {
  api.on( 'someEvent', function( response ) {
    return response;
  });
}

converting this function to employ async/await requires a slight alteration. Assuming 'someEvent' is guaranteed to be invoked only once, the 'test' function can be transformed into an async function that awaits the execution of the callback:

async test() {
  return await api.on( 'someEvent' );
}

However, async/await is not inherently capable of handling callbacks directly. To bridge this gap, api.on() must be redesigned to return a Promise. Here's an example:

function apiOn(event) {
  return new Promise(resolve => {
    api.on(event, response => resolve(response));
  });
}

With this modification, the 'test' function can now be written as:

async function test() {
  return await apiOn( 'someEvent' ); 
}

Please note that the await keyword is essentially optional in this context, as either approach will still result in a promise being returned.

Finally, it's important to remember that async functions themselves return Promises. As such, accessing the value returned by 'test()' directly is not possible. Instead, the returned Promise needs to be handled:

async function whatever() {
  // snip
  const response = await test();
  // use response here
  // snip
}

The above is the detailed content of How to Utilize Async/Await with Callbacks in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!