Asynchronous JavaScript: Callbacks, Promises & Async/Await

Asynchronous programming in JavaScript allows you to perform long-running operations without blocking the main thread, ensuring your applications remain responsive. This guide covers the key concepts and techniques for handling asynchronous operations, including setTimeout, setInterval, callbacks, promises, and async/await. We'll also dive into working with APIs using XMLHttpRequest and the Fetch API.

Asynchronous JavaScript

setTimeout

The setTimeout function executes a function after a specified delay.

Syntax:

setTimeout(function, delay, ...args)

function: The function to execute.
delay: Time in milliseconds before the function is executed.
args: Additional arguments to pass to the function.

Example:

setTimeout(() => {
  console.log('Hello after 2 seconds');
}, 2000);

Example with arguments:

setTimeout((message) => {
  console.log(message);
}, 2000, 'Hello after 2 seconds');

setInterval

The setInterval function repeatedly executes a function at specified intervals.

Syntax:

setInterval(function, interval, ...args)

function: The function to execute.
interval: Time in milliseconds between each execution.
args: Additional arguments to pass to the function.

Example:

setInterval(() => {
  console.log('Hello every 2 seconds');
}, 2000);

Example with arguments:

setInterval((message) => {
  console.log(message);
}, 2000, 'Hello every 2 seconds');

Clearing Timers

To stop a setTimeout or setInterval, use clearTimeout or clearInterval.

Example:

const timeoutId = setTimeout(() => {
  console.log('This will not run');
}, 2000);

clearTimeout(timeoutId);

const intervalId = setInterval(() => {
  console.log('This will not run');
}, 2000);

clearInterval(intervalId);

Example with named function:

function greet() {
  console.log('This will not run');
}

const timeoutId = setTimeout(greet, 2000);
clearTimeout(timeoutId);

const intervalId = setInterval(greet, 2000);
clearInterval(intervalId);

Callbacks

Callbacks are functions passed as arguments to other functions and executed after some operation completes.

Example:

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 2000);
}

fetchData(data => {
  console.log(data); // "Data fetched" after 2 seconds
});

Example with error handling

function fetchData(callback) {
  setTimeout(() => {
    if (Math.random() < 0.5) {
      callback(null, 'Data fetched');
    } else {
      callback('Error fetching data', null);
    }
  }, 2000);
}

fetchData((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data); // "Data fetched" after 2 seconds
  }
});

Callback Hell

Callback hell occurs when callbacks are nested within other callbacks, making the code hard to read and maintain.

Example:

fetchData(data1 => {
  console.log(data1);
  fetchData(data2 => {
    console.log(data2);
    fetchData(data3 => {
      console.log(data3);
      // And so on...
    });
  });
});

Sheridan IMM on X: "Compare to the Callback Hell, promise and async/await would save you much more time while working with asynchronous code. Follow us on Sheridan IMM for more interesting coding

Promises

Promises provide a cleaner way to handle asynchronous operations, avoiding callback hell.

Syntax:

const promise = new Promise((resolve, reject) => {
  // Asynchronous operation
});

Example:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
};

fetchData()
  .then(data => {
    console.log(data); // "Data fetched" after 2 seconds
  })
  .catch(error => {
    console.error(error);
  });

Example with both resolve and reject

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve('Data fetched');
      } else {
        reject('Error fetching data');
      }
    }, 2000);
  });
};

fetchData()
  .then(data => {
    console.log(data); // "Data fetched" after 2 seconds
  })
  .catch(error => {
    console.error(error); // "Error fetching data"
  });

Chaining Promises

You can chain promises to handle multiple asynchronous operations in sequence.

Example:

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 1 fetched');
    }, 1000);
  });
};

const fetchData2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 2 fetched');
    }, 1000);
  });
};

fetchData1()
  .then(data1 => {
    console.log(data1);
    return fetchData2();
  })
  .then(data2 => {
    console.log(data2);
  })
  .catch(error => {
    console.error(error);
  });

async/await

async/await provides a syntax for writing asynchronous code in a synchronous style, making it easier to read and maintain.

Example:

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 2000);
  });
};

const getData = async () => {
  try {
    const data = await fetchData();
    console.log(data); // "Data fetched" after 2 seconds
  } catch (error) {
    console.error(error);
  }
};

getData();

Example with both resolve and reject

const fetchData = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      if (Math.random() < 0.5) {
        resolve('Data fetched');
      } else {
        reject('Error fetching data');
      }
    }, 2000);
  });
};

const getData = async () => {
  try {
    const data = await fetchData();
    console.log(data); // "Data fetched" after 2 seconds
  } catch (error) {
    console.error(error); // "Error fetching data"
  }
};

getData();

Handling Multiple Promises

Using Promise.all, you can handle multiple promises in parallel.

Example:

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 1 fetched');
    }, 1000);
  });
};

const fetchData2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 2 fetched');
    }, 1000);
  });
};

const getData = async () => {
  try {
    const results = await Promise.all([fetchData1(), fetchData2()]);
    console.log(results); // ["Data 1 fetched", "Data 2 fetched"]
  } catch (error) {
    console.error(error);
  }
};

getData();

Using `Promise.race`

Promise.race returns the first promise that settles (either resolves or rejects).

Example:

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 1 fetched');
    }, 1000);
  });
};

