Note: This article is intended for coders with limited JavaScript experience, and serves as an introduction to this basic JavaScript content.
Some of the code your write when developing your site is asynchronous code.
Asynchronous code doesn't execute in the order it's written, unlike synchronous code. Instead, it returns a promise. A promise is an object that represents the eventual completion (or failure) of an asynchronous operation and its resulting value. While the promise is pending, synchronous code continues to run.
When developing your website, there are some cases where you need to work with promises. For example:
Promises are a regular JavaScript concept, so it's easy to use AI chatbots or search engines to troubleshoot.
You can handle promises using:
Handling a promise means telling your code to read and use the value of the promise only once its resolved value is known. This means the asynchronous code has finished running. At any given time, a promise has one of the following statuses:
You can tell your code to expect a promise and to wait for the asynchronous code to finish running in the following ways:
async
/await
: Allows you to treat asynchronous code as if it's synchronous, meaning the next line of code won't run until the promise is resolved.then()
: Allows you to run other synchronous code while your asynchronous code is running. You have more control over when your code runs, but it's less readable.async
/await
The async
/await
syntax allows you to handle promises in a way that makes your asynchronous code appear synchronous. This can make your code more readable, as the next line of code won't run until the promise is resolved.
Asynchronous functions are functions that contain asynchronous code. An asynchronous function's return value is always a promise.
To define a function as asynchronous, add async
before the function declaration. For example:
Note: This method is not supported at the top level, because top level code is synchronous.
Add await
before the call to an asynchronous function to make your code wait for the function to resolve before moving on to the next line. For example:
Then you can use the value of the resolved promise on the next line. For example:
async
/await
If your promise is rejected, something has gone wrong in the asynchronous code and you need to handle the error. Use the try...catch
block to handle errors. For example:
then()
With the then()
syntax, you can instruct your code to handle promises by running a function once the promise is resolved. For example:
then()
return valueIf you return a value in the function passed to then()
, that value is always a promise. For example:
You can handle this promise in the same way as any other promise:
async
/await
to use the value synchronously in your code. For example:
then()
methods. For example:
Both of the above examples log the same value to the console.
then()
If your promise is rejected, then something has gone wrong in the asynchronous code and you need to handle the error. Use the catch()
method to handle errors:
Waiting for multiple promises to be fulfilled before the execution of some code is supported.
You can run multiple asynchronous functions and wait for their promises simultaneously using the Promise.all()
method. It accepts multiple promises in an array, and returns an array of resolved values. If any of the promises are rejected, the method throws an error.
For example: