টাইপস্ক্রিপ্ট-এ অ্যাসিঙ্ক/অ্যাওয়েট
এই প্রবন্ধটি টাইপস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট ব্যাখ্যা করে।
YouTube Video
টাইপস্ক্রিপ্ট-এ অ্যাসিঙ্ক/অ্যাওয়েট
টাইপস্ক্রিপ্টে, async একটি বিশেষ কীওয়ার্ড যা সংক্ষিপ্তভাবে অসিঙ্ক্রোনাস অপারেশন প্রকাশ করে এবং এটি জাভাস্ক্রিপ্টের async/await সিনট্যাক্সের মতো কাজ করে। Async ফাংশনগুলি এমনভাবে তৈরি করা হয়েছে যাতে Promise ফেরত দেওয়া ফাংশনগুলি আরও সহজভাবে পরিচালনা করা যায়।
async ফাংশনের মৌলিক বিষয়সমূহ
async কীওয়ার্ড দিয়ে ঘোষিত ফাংশনগুলি সর্বদা একটি Promise ফেরত দেয়। এখানে একটি মৌলিক উদাহরণ দেওয়া হলো:।
1async function fetchData(): Promise<string> {
2 return "Data received";
3}
4
5fetchData().then((data) => console.log(data)); // "Data received"
এই উদাহরণে, কারণ async ফাংশন সর্বদা একটি Promise ফেরত দেয়, ফেরত দেওয়া মানটি স্বয়ংক্রিয়ভাবে Promise.resolve ব্যবহার করে সমাধান করা হয়। অন্য কথায়, "Data received" একটি Promise<string> এ রূপান্তরিত হয় এবং এটি একটি অসিঙ্ক্রোনাস অপারেশনের মতো বিবেচিত হয়।
await কীওয়ার্ড
await কীওয়ার্ড কেবলমাত্র একটি async ফাংশনের ভিতরে ব্যবহার করা যায়। এটি ফাংশন কার্যকর করার আগে একটি Promise এর ফলাফলের জন্য থামতে এবং অপেক্ষা করার ক্ষমতা প্রদান করে।
নীচের উদাহরণে, fetch ব্যবহার করে অসিঙ্ক্রোনাস প্রসেসিং async/await দিয়ে লেখা হয়েছে।
1async function getUserData() {
2 try {
3 const response = await fetch("https://codesparklab.com/json/example.json");
4 const data = await response.json();
5 console.log(data);
6 } catch (error) {
7 console.error("Error fetching user data:", error);
8 }
9}
10
11getUserData();এই উদাহরণে, fetch ফাংশন দ্বারা ফেরত দেওয়া Promise সম্পন্ন হওয়ার জন্য অপেক্ষা করতে await ব্যবহার করা হয়েছে এবং এর ফলাফলটি response ভেরিয়েবলে নির্ধারিত করা হয়েছে। এরপর, response.json() এর ফলাফলও অপেক্ষা করা হয়।
async/await দিয়ে ত্রুটি পরিচালনা
অসিঙ্ক্রোনাস প্রসেসিং এর সময় সংঘটিত ত্রুটিগুলি স্ট্যান্ডার্ড try...catch সিনট্যাক্স ব্যবহার করে ধরা যায়। যদি await অংশে কোনো ত্রুটি ঘটে, তবে সেই ত্রুটি catch ব্লকে পরিচালিত হয়।
1async function fetchDataWithErrorHandling() {
2 try {
3 const response = await fetch('https://invalid.codesparklab.com/');
4 if (!response.ok) {
5 throw new Error(`HTTP error! status: ${response.status}`);
6 }
7 const data = await response.json();
8 console.log(data);
9 } catch (error) {
10 console.error("Fetch error:", error);
11 }
12}
13
14fetchDataWithErrorHandling();উপরের উদাহরণে, fetch ফাংশনের ফলাফল await ব্যবহার করে অপেক্ষা করা হয়েছে এবং যদি কোনো ত্রুটি ঘটে তবে তা try...catch ব্যবহার করে পরিচালিত হয়।
async/await এর সুবিধাসমূহ
-
স্বতঃসিদ্ধ অসিঙ্ক্রোনাস প্রসেসিং:
async/awaitব্যবহার করে কোডের প্রবাহPromiseচেইন (thenবাcatch) ব্যবহার করার চেয়ে আরও স্বতঃসিদ্ধ হয় এবং এটি সিঙ্ক্রোনাস প্রসেসিংয়ের মতো লেখা যায়। -
সহজ ত্রুটি পরিচালনা:
try...catchব্যবহার করে অসিঙ্ক্রোনাস অপারেশনগুলিতে ত্রুটি পরিচালনা সহজ করে। আপনিPromiseচেইন ব্যবহার করার চেয়ে আরও পড়ার যোগ্য কোড লিখতে পারেন।
async ফাংশনের রিটার্ন মানসমূহ
একটি async ফাংশন সবসময় একটি Promise রিটার্ন করে। সুতরাং, একটি Promise স্পষ্টভাবে রিটার্ন না করেও, async কীওয়ার্ড ব্যবহার করে অ্যাসিঙ্ক্রোনাস প্রক্রিয়া করা সম্ভব।
1async function example() {
2 return 42;
3}
4
5example().then((result) => console.log(result)); // 42
উপরে দেওয়া কোডে, একটি সিনক্রোনাস মান 42 রিটার্ন করা হয়, কিন্তু যেহেতু এটি একটি async ফাংশনের ভিতরে রয়েছে, এটি স্বয়ংক্রিয়ভাবে Promise.resolve(42) এ রূপান্তরিত হয়।
অ্যাসিঙ্ক্রোনাস ফাংশনের ক্রমানুসারে কার্যকরী
একাধিক অ্যাসিঙ্ক্রোনাস ফাংশন ধারাবাহিকভাবে কার্যকর করার সময়, আপনি তাদের ক্রম নিয়ন্ত্রণ করার জন্য await ব্যবহার করতে পারেন।
1async function fetchData(url: string): Promise<any> {
2 try {
3 const response = await fetch(url);
4 return await response.json();
5 } catch (error) {
6 console.error("Error fetching user data:", error);
7 }
8}
9
10async function fetchData1(): Promise<any> {
11 return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15 return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function processData() {
19 const data1 = await fetchData1();
20 console.log(data1);
21
22 const data2 = await fetchData2();
23 console.log(data2);
24}
25
26processData();এই উদাহরণে, fetchData1 সমাপ্ত হওয়ার জন্য অপেক্ষা করার পরে fetchData2 কার্যকর করা হয়। এটি একটি Promise চেইন ব্যবহারের চেয়ে আরও পাঠযোগ্য।
প্যারালাল (সমান্তরাল) কার্যকরী
যদি আপনি অ্যাসিঙ্ক্রোনাস অপারেশন গুলি সমান্তরালে কার্যকর করতে চান তবে আপনি একাধিক Promise একই সাথে পরিচালনা করার জন্য Promise.all ব্যবহার করতে পারেন।
1async function fetchData(url: string): Promise<any> {
2 try {
3 const response = await fetch(url);
4 return await response.json();
5 } catch (error) {
6 console.error("Error fetching user data:", error);
7 }
8}
9
10async function fetchData1(): Promise<any> {
11 return await fetchData("https://codesparklab.com/json/example.json");
12}
13
14async function fetchData2(): Promise<any> {
15 return await fetchData("https://codesparklab.com/json/example2.json");
16}
17
18async function fetchMultipleData() {
19 const [data1, data2] = await Promise.all([fetchData1(), fetchData2()]);
20 console.log(data1);
21 console.log(data2);
22}
23
24fetchMultipleData();এই ক্ষেত্রে, fetchData1 এবং fetchData2 একই সময়ে কার্যকর করা হয় এবং উভয় সমাধান হওয়ার পরে প্রক্রিয়া এগিয়ে যায়। এটি একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন দক্ষতার সাথে পরিচালনা করতে সক্ষম করে।
সারসংক্ষেপ
- একটি
asyncফাংশন একটিPromiseরিটার্ন করে এবংawaitকীওয়ার্ড ব্যবহার করে আপনি একটি অ্যাসিঙ্ক্রোনাস অপারেশনের ফলাফলের জন্য অপেক্ষা করতে পারেন। try...catchব্যবহার করে অ্যাসিঙ্ক্রোনাস অপারেশনে এরর হ্যান্ডলিং আরও সহজ হয়।Promise.allব্যবহার করে একাধিক অ্যাসিঙ্ক্রোনাস অপারেশনকে সমান্তরালে কার্যকর করা সম্ভব।
async/await টাইপস্ক্রিপ্ট এবং জাভাস্ক্রিপ্টে ব্যাপকভাবে ব্যবহৃত হয় কারণ এটি অ্যাসিঙ্ক্রোনাস অপারেশনের সহজ বর্ণনার অনুমতি দেয়।
আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।