const fetchData2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 2 fetched');
    }, 500);
  });
};

Promise.race([fetchData1(), fetchData2()])
  .then(data => {
    console.log(data); // "Data 2 fetched" after 500 ms
  })
  .catch(error => {
    console.error(error);
  });

Using `Promise.allSettled`

Promise.allSettled returns a promise that resolves after all of the given promises have either resolved or rejected.

Example:

const fetchData1 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data 1 fetched');
    }, 1000);
  });
};

const fetchData2 = () => {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      reject('Error fetching data 2');
    }, 500);
  });
};

Promise.allSettled([fetchData1(), fetchData2()])
  .then(results => {
    results.forEach((result) => {
      if (result.status === 'fulfilled') {
        console.log(result.value);
      } else {
        console.error(result.reason);
      }
    });
  });

Working with APIs

APIs (Application Programming Interfaces) allow you to interact with external services or data sources. There are several ways to make HTTP requests in JavaScript.

XMLHttpRequest

XMLHttpRequest is an older way to make HTTP requests.

It provides a way to interact with servers using a browser's built-in XMLHttpRequest object.

Example:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status === 200) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed');
  }
};
xhr.send();

Example with error handling:

const xhr = new XMLHttpRequest();
xhr.open('GET', 'https://api.example.com/data', true);
xhr.onload = function() {
  if (xhr.status >= 200 && xhr.status < 300) {
    console.log(xhr.responseText);
  } else {
    console.error('Request failed with status', xhr.status);
  }
};
xhr.onerror = function() {
  console.error('Network error');
};
xhr.send();

Fetch

The Fetch API provides a modern way to make HTTP requests. It returns promises, making it easier to handle asynchronous operations.

Example:

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('There has been a problem with your fetch operation:', error);
  });

Example with different HTTP methods:

// GET request
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('There has been a problem with your fetch operation:', error);
  });

// POST request
fetch('https://api.example.com/data', {
  method: 'POST',
  headers: {
    'Content-Type': 'application/json',
  },
  body: JSON.stringify({ key: 'value' }),
})
  .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('There has been a problem with your fetch operation:', error);
  });

Using async/await with Fetch

Example:

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('There has been a problem with your fetch operation:', error);
  }
};

fetchData();

10 JavaScript Memes To Lighten Up Your Day - JavaScript in Plain English

Handling Errors

When making HTTP requests, it's important to handle errors gracefully.

Example with Fetch:

const fetchData = async () => {
  try {
    const response = await fetch('https://api.example.com/data');
    if (!response.ok) {
      throw new Error(`HTTP error! Status: ${response.status}`);
    }
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
};

fetchData();

Sending Data

You can send data using the Fetch API by specifying the request method and providing the data in the request body.

Example:

const sendData = async (data) => {
  try {
    const response = await fetch('https://api.example.com/data', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json',
      },
      body: JSON.stringify(data),
    });
    if (!response.ok) {
      throw new Error('Network response was not ok');
    }
    const result = await response.json();
    console.log(result);
  } catch (error) {
    console.error('There has been a problem with your fetch operation:', error);
  }
};

sendData({ key: 'value' });

Conclusion

Asynchronous JavaScript is essential for building responsive and efficient applications. This guide has covered various techniques, including setTimeout, setInterval, callbacks, promises, and async/await. Additionally, we explored working with APIs using XMLHttpRequest and the Fetch API. Understanding these concepts and how to handle asynchronous operations effectively will help you write better JavaScript code and build more dynamic web applications. By mastering these topics, you'll be well-equipped to handle the complexities of modern JavaScript development.

In the next article, we'll dive deeper into some advanced JavaScript concepts, such as Iterators and Generators, Classes, and Modules. These topics will further enhance your understanding of JavaScript and enable you to write cleaner, more efficient code. Stay tuned for an in-depth exploration of these powerful features!

Mastering JavaScript: Async JS & Browser APIs

Comments

Mastering JavaScript: A Comprehensive Guide

Mastering JavaScript: Iterators, Generators, Classes & Modules

More from this blog

Mastering JavaScript: Chrome Dev Tools

Mastering JavaScript: Memory Management

Mastering JavaScript: Iterators, Generators, Classes & Modules

Mastering JavaScript: Using This Keyword

Asynchronous JavaScript

setTimeout

setInterval

Clearing Timers

Callbacks

Example with error handling

Callback Hell

Promises

Example with both resolve and reject

Chaining Promises

async/await

Example with both resolve and reject

Handling Multiple Promises

Using `Promise.race`

Using `Promise.allSettled`

Working with APIs

XMLHttpRequest

Fetch

Using async/await with Fetch

Handling Errors

Sending Data

Conclusion

Command Palette

Comments

Mastering JavaScript: A Comprehensive Guide

Mastering JavaScript: Iterators, Generators, Classes & Modules

More from this blog

Asynchronous JavaScript

setTimeout

setInterval

Clearing Timers

Callbacks

Example with error handling

Callback Hell

Promises

Example with both resolve and reject

Chaining Promises

async/await

Example with both resolve and reject

Handling Multiple Promises

Using Promise.race

Using Promise.allSettled

Working with APIs

XMLHttpRequest

Fetch

Using async/await with Fetch

Handling Errors

Sending Data

Conclusion

Using `Promise.race`

Using `Promise.allSettled`