Asynchronous code is code that doesn't necessarily run line-by-line in the order you've written it. In Velo, you will often encounter asynchronous code when you call a function that cannot finish executing immediately and therefore returns a Promise. Also, when you call a backend function that you've written from your page code, you must call it asynchronously. For example, if you run a query on one of your database collections using the function, it takes some time for the query to be executed and for the results to be returned. So you have to wait until the operation is finished before doing anything with the query results. find() Consider the following code snippet where the function returns a Promise: find() .log( )

wixData.query( )
  .find()
  .then( { .log( );
  } ); .log( ); console "1" "myCollection" ( ) => results console "2" console "3" The following will be logged to the console. 1 3 2 Notice that the 3 is logged before the even though the calls do not appear in that order in the code. That is because the logging of only occurs once the query is finished, but the rest of the code continues to run in the meantime. 2 console.log() 2 In this article, we describe how to work with the functions in the Velo API that run asynchronously. We discuss different ways to call such functions and wait for them to finish executing. We do not present a general discussion of asynchronous programming in JavaScript. To learn more about using Promises in a general context, see . Using Promises Promise A Promise represents a value that is not necessarily known when the Promise is created because it depends on asynchronous communication. A function that returns a promise is returning a contract to eventually produce a return value at some point in the future. A Promise is said to be fulfilled or resolved when its value is finally known. There are two main ways to work with Promises that are returned from a function. - Using this approach your code is generally a little more difficult to read, but you have more control over when your code runs. For example, if your code does not need to wait for a Promise to resolve, you can have other code run in the meantime, thereby improving overall performance. then() - Allows you to work with asynchronous code as if it was synchronous, making you code easier to read. However, you lose the option of running other code while waiting for a Promise to resolve. async/await Generally, using is preferred when it does not affect the performance of your site because it makes for cleaner code. However, there are some cases where using then() improves performance and is worth the added complexity. async/await then( ) You can use the of a Promise to specify a function that will be run when the Promise resolves. The specified function receives the value that the Promise resolves to. So, any code that relies on the Promise's resolved value should be placed in the . then() then() For example, let's say you want to retrieve some data from a collection and display it in a table. Since the data retrieval is an asynchronous operation, you have to wait until it is completed before using the query results to set the table's data. The function performs the query and returns a Promise. So the defines a function that runs when the query is finished. That function receives the query results and uses them to set the table's row data. Any code that follows the will run after the query has started, but before the query has finished. Therefore, it cannot use the query results. find() then() then() wixData ;

$w.onReady( {
  wixData.query( )
    .find()
    .then( { $w( ).rows = results.items;
    } ); } ); import from 'wix-data' ( ) function "myCollection" ( ) => results // this will only run once the query has returned results "#myTable" // code here will run before the query has returned results Multiple .then( ) Calls Sometimes, you will need to call another asynchronous function inside the of a Promise returned by another asynchronous function. then() For example, let's say you want to use the function to retrieve data from a 3rd party service. That operation is asynchronous because it has to wait for the 3rd party to return a response. Then you want to read the response as JSON. The function of the response object is also asynchronous. fetch() json() You might think that you need to nest one inside another, which would look something like this: then() fetch( url, { : } )
  .then( { response.json()
      .then( { } );
  } ); method 'get' ( ) => response return ( ) => json // do something with the json response But because itself returns a Promise, you can call another on that returned Promise. Bottom line, that means you can chain successive calls to perform one asynchronous operation after another. then() then() then() That means the code above should be written like this: fetch( url, { : } )
  .then( response.json() )
  .then( { } ); method 'get' => response ( ) => json // do something with the json response Here, the on line 2 is the of the Promise returned by the call. And the on line 3 is the of the Promise returned by the call. The first will only run after the call is finished and the second will only run after the call is finished. then() then() fetch() then() then() json() then() fetch() then() json() Returning in a .then( ) Another common misconception is what happens when you use a return inside a . Some people mistakenly expect that the value the Promise resolves to is used as the return value of the function that the is in. then() then() For example, let's say you have a page about cars. On that page you have a dropdown that users use to select a car model. When a selection is made, you perform a query for a specific car model and populate a table with all the matching items. You might write some code like this thinking that the function will return the car items as an array when the Promise has resolved. queryCars() find() wixData ; { model = $w( ).value;
  $w( ).rows = queryCars(model);
} {
  wixData.query( )
    .eq( , model)
    .find()
    .then( { results.items;
    } );
} import from 'wix-data' export ( ) function modelDropdown_change let "#modelDropdown" "#resultsTable" // This will not work as expected ( ) function queryCars model "cars" "model" ( ) => results return However, the above code will not work as expected. Let's understand why it doesn't work and what we need to do to fix it. When we return , we're not returning it as the return value of the function. Rather, it is returned as the return value of the arrow function passed to the . That means nothing is being returned from the function. So when we call to set the table's rows, we're receiving nothing in return. results.items queryCars() then() queryCars() queryCars() To remedy this situation, we need to return the result of the Promise's (or chain). To do so, we simply add a before we start the chain that created the Promise. This will return the final link in our chain. then() then() return So here our chain looks like this: - Create a query - returns a WixDataQuery object .query() - Modify the query - returns a WixDataQuery object .eq() - Execute the query - returns a Promise .find() - Define what to do on resolution - returns a Promise .then() Adding a to the start of our chain means we'll return the Promise returned from the final . Since the value returned from the is itself a Promise, we need to keep this in mind when we call the function. return then() then() queryCars() That means our fixed up code should look like this: wixData ; { model = $w( ).value;
  queryCars(model)
    .then( {
      $w( ).rows = items;
    } );
} { wixData.query( )
    .eq( , model)
    .find()
    .then( { results.items;
    } );
} import from 'wix-data' export ( ) function modelDropdown_change let "#modelDropdown" ( ) => items "#resultsTable" // The added `return` on line 13 fixes the problem ( ) function queryCars model return "cars" "model" ( ) => results return Here the function returns a Promise that resolves to the items from the query results. So when we call the function we have to treat it like a Promise and use a to use its resolved value to set the table's row data. queryCars() queryCars() then() Debugging on the Backend Calls to that are made from inside the Promise in backend code are not logged in the developer console unless the Promise itself is returned to the client-side code. console.log() then() For example, consider the following backend code: { fetch( , { : })
    .then( { .log(response.status);
  } );
} export ( ) function usePromise return 'https://site.com/api?q=query' method 'get' ( ) => response console As written, if you call from the client-side, the message on line 3 will be logged in the Developer Console. However, if you remove the return on line 2 and call from the backend, the message on line 3 will not be logged in the Developer Console. usePromise usePromise Note You can use to view the output of console messages in backend code. Site Monitoring Error Handling An asynchronous process might fail for any number of reasons. For example if you call a function like that communicates with another server, the call might fail because of a communication error. When a Promise does not resolve successfully, it is said to reject. You can handle rejections by adding a to the end of your chain. The receives the value that the Promise rejects with, usually an error. fetch() catch() then() catch() Let's return to the example of retrieving some data from a collection and displaying it in a table. You can handle errors by adding a like this: catch() wixData ;

