Skip to content

Latest commit

 

History

History
79 lines (63 loc) · 2.52 KB

asynchronous-javascript.md

File metadata and controls

79 lines (63 loc) · 2.52 KB

⚑ Asynchronous JavaScript:

Asynchronous programming in JavaScript allows tasks to run independent of the main thread execution without disturbing it. This performs operations independent of the main thread execution like fetching data from a server, handling user input, etc.,

It performing time-consuming tasks without freezing the UI.

These operations don't block the main thread and allowing other parts of your code continuously executing while the asynchronous task is in progress.

☴ Overview:

  1. Callbacks
  2. Promises
  3. Async/Await

✦ Callbacks:

Callbacks are functions that are passed as arguments to other function calls. This callbacks are executed at a later or end of the function or typically when an asynchronous operation completes.

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

In this above example,

  • The fetch() function returns a Promise,
  • That promise is then resolved with the response data.
  • The .then() method is used to handle the resolved value.
  • The .catch() method is used to handle potential errors.

✦ Promises:

Promises are objects that represent the eventual completion or failure of an asynchronous operation. They provide a more structured and readable way to handle asynchronous code compared to callbacks.

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

fetchData()
  .then(data => {
    console.log(data);
  })
  .catch(error => {
    console.error('Error:', error);
  });

In this above example,

  • Promises can either be resolved or rejected.
  • The .then() method is used to handle the resolved value.
  • While the .catch() method is used to handle rejection.

✦ Async Await:

Using async and await for Cleaner Asynchronous Code.

  • async: Declares a function as asynchronous.
  • await: Pauses the execution of an async function until a Promise is resolved.
async function fetchData() {
  const data = await fetch('https://api.example.com/data');
  const json = await data.json();
  console.log(json);
}

fetchData();

⇪ To Top

❮ Previous Topic   Next Topic ❯

⌂ Goto Home Page