JavaScript Tutorial

The language for programming web pages.

Chapter Quiz Exercises

JS Promises & Async

JavaScript Promises & Async/Await

Promises handle asynchronous operations. async/await makes asynchronous code look and behave like synchronous code.

Promise States:

Pending — Initial state
Fulfilled — Operation succeeded
Rejected — Operation failed

Async/Await:

The async keyword makes a function return a Promise. The await keyword waits for a Promise to resolve.

Try It Yourself

Edit the code below and click Run to see the result live.

Source Code

<!DOCTYPE html>
<html>
<body style="font-family:Arial;padding:20px;">
<h2>Async/Await Demo</h2>
<button onclick="loadData()" style="padding:12px 25px;background:#f7df1e;color:#1a1a2e;border:none;border-radius:5px;cursor:pointer;font-weight:bold;font-size:1em;">⬇️ Fetch Random User</button>
<div id="out" style="margin-top:15px;padding:15px;background:#f8f9fa;border-radius:10px;display:none;"></div>
<script>
async function loadData() {
  const out = document.getElementById("out");
  out.style.display = "block";
  out.innerHTML = "⏳ Loading...";
  try {
    const res = await fetch("https://randomuser.me/api/");
    const data = await res.json();
    const u = data.results[0];
    out.innerHTML = `
      <img src="${u.picture.large}" style="border-radius:50%;border:3px solid #f7df1e;float:left;margin-right:15px;">
      <h3 style="margin:0">${u.name.first} ${u.name.last}</h3>
      <p>📧 ${u.email}</p>
      <p>📍 ${u.location.city}, ${u.location.country}</p>
      <p>🎂 Age: ${u.dob.age}</p>
      <div style="clear:both"></div>
    `;
  } catch(e) {
    out.innerHTML = "❌ Error: "+e.message;
  }
}
</script>
</body></html>

Result

Topics

JS Introduction JS Where To JS Output JS Variables JS Data Types JS Functions JS Objects JS Arrays JS Strings JS If Conditions JS Loops JS Math JS Errors JS Scope JS DOM JS Events JS Promises & Async JS Classes JS JSON JS RegExp