DEV Community: Shivam Sahu

Async/Await : Zero to Hero 🚀

Shivam Sahu — Wed, 16 Apr 2025 13:27:34 +0000

Why async/await in Angular ? 🤔

In Angular, many tasks, like fetching data from a server, can take time.
Normally, we use .subscribe() for handling these tasks, but it can get messy when we have to chain many steps or make the code look messy.

this.apiService.getData().subscribe(response => {
  console.log('First API Response:', response);

  this.apiService.getMoreData(response.id).subscribe(moreResponse => {
    console.log('Second API Response:', moreResponse);

    this.apiService.getDetails(moreResponse.detailId).subscribe(detailResponse => {
      console.log('Third API Response:', detailResponse);
    });
  });
});

That's where async and await come in! They help us handle these tasks in a much cleaner, easier-to-read way.

import { firstValueFrom } from 'rxjs';

async fetchData() {
  try {
    const response = await firstValueFrom(this.apiService.getData());
    console.log('First API Response:', response);

    const moreResponse = await firstValueFrom(this.apiService.getMoreData(response.id));
    console.log('Second API Response:', moreResponse);

    const detailResponse = await firstValueFrom(this.apiService.getDetails(moreResponse.detailId));
    console.log('Third API Response:', detailResponse);
  } catch (error) {
    console.error('Error occurred:', error);
  }
}

With async/await, the code runs one step at a time without getting messy. It’s easy to read, easy to fix if something goes wrong, and you can catch all errors in one place. Even though it works in the background, the code looks simple and clean.

What is async/await in Angular ? 📚

async is a keyword that we put in front of a function to tell it,

'Hey, this function is going to handle something that takes time.'

And await is used inside that function to wait for something to finish before moving to the next line of code.

async getData() {
  const result = await this.http.get('https://api.example.com/users').toPromise();
  console.log(result);
}

Here, await tells Angular to wait for the data before moving forward.

Without await, the code would keep running without waiting for the response, which might cause issues.

How to use async/await in Angular ? 🔧

Step 1: Add async to your function.

async ngOnInit() {
  // your code here
}

Step 2: Use await inside the function to wait for something.

async ngOnInit() {
  const data = await this.http.get('/api/data').toPromise();
  console.log(data);
}

Step 3: If you’re using HttpClient, make sure to convert the Observable to a Promise (use .toPromise() or firstValueFrom()).

import { firstValueFrom } from 'rxjs';

async getData() {
  const data = await firstValueFrom(this.http.get('/api/data'));
  console.log(data);
}

Real-world example ? 🌍

A practical use of async/await is in dependent dropdowns. For example, when a user selects a country, we need to fetch the states related to that country from the server.

Using async/await, we can wait for the states to load first, and only then populate the next dropdown, ensuring a smooth user experience without race conditions.

async onCountryChange(countryId: number) {
  this.states = await this.locationService.getStatesByCountry(countryId);
}

Avoid mistakes when using async/await ? ⚠️

❌ Don't use await outside an async function.

ngOnInit() {
  const user = await this.userService.getUser(); // ❌ Error: 'await' is only valid in async functions
  console.log(user);
}

✅ Correct: Mark the function async

async ngOnInit() {
  const user = await this.userService.getUser(); 
  console.log(user);
}

❌ Don't mix await with subscribe() from RxJS. Use firstValueFrom() to convert Observables.

async fetchData() {
  const data = await this.apiService.getData().subscribe(response => {
    console.log(response);
  });
}

✅ Correct: Use firstValueFrom()

import { firstValueFrom } from 'rxjs';

async getData() {
  const data = await firstValueFrom(this.apiService.getData());
  console.log(data);
}

❌ Avoid unhandled try/catch. Always catch errors.

async fetchData() {
  const data = await firstValueFrom(this.apiService.getData());
  console.log(data); // ❌ If API fails, app crashes without handling error
}

✅ Correct: With try/catch (proper error handling)

async fetchData() {
  try {
    const data = await firstValueFrom(this.apiService.getData());
    console.log(data);
  } catch (error) {
    console.error('Failed to fetch data:', error); // ✅ Graceful error handling
  }
}

❌ Avoid using too many sequential await calls if they can be parallelized (performance hit).

async loadDashboard() {
  const profile = await firstValueFrom(this.apiService.getProfile());
  const notifications = await firstValueFrom(this.apiService.getNotifications());
  const messages = await firstValueFrom(this.apiService.getMessages());

  console.log(profile, notifications, messages);
}

✅ Correct: Parallel await calls using Promise.all() (better performance)

async loadDashboard() {
  const [profile, notifications, messages] = await Promise.all([
    firstValueFrom(this.apiService.getProfile()),
    firstValueFrom(this.apiService.getNotifications()),
    firstValueFrom(this.apiService.getMessages())
  ]);

  console.log(profile, notifications, messages);
}

Most asked interview question on async/await ? 🎯

🔹 Basic Questions
1️⃣ What is async/await in JavaScript/TypeScript?
👉 Async/await is syntax to handle promises in a cleaner and more readable way, making asynchronous code behave like synchronous code.

2️⃣ Why do we use async/await instead of .then()?
👉 Async/await avoids nested .then() chains and makes error handling with try-catch much simpler.

3️⃣ What does the async keyword do?
👉 It marks a function to always return a promise, even if it returns a simple value.

4️⃣ What does the await keyword do?
👉 It pauses the function execution until the awaited promise is resolved or rejected.

🔹 Angular-Specific Questions
5️⃣ Where would you typically use async/await inside an Angular application?
👉 In services while calling APIs, in component lifecycle methods (like ngOnInit), and during sequential operations like login ➡️ fetch profile ➡️ load dashboard.

6️⃣ Can we use async/await with HttpClient in Angular?
👉 Yes, but since HttpClient returns Observables, we often convert them to promises using .toPromise() (deprecated) or firstValueFrom() before using await.

7️⃣ Can we use async/await inside Angular services?
👉 Absolutely, services are a common place to write reusable async functions.

🔹 Practical Scenario-Based Questions
8️⃣ How would you handle multiple API calls using async/await?
👉 Either:

Wait one after another (sequentially)

Or use Promise.all() if APIs are independent and can run in parallel.

9️⃣ What happens if a promise fails inside an async function?
👉 It throws an exception, which we should catch using a try-catch block.

🔟 Can we use async/await inside Angular interceptors?
👉 Yes, interceptors can be async if you return a promise that eventually resolves to an HTTP response.

🔹 Slightly Advanced Questions
1️⃣1️⃣ What are the drawbacks of async/await?
👉

You cannot run operations in parallel easily without Promise.all().

If many awaits happen sequentially, it can slow down performance.

Error handling can become tricky if you await multiple things without a proper structure.

1️⃣2️⃣ Can you combine async/await and Observables?
👉 Yes!
We usually convert Observables to Promises if we want to use async/await.
Example:

typescript
Copy
Edit
await firstValueFrom(this.api.getData());
🔹 Bonus: Real-Life Use Case Questions
1️⃣3️⃣ Give one real-world example where async/await helped improve user experience in your project.
👉 Example:

Dependent dropdowns (country → states)

File upload before navigation

Token refresh before API calls

1️⃣4️⃣ How would you handle an API retry if the awaited call fails?
👉 Inside catch block, you can retry the call manually, or use retry strategies with services.

angular inspiration yt channel

Shivam Sahu — Mon, 20 Jan 2025 05:50:56 +0000

https://www.youtube.com/watch?v=edR6Az7shv8&t=371s

project through chatgpt

Shivam Sahu — Sun, 17 Nov 2024 15:18:45 +0000

https://chatgpt.com/c/673b5b4a-6ca8-8007-98c2-135f3491d347

async await hindi script

Shivam Sahu — Wed, 13 Nov 2024 05:19:00 +0000

https://chatgpt.com/c/67335967-dc14-8007-8301-240c33f8c007

[Opening Scene]
[Background Music] [Camera on Host]

Host:
आज हम बात करेंगे TypeScript में async/await के बारे में।
aaj ham एक aise tool k baare mai discuss krenge जो आपकी asynchronous programming की saari problem ka solution nikal सकता है! 🚀 अगर आप callback hell से बाहर निकलना चाहते हैं या अपने promises को बेहतर तरीके से हैंडल करना चाहते हैं, ya अपने कोड को ज्यादा readable और maintainable बनाना चाहते हैं, तो ये वीडियो आपके लिए है। इस वीडियो में हम async/await के हर scenario को detail mai समझेंगे, और साथ mai real-world examples भी discuss krenge। तो चलिए, शुरू करते हैं!

[Scene 1: Synchronous vs Asynchronous code]

pahle ham baat krte hai synchronous and asynchronous code kaam kaise krte hai. dosto yah bahut important point hai isko dhyan se samjhna.

console.log("Start");
console.log("Processing...");
console.log("End");

Output comes in a sequence: "Start", "Processing...", "End".

aap screen mai dekh sakte hai yah ak synchronous code hai.
dosto synchronous code line by line execute hote hai.

यहां हम देख सकते हैं, पहले 'Start' print होगा, फिर 'Processing...' और last में 'End'. इस तरह, एक line दूसरे line के बाद ही execute hoti है।

console.log("Start");

setTimeout(() => {
console.log("Processing...");
}, 2000);

console.log("End");

Output is: "Start", "End", "Processing..." (after 2 seconds).

Ab hamne dosto sychronous code ko asynchronous code mai convert kiya hai aap asynchronous code screen per dekh sakte hai.

तो dekhiye dosto yah per 'End' पहले print hoga और phir 'Processing...' दो सेकंड बाद आता है। इसका मतलब setTimeout function ने एक टाइमर सेट किया और बाकी के code को block नहीं किया।"

इससे हमें ये yah समझ में आता है कि asynchronous code का फायदा यह है कि यह लंबे समय तक चलने वाली operations like api calls को handle कर सकता है bina baaki code part ko block kiye.

इस asynchronous behavior को manage करने के लिए promises or async/await का use किया जाता है।