$w.onReady( {
  wixData.query( )
    .find()
    .then( $w( ).rows = results.items)
    .catch( { } );
} ); import from 'wix-data' ( ) function "myCollection" => results "#myTable" => error // handle your error here async/await Using a with a Promise allows you to define what code will run when the Promise resolves, while at the same time allowing execution to continue with whatever code comes after the . Another option for working with functions that return Promises is simply to wait for the Promise to resolve before moving on to the execution of any other code. You can do so using . then() then() async/await You use when calling a function that returns a Promise. It pauses the execution of your code until the Promise is resolved. In order to use , you need to declare that the function in which it resides is an function. await await async Once again, let's return to the example of retrieving some data from a collection and displaying it in a table. But instead of using a , we will use to deal with the Promise returned by the function. then() async/await find() Remember, when using a , we wrote code that looked like this: then() wixData ;

$w.onReady( {
  wixData.query( )
    .find()
    .then( { $w( ).rows = results.items;
    } ); } ); import from 'wix-data' ( ) function "myCollection" ( ) => results // this will only run once the query has returned results "#myTable" // code here will run before the query has returned results Using , we can instead write code like this: async/await wixData ;

$w.onReady( { results = wixData.query( ).find(); $w( ).rows = results.items;
} ); import from 'wix-data' async ( ) function const await "myCollection" // the next line will run only after the query has finished "#table1" Here, you can see on line 3 that the callback function passed to the function is declared as an function. And when the function is called, it is called using . So when the query runs, the execution waits until the Promise of the function resolves. Once the query is done, the query results are stored in the results variable which can then be used to set the table's row data. onReady() async find() await find() Note, that when you create an async function, that function returns a Promise. So when you call that function you need to use one of the approaches discussed in this article to deal with the Promise it returns. For example, here is an async function that queries a collection to find an item with a specified name. wixData ; { results = wixData.query( )
    .eq( , name)
    .find(); results.items[ ];
} import from 'wix-data' //... async ( ) function findName name const await "myCollection" "name" return 0 You can call this function using a : then() $w.onReady( {
  findName( )
    .then( .log(item));
} ); ( ) function "Bob" => item console Or, you can call it using : async/await $w.onReady( { item = findName( ); .log(item);
} ); async ( ) function const await "Bob" console Error Handling When using you use a regular block to handle any Promise rejections. async/await try/catch wixData ;

$w.onReady( { { results = wixData.query( ).find(); 
    $w( ).rows = results.items;
  } (error) { }
} ); import from 'wix-data' async ( ) function try const await "myCollection" "#table1" catch // handle the error here Image Credit: https://pixahive.com/photo/promise-illustration/ Previously published at https://support.wix.com/en/article/velo-working-with-promises

Chain

Fetch

Wix-Animation Module Implementation: Follow These Tips to Set It Up

Dealing with Velo Web Modules: Our Advanced Tips for Improved Function Import

Develop Smarter, Deliver Faster

Read My Stories

Too Long; Didn't Read

Make resilience your competitive advantage

Velo Promises in Action: Key Tips to Call the Asynchronously-Run Functions

About Author

Comments

TOPICS

THIS ARTICLE WAS FEATURED IN

Related Stories

Untitled Story

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

5 Hot Velo Practices to Test and Debug Your Website Code

10 Cool CI/CD Tools For Your Project

27 Stories To Learn About Ssl

20 Essential Backend Tools For Developers

3 Most Common Ways to Connect your Node and React Applications

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps