Browse: Home » 2024 » July » Guide to Using Promises and Async/Await in JavaScript and ReactJS

Guide to Using Promises and Async/Await in JavaScript and ReactJS

leoreyesdev July 11, 2024 Respond

This guide provides best practices for using Promises and async/await in JavaScript and ReactJS, including examples of consuming REST APIs and tracking errors. The guide will be structured as follows:

  1. Introduction to Promises
  2. Introduction to async/await
  3. Best Practices
  4. Consuming REST APIs
  5. Error Handling
  6. Practical Examples
  7. Conclusion

1. Introduction to Promises

Promises in JavaScript provide a way to handle asynchronous operations. A Promise represents a value that may be available now, or in the future, or never.

Example

const myPromise = new Promise((resolve, reject) => {
  const success = true;

  if (success) {
    resolve('Operation was successful');
  } else {
    reject('Operation failed');
  }
});

myPromise
  .then((message) => {
    console.log(message);
  })
  .catch((error) => {
    console.error(error);
  });

2. Introduction to async/await

async/await is syntactic sugar built on top of Promises, providing a cleaner and more readable way to write asynchronous code.

Example

const myAsyncFunction = async () => {
  try {
    const message = await myPromise;
    console.log(message);
  } catch (error) {
    console.error(error);
  }
};

myAsyncFunction();

3. Best Practices

Use async/await over Promises for Readability

async/await makes asynchronous code look more like synchronous code, which is easier to read and maintain.

Always Handle Errors

Always use try/catch blocks with async/await to handle errors.

Use Promise.all for Concurrent Operations

When performing multiple asynchronous operations, use Promise.all to run them concurrently.

Example

const fetchData = async () => {
  try {
    const [response1, response2] = await Promise.all([fetch(url1), fetch(url2)]);
    const data1 = await response1.json();
    const data2 = await response2.json();
    return [data1, data2];
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

4. Consuming REST APIs

Using Fetch with Promises

fetch('https://api.example.com/data')
  .then((response) => response.json())
  .then((data) => console.log(data))
  .catch((error) => console.error('Error fetching data:', error));

Using Fetch with async/await

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

5. Error Handling

Handling Errors with Promises

fetch('https://api.example.com/data')
  .then((response) => {
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    return response.json();
  })
  .then((data) => console.log(data))
  .catch((error) => console.error('Error fetching data:', error));

Handling Errors with async/await

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 data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('Error fetching data:', error);
  }
};

fetchData();

6. Practical Examples

Using Promises in React

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

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  useEffect(() => {
    fetch('https://api.example.com/data')
      .then((response) => {
        if (!response.ok) {
          throw new Error('Network response was not ok');
        }
        return response.json();
      })
      .then((data) => setData(data))
      .catch((error) => setError(error.message));
  }, []);

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

  return <div>Data: {data ? JSON.stringify(data) : 'Loading...'}</div>;
};

export default DataComponent;

Using async/await in React

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

const DataComponent = () => {
  const [data, setData] = useState(null);
  const [error, setError] = useState(null);

  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 data = await response.json();
        setData(data);
      } catch (error) {
        setError(error.message);
      }
    };

    fetchData();
  }, []);

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

  return <div>Data: {data ? JSON.stringify(data) : 'Loading...'}</div>;
};

export default DataComponent;

7. Conclusion

Using Promises and async/await in JavaScript and ReactJS allows for handling asynchronous operations more efficiently and with cleaner code. By following best practices and properly handling errors, you can ensure that your applications are robust and maintainable.

, , ,

Post Comment