[Screen shows: Synchronous vs Asynchronous code]

[Scene 2: Promises ?]

ham aage badne se pahle promise k baare mai jaan lete hai
toh dosto Promise एक ऐसा object है जो asynchronous operations के लिए result provide करता है Ab yah result 3 states mai ho sakte hai 1st state Pending (Initial State) 2nd state Fulfilled (Success) 3rd state Rejected (Failure).

Ab ham in state k baare mai samjh lete hai

pending or initial state means jab ham promise create krte hai tab uski initial state pending hoti hai and yah ae show krta hai ki asynchronous operation पूरा नहीं हुआ है

Fulfilled (Success) means अगर asynchronous operation successfully complete हो गया, तो Promise 'Fulfilled' state में चला जाता है। इस case में एक value या result मिलता है

Rejected (Failure) means अगर asynchronous operation fail हो गया, तो Promise 'Rejected' state में चला जाता है। इस case में हमें error मिलता है

How to create promise ?

ab ham example k sath samjhte hai promise create kaise krte hai

promise
.then((result) => console.log(result)) // Fulfilled case
.catch((error) => console.log(error)); // Rejected case

इस code में हमने एक Promise बनाया। अगर success true है, तो resolve call होगा और message print होगा: 'Operation Successful'।
लेकिन अगर operation fail हो गया, तो reject call होगा और हमें error मिलेगा: 'Operation Failed'।

फिर हमने .then और .catch का use करके promise के result को handle किया।

ab ham aage badne se pahle asynchronous operation hote kya hai un per discuss kr lete hai

Asynchronous operations वो operations होते हैं जो background में चलती हैं, और main program execution को block किए बिना अपना काम पूरा करती हैं। जब ये operations complete हो जाती हैं, तो हमें result provide करती हैं

like -

Fetch data from an API. (asynchronous operation)
Process the fetched data.(asynchronous operation)
Save the processed data.(asynchronous operation)

How to Handle multiple asynchronous operation ?

Now, imagine you have a sequence of operations where each operation depends on the result of the previous one:

Fetch data from an API. (asynchronous operation)
Process the fetched data.(asynchronous operation)
Save the processed data.(asynchronous operation)

yah per har ak asynchronous operation dependent hai doosre asynchronous operation per.

Ab hamare paas teen tarike hai asynchronous operation ko handle krne k liye aur ham aage janenge kause best tarika hai

Using Callback
Using Promise
Using async/await

ab ham aage badne se pahle callback kya hota hai samjh lete hai
dosto -
callback ek aise function ko kehte hain jo kisi doosre function ko argument ke form mein diya jaata hai, aur jab zarurat padti hai tab wo function usse call karta hai
example -

function doSomething(callback: () => void) {
  console.log("Doing something...");
  callback(); // Call the callback
}

function onDone() {
  console.log("Done!");
}

// Use the function with a callback
doSomething(onDone);

Iska matlab hai ki ek function ke andar doosra function "wapas bulane" (call back karne) ke liye diya jaata hai. Callback ka use zyada tar asynchronous operations (jaise ki data fetch karna, file read karna, etc.) ke liye kiya jaata hai.

fetchData(data1, (result1) => {
  processData(result1, (result2) => {
    saveData(result2, (result3) => {
      console.log(result3);
    });
  });
});

aap screen per code dekh sakte hai yah per teen asynchronous operation ho rahe hai -
fetch data()
processData()
savedData()

aur yah teeno operation ak doosre per dependent hai means jab ham fetch karenge data api se uske baad he ham usko process kar sakte hai and process krne ke baad he ham usko save kr sakt hai.

lkin dosto jab aap is code k structure ko dekhte hai to yah ak complex structure hai like a tree and isi structure ko ham call back hell kehte hai जहां readability और maintainability काफी मुश्किल हो जाती है

ab dosto iss code ko promise chains mai convert krte hai to aap dekh sakte hai code screen per

fetchData()
  .then(result1 => processData(result1))
  .then(result2 => saveData(result2))
  .then(result3 => {
    console.log(result3);
  })
  .catch(error => {
    console.error(error);
  });

ydi aap iss code ko callback hell code se compare krenge to aap observe krenge ki yah per ham then function ka use kr rhe hai jo code ki readability improve kr rha hai compared to callback but not fully and also error handling abhee bhee muskil hai handle krna.

to chaliye ab ham jante hai 100% code radability and mainainabilty and proper error handling kaise achieve kr sakte hai -

[Scene 3: What is async/await?]
Host:
"अब आते हैं async/await पर। async/await JavaScript और TypeScript का syntax है, जो asynchronous code को synchronous जैसे दिखाता है। यह Promise-based operations को ज्यादा readable और clean बना देता है।"

[Screen shows: Simple async/await example]

Host:
"आप देख सकते हैं, async function में हम await का use करते हैं जिससे code sequentially execute होता है जैसे कि हम synchronous code लिख रहे हों।"

[Scene 4: The async Keyword]
Host:
"चलिये अब बात करते हैं async keyword के बारे में। जब हम किसी function के सामने async लगाते हैं, तो वो function automatically एक Promise return करता है। इसका मतलब अगर आप कोई value return करेंगे, तो वो value Promise के अंदर encapsulate हो जाएगी।"

[Screen shows: Async function example]

Host:
"आप देख सकते हैं, यहां एक async function है, जो एक Promise return कर रहा है, भले ही हमने explicitly Promise नहीं लिखा।"

[Scene 5: The await Keyword]
Host:
"अब await keyword की बात करते हैं। await का use हम तब करते हैं जब हम चाहते हैं कि हमारा code एक asynchronous operation के result का इंतजार करे।"

[Screen shows: Await example with setTimeout]

Host:
"आप देख सकते हैं, await किसी Promise के resolve होने तक code को pause कर देता है, और जैसे ही result मिलता है, execution आगे बढ़ता है।"

[Scene 6: Error Handling with async/await]
Host:
"अच्छा, अब बात करते हैं error handling की। जब हम asynchronous operations करते हैं, तो हमें errors handle करने के लिए proper strategies adopt करनी पड़ती हैं।"

[Screen shows: Try/catch with async/await example]

Host:
"यहां try/catch block का use करके हम errors को easily handle कर सकते हैं। अगर कोई error आए, तो catch block उसे पकड़ लेता है।"

[Scene 7: Chaining async/await]
Host:
"अब बात करते हैं chaining की। अगर हमें multiple async operations को execute करना हो, तो हम उन्हें await के साथ चेन कर सकते हैं।"

[Screen shows: Multiple async/await functions]

Host:
"यहां हमने तीन async functions को sequentially execute किया है, जिससे हम एक के बाद एक operations handle कर सकते हैं।"

[Scene 8: Returning Values from async Functions]
Host:
"जब हम async function से कोई value return करते हैं, तो वो value एक Promise के अंदर wrapped होती है।"

[Screen shows: Return value from async function]

Host:
"अगर हम किसी async function से कोई string return करते हैं, तो वो Promise string return करता है। इसका मतलब आपको हमेशा .then() या await के साथ उस result को access करना होगा।"

[Scene 9: Parallel Execution with async/await]
Host:
"कभी-कभी हमें multiple asynchronous tasks parallelly execute करने होते हैं। इसके लिए हम Promise.all() का use करते हैं।"

[Screen shows: Example using Promise.all]

Host:
"यहां हम तीन अलग-अलग API calls को parallelly execute कर रहे हैं, ताकि वे एक साथ execute हो सकें और time saving हो सके।"

[Scene 10: Working with TypeScript Types]**
Host:
"अब बात करते हैं TypeScript में async/await को type safe बनाने की। TypeScript में हम async functions के return types को type करके उन्हें ज्यादा readable और maintainable बना सकते हैं।"

[Screen shows: Typing async function example]

Host:
"यहां हम return type को Promise के रूप में define कर रहे हैं, जिससे कि हमें पता चले कि async function number type का value return करेगा।"

[Scene 11: Common Mistakes with async/await]
Host:
"अब हम कुछ common mistakes के बारे में बात करते हैं। सबसे बड़ी गलती होती है await का use न करना।"

[Screen shows: Mistake example: forgot to await]

Host:
"यहां हमने await का use नहीं किया, और result सही से return नहीं हो रहा। हमेशा await का use करें जब आपको asynchronous operations का result चाहिए।"

[Scene 12: Real-world Use Cases]
Host:
"अब हम कुछ real-world examples देखेंगे। मान लीजिए हमें किसी API से डेटा fetch करना है।"

[Screen shows: API fetch example with async/await]

Host:
"यहां हम एक API से data fetch कर रहे हैं और उसे render करने के लिए async/await का use कर रहे हैं।"

[Scene 13: Async Iterators and for await...of]
Host:
"अगर हमें एक asynchronous iterable के ऊपर iterate करना हो, तो हम for await...of loop का use कर सकते हैं।"

[Screen shows: Async iterators example]

Host:
"यहां हम for await...of का use करके एक asynchronous collection को loop कर रहे हैं।"

[Scene 14: Unit Testing with async/await]
Host:
"अगर हम async functions का unit test करना चाहते हैं, तो Jasmine या Jest जैसी testing libraries में async/await का use कर सकते हैं।"

[Screen shows: Testing async function in Jasmine]

Host:
"यहां हम async function को test कर रहे हैं, और await का use करके हम expected result compare कर रहे हैं।"

[Scene 15: Conclusion and Best Practices]
Host:
"तो दोस्तों, इस वीडियो में हमने async/await के बारे में बहुत कुछ सीखा। हमने देखा कि कैसे async/await asynchronous code को synchronous जैसा बना देता है, और इसे readable और maintainable बनाता है।"

[Screen shows: Key takeaways]

Host:
"सबसे important बात यह है कि हमें हमेशा await का सही use करना चाहिए, और error handling के लिए try/catch blocks का use करना चाहिए।"

Host:
"अगर आपको ये वीडियो पसंद आया हो, तो please like करें, subscribe करें और bell icon दबाएं ताकि आपको हमारी नई videos की notifications मिलती रहें। धन्यवाद!"

[Closing Scene]
[Background Music fades out]

hindi angular script

Shivam Sahu — Sat, 09 Nov 2024 06:54:58 +0000

Start -------->

Hi friends welcome back to target developers आज का टॉपिक है -

Why Async Await in javascript/typescript ?

toh aaj ke video mai cover krenge -

synchronous and asynchronous mai difference आखिर है क्या ?
Promise आखिर है क्या ?
Async Await की एंट्री ?
understand with code ?
error handling ?
Understand with story ?
Real world application ?

वीडियो को आखिर तक देखिएगा, क्योंकि last में मैं एक ऐसा example दूंगा जिससे aapka

sara confusion दूर हो jayga।

Toh chaliye shuru krte hai

भाग 1: synchronous और asynchronous का difference

सबसे पहले समझते हैं सिंक्रोनस और असिंक्रोनस का मतलब ?

suppose kriye, आपने अपने friend को कॉल किया और जब तक वो कॉल पिक नहीं करता, आप बस फोन पर इंतजार करते रहते हैं। ये हुआ synchronous तरीका।

scenario 2
अब, अगर आप अपने friend को कॉल करते हैं और जवाब आने तक दूसरे काम करने लगते हैं, ये है asynchronous तरीका।

प्रोग्रामिंग में भी ऐसा ही होता है।

synchronous में, कोड एक के बाद एक चलता है। लेकिन अगर कोई काम ज्यादा समय ले रहा है, तो पूरा प्रोग्राम वहीं रुक जाता है।

वहीं, asynchronous में प्रोग्राम आगे बढ़ता रहता है, बिना रुके।

यही कारण है कि Async Await इतना जरूरी है।

भाग 2: प्रॉमिस (Promise) क्या है?

अब सवाल आता है कि Async Await कैसे काम करता है?

इसके लिए हमें पहले समझना होगा Promise ?

Promise एक वादा है।

जैसे मान लीजिए, आप friend से कहते हैं कि वो शाम को पिज्जा लेकर आएगा।

अब friend तीन चीजें कर सकता है:

friend पिज्जा लेकर आएगा - Promise Resolved।

friend कहेगा कि पिज्जा नहीं ला सकता - Promise Rejected।

or friend अभी कुछ न बोले, आप इंतजार करें - Pending।

Promise का यही रोल होता है कोड में। ये बताता है कि कोई काम होगा, और उसके बाद हमें एक result मिलेगा।

भाग 3: Async Await की entry

अब आता है असली hero, Async Await।

अगर प्रॉमिस वादा करता है, तो Await उस वादे का result आने तक इंतजार करता है,

और Async ये Ensure करता है कि प्रोग्राम रुके नहीं। इसका मतलब, आप इंतजार भी करेंगे और दूसरे काम भी बिना किसी रुकावट के चलते रहेंगे।

भाग 4: code example से समझते हैं

चलो, इसे एक code example से समझते हैं।

suppose kriye ki हमें एक सर्वर से डेटा लाना है।

aap code dekh sakte hai ki humne ynha per ak getdata function
banaya and uske ander fetchdatafromserver function call kiya hai
and fetchdatafromserver function ka kaam hai api call krna.
And hum final result data variable mai hold kr rhe hai.

Phir next line mai data ko console kra rhe hai.

function getData() {
let data = fetchDataFromServer();
console.log(data); //object promise object
}

to dosto yah ak synchronous code hai kyuki yaha fetchDataFromServer function ko synchronous तरीके से कॉल किया गया है means without await.

यदि fetchDataFromServer एक प्रॉमिस रिटर्न करता है तो यह Promise का ऑब्जेक्ट लौटाएगा, न कि actual डेटा ।

app jab console.log krenge to aapko Promise का ऑब्जेक्ट print hoga.

ydi fetchDataFromServer function server se data lane mai slow hai
to apka poora code code crash hojayga or stop hojayga.

लेकिन अगर हम इसे Async Await के साथ लिखें -

async function getData() {
let data = await fetchDataFromServer();
console.log(data); // print actual data from api
}
to dosto yah ak asynchronous code hai kyuki yaha fetchDataFromServer function ko asynchronous तरीके से कॉल किया गया है means with await.

async function को यह बताता है कि यह एक asynchronous process को संभाल सकता है और promise return krega

await तब तक function को pause कर देता है जब तक fetchDataFromServer() का प्रॉमिस resolve नहीं हो जाता means jab tk actual data nhi mil jata लेकिन प्रोग्राम का बाकी part बिना रुके चलता रहेगा।

इसका मतलब यह है कि data में सीधे actual data स्टोर होगा, और फिर
console.log(data); सही डेटा प्रिंट करेगा।

भाग 5: Error Handling भी जरूरी है

Async Await के साथ एक खास बात ये है कि आप try-catch ब्लॉक का इस्तेमाल करके error को आसानी से हैंडल कर सकते हैं।

