About Promises

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:

• Calling backend functions from your page code.
• Calling certain APIs.

Promises are a regular JavaScript concept, so it's easy to use AI chatbots or search engines to troubleshoot.

Supported IDEs

You can handle promises using:

• The editor (Wix Studio and Wix Editor)
• The Wix IDE (Wix Studio)
• You local IDE (Wix Studio and Wix Editor)

Handle a promise

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:

• Pending: The asynchronous code is still running.
• Fulfilled/resolved: The asynchronous code has finished running and has successfully returned a value.
• Rejected: The asynchronous code has finished running and has thrown an error.

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.

Define asynchronous functions

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:

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:

Handle errors with 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:

Handle then() return value

If 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:

• Use async/await to use the value synchronously in your code. For example:
  Copy

• Chain then() methods. For example:
  Copy

Both of the above examples log the same value to the console.

Handle errors with 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:

Handle multiple promises simultaneously

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: