Async/Await in React - Rishan Solutions

Async/Await is a syntax feature introduced in ES7 (ECMAScript 2017) to handle asynchronous operations in JavaScript more easily and readably. It is built on top of Promises, and it allows you to write asynchronous code in a more synchronous-looking style. In React applications, async and await are commonly used to handle API calls, network requests, and other asynchronous operations.

Here’s how to use async/await effectively in React for fetching data and handling asynchronous operations.

1. Using Async/Await in React for Data Fetching

Basic Setup with Async/Await

In a React component, you can use async functions to handle asynchronous operations such as fetching data from an API. The await keyword is used inside an async function to pause the execution of code until the promise is resolved.

Here’s an example of using async/await with the Fetch API:

import React, { useState, useEffect } from 'react';

const FetchDataWithAsyncAwait = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Use async function inside useEffect to fetch data
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await fetch('https://api.example.com/data');
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        const result = await response.json();
        setData(result);  // Set the data from API
      } catch (err) {
        setError(err.message);  // Set error message if any
      } finally {
        setLoading(false);  // Set loading to false once data is fetched or error occurs
      }
    };

    fetchData();  // Call the async function
  }, []);  // Empty dependency array to run once when component mounts

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      <h1>Fetched Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default FetchDataWithAsyncAwait;

Explanation of the Code:

useState: The state is managed for data (data), loading state (loading), and error message (error).
useEffect: The async function fetchData is called inside the useEffect hook, which makes the API request when the component mounts.
await: The await keyword waits for the promise to resolve from the fetch call and the response.json() call.
try/catch: Error handling is done using try/catch blocks to catch any errors during the fetch operation.
finally: The finally block ensures that the loading state is set to false whether the API call succeeds or fails.

2. Using Async/Await with Axios in React

Axios is another popular library for making HTTP requests, and it also supports async/await. It provides additional features over fetch, like request/response interceptors, automatic JSON parsing, and better error handling.

Here’s how you can use async/await with Axios:

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FetchDataWithAxiosAsyncAwait = () => {
  const [data, setData] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  // Use async function inside useEffect to fetch data with Axios
  useEffect(() => {
    const fetchData = async () => {
      try {
        const response = await axios.get('https://api.example.com/data');
        setData(response.data);  // Set data from response
      } catch (err) {
        setError(err.message);  // Set error message if any
      } finally {
        setLoading(false);  // Set loading to false once data is fetched or error occurs
      }
    };

    fetchData();  // Call the async function
  }, []);  // Empty dependency array to run once when component mounts

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      <h1>Fetched Data:</h1>
      <pre>{JSON.stringify(data, null, 2)}</pre>
    </div>
  );
};

export default FetchDataWithAxiosAsyncAwait;

Key Differences with Fetch API:

With Axios, you don’t need to manually parse the JSON response as it’s done automatically.
Axios provides additional functionalities such as request cancellation, interceptors, and automatic transformation of response data.

3. Handling Multiple API Requests with Async/Await

You may often need to perform multiple API requests at once, and async/await makes handling multiple requests very simple. For example, fetching data from two different endpoints simultaneously can be done using Promise.all():

import React, { useState, useEffect } from 'react';
import axios from 'axios';

const FetchMultipleData = () => {
  const [data1, setData1] = useState(null);
  const [data2, setData2] = useState(null);
  const [loading, setLoading] = useState(true);
  const [error, setError] = useState(null);

  useEffect(() => {
    const fetchData = async () => {
      try {
        // Using Promise.all to fetch multiple requests concurrently
        const [response1, response2] = await Promise.all([
          axios.get('https://api.example.com/data1'),
          axios.get('https://api.example.com/data2'),
        ]);
        setData1(response1.data);
        setData2(response2.data);
      } catch (err) {
        setError(err.message);
      } finally {
        setLoading(false);
      }
    };

    fetchData();
  }, []);

  if (loading) {
    return <p>Loading...</p>;
  }

  if (error) {
    return <p>Error: {error}</p>;
  }

  return (
    <div>
      <h1>Data 1:</h1>
      <pre>{JSON.stringify(data1, null, 2)}</pre>
      <h1>Data 2:</h1>
      <pre>{JSON.stringify(data2, null, 2)}</pre>
    </div>
  );
};

export default FetchMultipleData;

Explanation:

Promise.all(): This method takes an array of promises and resolves them all concurrently. The responses are returned as an array, which you can destructure to get each response individually.
This method is efficient when you need to make multiple requests that don’t depend on each other.

4. Error Handling with Async/Await

When using async/await, error handling becomes easier with try/catch blocks. This structure allows you to handle errors in a much cleaner and more organized manner than using .then() and .catch().

Here’s an example with enhanced error handling:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const result = await response.json();
    setData(result);
  } catch (error) {
    if (error instanceof SyntaxError) {
      setError('Invalid JSON format.');
    } else if (error.message.includes('Network')) {
      setError('Network issue, please try again later.');
    } else {
      setError('An unexpected error occurred.');
    }
  } finally {
    setLoading(false);
  }
};

Key Points for Error Handling:

Always check if the response is valid (response.ok) to avoid parsing errors.
Handle different types of errors (e.g., network errors, invalid JSON, etc.) in specific ways.
Use finally to ensure that loading is set to false, even if an error occurs.