async function getData() {
try {
let data = await fetchDataFromServer();
console.log(data);
} catch (error) {
console.error("कुछ गलती हो गई:", error);
}
}

भाग 6: कहानी से समझते हैं

अब इसे एक आसान कहानी से समझते हैं।
मान लीजिए, आप एक रेस्टोरेंट में गए। आपने पिज्जा ऑर्डर किया।

वेटर ने आपका ऑर्डर लिया (Function Call)।
पिज्जा बनने लगा (Promise)।
अब आप खाना आने का इंतजार कर रहे हैं (Await)।
आखिरकार वेटर पिज्जा लेकर आता है (Promise Resolved)।
अगर पिज्जा नहीं बना, तो वेटर मना कर देता है (Promise Rejected)।
Async Await प्रोग्रामिंग में ठीक ऐसा ही करता है। ये हमें इस इंतजार को मैनेज करने में मदद करता है।

भाग 7: रियल वर्ल्ड एप्लिकेशन

दोस्तों, Async Await का सबसे बड़ा फायदा तब होता है जब आप API से डेटा फेच कर रहे हों, फाइल्स read kr rhe हों या डेटाबेस से कुछ access कर रहे हों। इससे आपका कोड क्लीन और आसान हो जाता है।

भाग 8: अंत में

तो दोस्तों, Async Await का ये सफर यहीं खत्म होता है। उम्मीद है, अब ये टॉपिक आपको आसान लग रहा होगा। अगले वीडियो में हम Promises और Callbacks की तुलना करेंगे।

वीडियो अच्छा लगा हो तो लाइक कीजिए, अपने दोस्तों के साथ शेयर कीजिए और चैनल को सब्सक्राइब करना मत भूलिए।

मिलते हैं अगले वीडियो में, तब तक के लिए कोडिंग करते रहिए और सीखते रहिए। धन्यवाद!

===============================

तो दोस्तों, ये थीं 10 आम गलतियां जो TypeScript में async/await इस्तेमाल करते वक्त लोग करते हैं। अगर आप भी इनमें से कोई गलती कर रहे थे, तो अब आप सीख गए हैं। वीडियो को लाइक और चैनल को सब्सक्राइब करना न भूलें। मिलते हैं अगले वीडियो में। धन्यवाद!

==========================================================================

स्क्रिप्ट: 10 आम गलतियां जो TypeScript में async/await इस्तेमाल करते वक्त लोग करते हैं

इंट्रो (0:00 - 1:00):
नमस्ते दोस्तों!
क्या आप TypeScript में async/await का सही इस्तेमाल करना चाहते हैं? लेकिन क्या आप जानते हैं, कई लोग इसमें छोटी-छोटी गलतियां करते हैं, जो उनके कोड को स्लो और गलत बना देती हैं? आज के इस वीडियो में, हम जानेंगे 10 ऐसी आम गलतियां जो आप भी शायद कर रहे होंगे।
तो वीडियो को आखिर तक जरूर देखिए, क्योंकि अंत में मैं एक बोनस टिप भी देने वाला हूं जो आपकी कोडिंग स्किल्स को लेवल-अप कर देगी।

केवल async लिखना और await भूल जाना (1:00 - 3:00) सबसे पहली और बड़ी गलती जो लोग करते हैं, वो है async फ़ंक्शन तो लिख लेते हैं लेकिन अंदर await इस्तेमाल करना भूल जाते हैं। मान लीजिए, आपने एक API कॉल बनाई:

typescript
Copy code
async function fetchData() {

fetch('https://api.example.com/data');

}
अब आपको क्या लगता है, ये सही है? गलत!
क्योंकि आपने fetch के रिजल्ट को वेट नहीं किया। इससे आपका कोड बिना डेटा के आगे बढ़ जाएगा। सही तरीका है:

typescript
Copy code
async function fetchData() {

const response = await fetch('https://api.example.com/data');

}
देखा? await लगाने से अब ये सही काम करेगा।

Error handling करना भूल जाना (3:00 - 5:00) आपने देखा होगा, कई बार लोग ट्राय-कैच (try-catch) ब्लॉक का इस्तेमाल नहीं करते। अगर आपकी API कॉल फेल हो गई तो क्या होगा? प्रोग्राम क्रैश कर जाएगा। सही तरीका है:

typescript
Copy code
async function fetchData() {

try {

const response = await fetch('https://api.example.com/data');

} catch (error) {

console.error('Error:', error);

}

}
अब अगर एरर आएगी, तो आपका कोड संभल जाएगा।

एक साथ कई async ऑपरेशंस को await करना (5:00 - 7:00) अब सोचिए, अगर आपके पास तीन API कॉल्स हैं, और आप हर कॉल को अलग-अलग await करते हैं:

typescript
Copy code
const data1 = await fetch('url1');

const data2 = await fetch('url2');

const data3 = await fetch('url3');
ये काफी टाइम लेगा। लेकिन हम इसे साथ में भी चला सकते हैं:

typescript
Copy code
const [data1, data2, data3] = await Promise.all([

fetch('url1'),

fetch('url2'),

fetch('url3')

]);
देखा? एक साथ सारे कॉल्स फटाफट हो गए।

