Async and await are JavaScript keywords that make handling asynchronous operations much easier and more intuitive—especially when working with APIs, dynamic data, or custom integrations in Webflow.
async marks a function so it always returns a Promise.await can only be used inside an async function and pauses execution until the Promise is resolved.These features help write code that looks and behaves more like traditional, synchronous code, which improves readability and error handling.
// Using async makes this function return a promiseasync function fetchGreeting() { return "Hello, Webflow developer!";}// Consuming the function with .then()fetchGreeting().then(function(value) { console.log(value); // Output: Hello, Webflow developer!});``Using `await` inside an async function:async function runExample() {
let greeting = await fetchGreeting();
console.log(greeting); // Output: Hello, Webflow developer!
}
runExample();
## Practical Webflow Example: Fetching Data for Custom EmbedsSuppose you want to load data from an API and display it on your Webflow site using custom code:async function fetchAndDisplay() {
let response = await fetch('https://api.example.com/data');
let data = await response.json();
document.getElementById('my-element').textContent = data.message;
}
// Call the function after the DOM is ready
fetchAndDisplay();
## Handling Delays and Timeouts`async` and `await` can also be used with timers:async function showMessageAfterDelay() {
let myPromise = new Promise(function(resolve) {
setTimeout(function() { resolve("Loaded after 3 seconds!"); }, 3000);
});
document.getElementById("demo").innerHTML = await myPromise;
}
showMessageAfterDelay();
## Resources for Further Learning- [W3Schools: JavaScript Async](https://www.w3schools.com/js/js_async.asp)- [Webflow University: Using Custom Code](https://university.webflow.com/lesson/custom-code)- [Webflow University Video: Intro to Custom Code](https://university.webflow.com/lesson/custom-code)- [MDN Web Docs: async function](https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Statements/async_function)