Scribd
Upload
4 views13 pages

18 Asynchronous Programming

The document explains the differences between synchronous and asynchronous code execution, highlighting that asynchronous code allows tasks to run without blocking others. It covers concepts like callbacks, promises, and async/await, which are used to handle asynchronous operations in JavaScript. Additionally, it introduces CRUD operations and the fetch function for making HTTP requests to servers or APIs.

Uploaded by

paniket123456
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
4 views13 pages

18 Asynchronous Programming

The document explains the differences between synchronous and asynchronous code execution, highlighting that asynchronous code allows tasks to run without blocking others. It covers concepts like callbacks, promises, and async/await, which are used to handle asynchronous operations in JavaScript. Additionally, it introduces CRUD operations and the fetch function for making HTTP requests to servers or APIs.

Uploaded by

paniket123456
Copyright
© © All Rights Reserved
We take content rights seriously. If you suspect this is your content, claim it here.
Available Formats
Download as PDF, TXT or read online on Scribd
You are on page 1/ 13

Callbacks

Callback Hell

Promises

Promises Chaining

Async Await
Synchronous v/s Asynchronous:
❑ Synchronous code runs line by line. Each operation must
complete before the next one starts.

❑ Asynchronous code can start a task and move on without waiting


for it to finish.

❑ Asynchronous code execution allows to execute next instructions


(code) immediately and doesn’t block the flow.
Don’t block the other tasks due to a single lengthy/long task.
Feature Synchronous Asynchronous
Skips long tasks,
Execution Flow Line by line
comes back
Blocking Yes No
Simple tasks, API calls, DB
Use Cases
calculations queries, timers
Why Do We Get a Promise Instead of Data?

You get a Promise — not the real data — because the data isn't ready yet.

API Calls Are Asynchronous


❑ Fetching data takes time (maybe 500ms, 2s, or more).

❑ JavaScript doesn't want to stop everything and wait (it’s single-


threaded).

❑ So instead, it gives you a Promise, saying:

“I'll give you the data later, once it arrives.”


Let’s Build A Project:
fetch
❑ fetch is a built-in JavaScript function used to make HTTP requests (like GET, POST)
to a server or API. (It is like “Hey server, please give me some data!”)

What is CRUD?
❑ CRUD stands for:
o Create
o Read
o Update
o Delete

❑ These are the 4 basic operations we perform on data.


CRUD Operation HTTP Method Purpose
Create POST Add new data
Read GET Get/fetch existing data
Update PUT / PATCH Modify existing data
Delete DELETE Remove existing data
❑ JavaScript is single-threaded. That means it does one thing at a time.

❑ Suppose you want to fetch user data from a server. It takes 2 seconds. If we wait
normally, the whole app freezes. Users can’t click or scroll.

Callbacks

Promises

Async Await
Callbacks:
❑ A Callback is a function passed as an argument to another function

❑ Callbacks help us deal with tasks that take time, like loading data from a server,
without blocking other code from running.
Callback Hell (Pyramid Of Doom):
❑ Callback Hell happens when you have many nested callbacks — one inside
another — usually in asynchronous code.
Promises:
❑ A Promise is a special object in JavaScript that represents a
task that will finish in the future.

❑ resolve and reject are


callbacks provided by
JavaScript.

❑ A promise has 3 states:

• Pending – still waiting


• Resolved (fulfilled) – task completed
• Rejected – something went wrong
async await:
❑ async / await helps you write asynchronous code in a cleaner,
more readable way — almost like it's synchronous.

❑ Code outside the async


function continues
immediately.

❑ Code inside the async


function pauses at await.

❑ async : Makes a function always return a Promise.

❑ await : Pauses inside an `async` function until the Promise is resolved.

You might also like