Day 26: Can You Simplify Async/Await in JavaScript?

Master Asynchronous Programming with Async/Await!

Welcome to Day 26 of our JavaScript challenge series! Today, we’ll demystify async/await, a modern approach to handling asynchronous code in JavaScript. By the end of this challenge, you’ll be confident in using async/await to write clean and readable asynchronous functions.

Not a Member? Read for FREE here.

The Challenge

Write an asynchronous function using async/await that:

1. Fetches data from a public API.
2. Handles errors gracefully.
3. Logs the fetched data or an error message.

Here’s the API we’ll use:

https://jsonplaceholder.typicode.com/posts/1

Solution: Understanding Async/Await

Async/await is syntactic sugar over Promises, making asynchronous code look and behave more like synchronous code.

Step 1: Writing the Async Function

Here’s how you can fetch data using async/await:

async function fetchPost() {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/posts/1');
    if (!response.ok) {
      throw new Error(`HTTP error! status: ${response.status}`);
    }
    const data = await response.json();
    console.log('Fetched Post:', data);
  } catch (error) {
    console.error('Error fetching post:', error.message);
  }
}

fetchPost();

How It Works

1. async Keyword:

• Declares an asynchronous function.
• Automatically wraps the function’s return value in a Promise.

2. await Keyword:

• Pauses execution of the async function until the Promise resolves.
• Can only be used inside an async function.

3. Error Handling:

• try...catch ensures errors are handled gracefully.

Output

If the fetch request is successful:

{
  "userId": 1,
  "id": 1,
  "title"…