Sling Academy
Home/JavaScript/Use async/await with the JavaScript fetch API

Use async/await with the JavaScript fetch API

Last updated: December 12, 2024

JavaScript has excelled in the realm of asynchronous programming, enabling developers to build non-blocking applications efficiently. Among its notable features is the combination of the async and await keywords, providing a powerful syntax for handling asynchronous code in a more readable and straightforward manner. This is particularly useful when working with the Fetch API to make HTTP requests, which are inherently asynchronous.

Understanding Async/Await

The async/await syntax was introduced with ES2017 (ES8) and has quickly become a favorite among developers. It allows you to write asynchronous code that looks and behaves like synchronous code, much like running tasks in sequence. This eliminates the hurdles introduced by callback hell or chaining multiple then() methods in Promises.

Async Functions

  • A function declared with an async keyword always returns a Promise.
  • Inside an async function, you can use await to pause the execution until the Promise is resolved.

Using Fetch with Async/Await

The Fetch API is a modern interface for making network requests. It returns Promises, making it a perfect candidate for working with async/await syntax. Let’s explore how we can harness these features to perform network requests smoothly.

Making a Simple Fetch Request

Below is a basic fetch request using async/await in JavaScript:

async function fetchData(url) {
    try {
        const response = await fetch(url);
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const data = await response.json();
        console.log(data);
        return data;
    } catch (error) {
        console.error('There was a problem with the fetch operation:', error);
    }
}

fetchData('https://api.example.com/data');

In this example, we wrapped our fetch call within an async function called fetchData. We call await before fetch to ensure our code waits for the Promise to resolve before continuing. This returns the response object, which we verify with an if condition to check the ok status before converting it to JSON.

Error Handling

Handling errors in asynchronous operations can be tricky. Using a try...catch block handles any errors that may arise during the execution of our async code.

If something goes wrong, like a network error or a 404 response from the server, the control moves to the catch block, allowing us to handle the exception gracefully without crashing the application.

Advanced Fetch Operations with Async/Await

Let's consider more advanced fetching scenarios like posting data to an API.

POST Request

Below is an example demonstrating how to make a POST request:

async function postData(url = '', data = {}) {
    try {
        const response = await fetch(url, {
            method: 'POST',
            headers: {
              'Content-Type': 'application/json'
            },
            body: JSON.stringify(data) 
        });
        if (!response.ok) {
            throw new Error('Network response was not ok');
        }
        const responseData = await response.json();
        console.log(responseData);
        return responseData;
    } catch (error) {
        console.error('Error during POST operation:', error);
    }
}

postData('https://api.example.com/submit', { answer: 42 });

In this POST request, we've added properties to fetch options: method set to 'POST', content type headers appropriate for sending JSON data, and the body of the request that contains stringified data.

Conclusion

The use of async/await has greatly simplified the way developers interact with asynchronous operations, making JavaScript code cleaner and easier to read. Coupling async/await with fetch allows you to handle HTTP requests seamlessly, enhancing your JavaScript applications. With robust error management, you can build fault-tolerant systems that provide a great user experience.

Next Article: Combine fetch with Other Web APIs in JavaScript

Previous Article: Manage HTTP Errors Gracefully in JavaScript fetch Requests

Series: Web APIs – JavaScript Tutorials

JavaScript

You May Also Like

  • Handle Zoom and Scroll with the Visual Viewport API in JavaScript
  • Improve Security Posture Using JavaScript Trusted Types
  • Allow Seamless Device Switching Using JavaScript Remote Playback
  • Update Content Proactively with the JavaScript Push API
  • Simplify Tooltip and Dropdown Creation via JavaScript Popover API
  • Improve User Experience Through Performance Metrics in JavaScript
  • Coordinate Workers Using Channel Messaging in JavaScript
  • Exchange Data Between Iframes Using Channel Messaging in JavaScript
  • Manipulating Time Zones in JavaScript Without Libraries
  • Solving Simple Algebraic Equations Using JavaScript Math Functions
  • Emulating Traditional OOP Constructs with JavaScript Classes
  • Smoothing Out User Flows: Focus Management Techniques in JavaScript
  • Creating Dynamic Timers and Counters with JavaScript
  • Implement Old-School Data Fetching Using JavaScript XMLHttpRequest
  • Load Dynamic Content Without Reloading via XMLHttpRequest in JavaScript
  • Manage Error Handling and Timeouts Using XMLHttpRequest in JavaScript
  • Handle XML and JSON Responses via JavaScript XMLHttpRequest
  • Make AJAX Requests with XMLHttpRequest in JavaScript
  • Customize Subtitle Styling Using JavaScript WebVTT Integration