Async फ़ंक्शन में return करना भूल जाना (7:00 - 9:00) लोग अक्सर async फ़ंक्शन में कुछ रिटर्न करना भूल जाते हैं। अगर आपने लिखा:

typescript
Copy code
async function getData() {

await fetch('url');

}
तो ये कुछ भी रिटर्न नहीं करेगा। सही तरीका है:

typescript
Copy code
async function getData() {

const response = await fetch('url');

return response.json();

}
अब जब ये फंक्शन कॉल होगा, ये डेटा रिटर्न करेगा।

Nested async/await लिखना (9:00 - 11:00) कई बार लोग async/await को नेस्टेड बना देते हैं, जिससे कोड बहुत गन्दा हो जाता है।

typescript
Copy code
async function main() {

const result = await someFunction(async () => {

return await anotherFunction();

});

}
इसे सिंपल बनाइए:

typescript
Copy code
async function main() {

const result = await anotherFunction();

}

बड़ी फाइल्स में async/await का गलत इस्तेमाल (11:00 - 13:00)
कभी-कभी async/await के साथ लंबे-लंबे फंक्शंस लिखे जाते हैं, जो समझना मुश्किल हो जाता है। हमेशा छोटे-छोटे फंक्शंस बनाएं। इससे कोड पढ़ने और डिबग करने में आसानी होगी।
Unhandled Rejections (13:00 - 15:00)
अगर आप किसी भी async फ़ंक्शन के रेजेक्शन को हैंडल नहीं करते, तो यह एक बहुत बड़ी गलती है। इसे हमेशा संभालिए।
async/await और .then() को मिक्स करना (15:00 - 17:00)
कभी-कभी लोग async/await के साथ .then() का इस्तेमाल करते हैं।

typescript
Copy code
async function getData() {

const response = await fetch('url').then(res => res.json());

}
ये सही तरीका नहीं है। केवल await का इस्तेमाल करें।

Async Loops में await का गलत इस्तेमाल (17:00 - 18:30)
फॉर-लूप में await गलत तरीके से लगाने पर परफॉर्मेंस स्लो हो जाती है। सही तरीका है Promise.all() का इस्तेमाल।
सही Testing न करना (18:30 - 19:30)
लोग async/await को टेस्ट करना भूल जाते हैं। हमेशा यूनिट टेस्टिंग करें ताकि आपका कोड सही से काम करे।

बोनस टिप (19:30 - 20:00):
जब भी async/await का इस्तेमाल करें, अपनी कोडिंग को सिंपल और क्लीन रखें। इससे आपका काम आसान होगा।

आउट्रो (20:00):
तो दोस्तों, ये थीं 10 आम गलतियां जो TypeScript में async/await का इस्तेमाल करते वक्त लोग करते हैं। अगर आप इनसे बचेंगे, तो आपका कोड तेज और बेहतर काम करेगा।
अगर आपको वीडियो पसंद आया हो, तो लाइक करें, चैनल को सब्सक्राइब करें, और कमेंट करके बताएं कि आप अगला वीडियो किस टॉपिक पर देखना चाहते हैं।
धन्यवाद, मिलते हैं अगले वीडियो में!

quiz topics and questions

Shivam Sahu — Tue, 01 Oct 2024 05:30:15 +0000

rxjs
component
services
subject behavior
pipes
angular life cycle
decorators
directives
string interpolation
string handling

yt enhance quality

Shivam Sahu — Fri, 13 Sep 2024 06:50:50 +0000

https://www.youtube.com/watch?v=N6-Q2dgodLs&t=247s

shorts -- https://www.youtube.com/watch?v=7IWIQJKdCGU

https://www.youtube.com/watch?v=oAoYFZvMQEs

Angular Interview Questions

Shivam Sahu — Mon, 02 Sep 2024 13:20:20 +0000

https://chatgpt.com/share/756c7605-3df3-487d-a709-7bc603664d85

https://chatgpt.com/share/bef89b0a-3d31-4d8a-aff4-7b3e8c18e9c0

https://chatgpt.com/share/4acf8d94-bf02-4a9b-afc5-dc52a0344eba

https://www.youtube.com/watch?v=Coyy79wRz_s

https://www.youtube.com/watch?v=PoRJizFvM7s

https://chatgpt.com/share/756c7605-3df3-487d-a709-7bc603664d85

synchronous/asynchronous/callbacks/promises/async await

synchronous -
execute line by line consecutively in a sequential manner. Code that waits for an operation to complete.

asynchronous -
execute multiple line or operation concurrently without waiting. Doesnt block the code execution flow and allow the program to continue i/o operation,fetching data etc..

Handled By - Callbacks, Promises,Async Await

Callbacks -
Promises -
Async Await -

My Projects

Shivam Sahu — Wed, 07 Aug 2024 04:34:32 +0000

Project Name: real-estate-management

Description:

A online property management solution for real estate. It is a cross-platform mobile application designed to connect property owners and Buyers. Also property owners can rent their vacant spaces.

Key Features:

