Async/await is a modern JavaScript syntax for writing asynchronous code that's easier to read and maintain than callbacks and promises. However, despite its simplicity, async/await can introduce new errors that can be tricky to debug. In this article, we'll cover some of the most common JavaScript async/await errors and provide practical advice on how to identify and fix them.
1. Uncaught (in promise) TypeError: Cannot read property 'then' of undefined
This error occurs when you try to call a method on an undefined object or variable within an async function.
Why It Happens
The error is often caused by a misplaced return statement, a missing await keyword, or trying to use an async function as a regular function.
How to Fix It
To fix this error, check that you're using the await keyword correctly, and that your async function is properly defined and returned.
2. Async function returned non-promise value
This error occurs when an async function returns a non-promise value, such as a string or an object.
Why It Happens
The error is often caused by a missing return statement, or trying to return a non-promise value from an async function.
How to Fix It
To fix this error, ensure that your async function returns a promise, either by using the return keyword followed by a promise, or by using the await keyword within the function.
3. async/await used outside an async function
This error occurs when you try to use the await keyword outside an async function, such as within a regular function or a constructor.
Why It Happens
The error is often caused by a misplaced await keyword, or trying to use async/await syntax within a non-async function.
How to Fix It
To fix this error, ensure that you're using the await keyword within an async function, and that your function is properly defined and marked as async.
4. async function not properly awaited
This error occurs when an async function is not properly awaited, resulting in a promise being returned instead of a value.
Why It Happens
The error is often caused by a missing await keyword, or trying to use an async function as a regular function without awaiting it.
How to Fix It
To fix this error, ensure that you're using the await keyword to properly await the result of the async function, and that your function is properly defined and marked as async.
5. async function called with incorrect arguments
This error occurs when an async function is called with the wrong number or type of arguments.
Why It Happens
The error is often caused by a misplaced function call, or trying to pass the wrong arguments to an async function.
How to Fix It
To fix this error, ensure that you're calling the async function with the correct number and type of arguments, and that your function is properly defined and exported.
6. async function not properly handled for errors
This error occurs when an async function does not properly handle errors, resulting in an uncaught error being thrown.
Why It Happens
The error is often caused by a missing try/catch block, or trying to use an async function without properly handling errors.
How to Fix It
To fix this error, ensure that you're using a try/catch block to properly handle errors within your async function, and that your function is properly defined and marked as async.
Conclusion
Async/await is a powerful and flexible syntax for writing asynchronous code in JavaScript. However, it can also introduce new errors that can be tricky to debug. By understanding the common async/await errors and how to fix them, you can write more robust and maintainable code that's easier to debug and test. Remember to use the await keyword correctly, properly define and return async functions, and handle errors properly to avoid common async/await errors.
Explore More Debugging Resources
- [Browse all JAVASCRIPT errors](/languages/javascript)
- [Browse errors by type](/error-types)
- [Search all documented errors](/search)
- [Use the Error Explainer](/error-explainer-tool)