Code often throws errors, and handling errors is more important. JavaScript also allows users to throw custom errors using the "throw" keyword. We can catch errors in catch block.
We can use try-catch syntax to catch errors thrown by ordinary functions. Let us understand it through the following example.
In the following example, we create the throwError() regular function, which throws an error with a custom error message using the throw keyword. We have executed the function inside the try block. If the function throws any error, control goes to the catch block and this is how we detect the error.
<html> <body> <h3> Using the throw keyword to throw an error from the normal function </h3> <div id = "content"> </div> <script> let content = document.getElementById('content'); // throw error from normal function function throwError() { throw new Error('Error from normal function'); } try { throwError(); } catch (e) { content.innerHTML = e; } </script> </body> </html>
If we make the throwError() function async, it will generate another error because we can use try-catch block to handle errors thrown by synchronous functions.
To resolve this issue, users must use then-catch block syntax to resolve promises.
Users can follow the following syntax to resolve errors thrown by asynchronous functions.
throwError().then((res) => { // print content }).catch((err) => { // print error message })
In the above syntax, throwError() is a function that returns a Promise, and we use then and catch blocks to solve this problem.
In the example below, the throwError() function is an asynchronous function because we added the "async" keyword before the function keyword. We threw errors from the async function just like we would from a regular function.
After that, we use then and catch blocks to handle Promise. In the output, the user can observe that when the async function throws an error, control goes to the catch block.
<html> <body> <h3> Using the <i> throw </i> keyword to throw an error from the async function </h3> <div id = "content"> </div> <script> let content = document.getElementById('content'); // throw error from normal function async function throwError() { throw new Error('Error from Async function'); } throwError().then((res) => { content.innerHTML = res; }).catch((err) => { content.innerHTML = err; }) </script> </body> </html>
We can return promises from async functions. Rejecting a promise in an async function is like throwing an error. We use the reject() method in the callback function to reject the promise.
The ‘then-catch’ block is used to resolve the promise returned by the function, and the user can see the control go to the catch block.
<html> <body> <h3> Using the <i> reject </i> method to throw an error from the async function </h3> <div id = "content"> </div> <script> let content = document.getElementById('content'); // throw error from normal function async function throwError() { return new Promise((resolve, reject) => { reject("This promise is rejected from the async function." ); }); } throwError().then((res) => { content.innerHTML = res; }).catch((err) => { content.innerHTML = err; }) </script> </body> </html>
Users learned how to throw errors from async functions. Users can use the "throw" keyword to throw errors just like regular functions. Users need to use "then-catch" blocks to handle errors because async functions return Promise instead of using try-catch blocks.
The above is the detailed content of How to raise an error in an async generator function in JavaScript?. For more information, please follow other related articles on the PHP Chinese website!