Login/Sign up
Home page see all available properties
Search properties
Add properties page
properties detail page
About us page
Auto Redirect using Guards.
Profile Managment
Image uploaded functionality
Image delete functionality
Categories – Create, Update and Delete,Image Uploaded functionality
properties – Create, Update and Delete,Image Uploaded functionality

Technologies Used:

Ionic 8+
Angular 17
HTML
CSS
BOOTSTRAP

Challenges & Solutions:

When dealing with large lists or complex data sets, the app might experience performance degradation, such as slow scrolling or high memory usage, which can lead to a poor user experience.

Ionic provides a ion-virtual-scroll component that only renders the items currently visible on the screen, thus improving performance by reducing the number of DOM elements.

IONIC AND ANGULAR

Shivam Sahu — Tue, 06 Aug 2024 13:35:51 +0000

What is Ionic?
Ionic is a popular open-source framework for building cross-platform mobile applications using web technologies such as HTML, CSS, and JavaScript. It allows developers to create native-like apps for iOS, Android, and the web from a single codebase.

What is the difference between Ionic and Cordova?
Ionic focuses on the app's look and feel, Cordova handles the interaction with native device functionalities like the camera or GPS.

What are Ionic components and how are they used?
Ionic components are pre-designed UI elements that follow platform-specific design guidelines, like Material Design for Android and Human Interface Guidelines for iOS. They include elements like buttons, cards, and lists, which help create a consistent and visually appealing user interface.

<ion-button>Click Me</ion-button>
 <ion-card>
   <ion-card-header>
     <ion-card-title>Card Title</ion-card-title>
   </ion-card-header>
   <ion-card-content>Card Content</ion-card-content>
</ion-card>

How does Ionic handle navigation?
Ionic handles navigation using the Angular Router (for Angular projects) or the appropriate routing library for React and Vue. It uses the component as a placeholder for dynamically rendered views based on the application's route configuration. This allows for efficient and seamless navigation between different pages or views within the app.

What is Capacitor and how does it relate to Ionic?
Capacitor is a native runtime developed by the Ionic team that allows you to build cross-platform mobile applications with web technologies. It provides native APIs and plugins for accessing device features and integrates seamlessly with Ionic for modern development experiences. While Ionic focuses on the UI and app structure, Capacitor handles native functionality and deployment.

How do you handle platform-specific functionality in an Ionic app?
You can handle platform-specific functionality in an Ionic app by using the Platform service to detect the platform and execute platform-specific code. For example:

import { Platform } from '@ionic/angular';

constructor(private platform: Platform) {
  if (this.platform.is('ios')) {
    // iOS-specific code
  } else if (this.platform.is('android')) {
    // Android-specific code
  }
}

What is Ionic’s CLI and what are some common commands?
ionic start [app-name]: Creates a new Ionic project.
ionic serve: Runs the app in a local development server.
ionic build: Builds the app for production.
ionic cap add [platform]: Adds a native platform like iOS or Android.
ionic cap sync: Syncs the latest code with the native platform.

What is the purpose of the @ionic-native package?
The @ionic-native package provides Angular wrappers for Cordova and Capacitor plugins, making it easier to use native device features in Ionic applications by offering a straightforward, type-safe API.

Scenario: You have a requirement to implement a feature that needs to access the device's camera. How would you handle this in Ionic?

To access the device's camera in Ionic, you would use the Capacitor Camera plugin. First, ensure that the @capacitor/camera plugin is installed in your project

Scenario: You need to ensure that your Ionic app performs well on older devices. What strategies would you use?

Implement lazy loading for images and modules to decrease initial load time and improve performance.
Use efficient Angular change detection strategies and avoid excessive DOM manipulations.
Reduce the initial bundle size of Application.

Scenario: Your app needs to handle offline data synchronization. How would you implement this in Ionic?

Use Capacitor Storage API to store data locally when the app is offline.

Scenario: You need to implement custom theming in your Ionic app. How would you approach this?

Define custom CSS variables in your src/theme/variables.scss file to override default Ionic styles.
Utilize SCSS to create custom themes and dynamically change themes if needed.
Implement a theme service that changes the active theme by updating CSS variables at runtime.

Scenario: Your Ionic app needs to handle user authentication with social login providers. What would be your approach?

Integrate with authentication libraries like Auth0, Firebase Authentication, or OAuth providers that support social logins.

ss

Shivam Sahu — Tue, 25 Jun 2024 13:21:06 +0000

function printDuplicateCharacters(str) {
    // Step 1: Initialize an empty object to store character counts
    let charCount = {};

    // Step 2: Iterate through the string to count each character
    for (let i = 0; i < str.length; i++) {
        let char = str[i];
        if (charCount[char]) {
            charCount[char]++;
        } else {
            charCount[char] = 1;
        }
    }

    // Step 3: Find and print characters with a count greater than one
    for (let char in charCount) {
        if (charCount[char] > 1) {
            console.log(char + ": " + charCount[char]);
        }
    }
}

// Example usage
let inputString = "programming";
printDuplicateCharacters(inputString);