জাভাস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট

এই আর্টিকেলে আমরা জাভাস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট ব্যাখ্যা করব।

YouTube Video

জাভাস্ক্রিপ্টে অ্যাসিঙ্ক/অ্যাওয়েট

জাভাস্ক্রিপ্টে async (এবং await) এমন ফিচার যা অ্যাসিঙ্ক্রোনাস অপারেশন আরও সহজবোধ্য এবং পড়তে সুবিধাজনক করার জন্য ডিজাইন করা হয়েছে। এটি ব্যবহারের মাধ্যমে আপনি প্রচলিত কলব্যাক ফাংকশন এবং Promise চেইনের জটিলতা কমাতে পারেন এবং অ্যাসিনক্রোনাস কোডকে সিঙ্ক্রোনাস কোডের মতো করে লিখতে পারেন।

async ফাংশন

async একটি ফাংশনকে অ্যাসিঙ্ক্রোনাস ফাংশন হিসেবে চিহ্নিত করতে ব্যবহৃত হয়। async ফাংশন সবসময় একটি প্রমিজ রিটার্ন করে। async চিহ্নিত ফাংশনের ভিতরে, আপনি await ব্যবহার করতে পারেন একটি প্রমিজের ফলাফল প্রত্যাবর্তন করার জন্য অপেক্ষা করতে।

async ফাংশনের মৌলিক সিনট্যাক্স

1async function myAsyncFunction() {
2    // Write asynchronous processing here
3    return 'Result';  // Return a Promise
4}

এই ক্ষেত্রে, myAsyncFunction() কল করা হলে স্বয়ংক্রিয়ভাবে একটি প্রমিজ অবজেক্ট রিটার্ন করে। যখন প্রমিজ রেজলভ হয়, এর ফলাফলটি return দ্বারা রিটার্ন করা ভ্যালু হয়ে যায়।

উদাহরণ: মৌলিক async ফাংশন

1async function greet() {
2    return 'Hello, World!';
3}
4
5greet().then((message) => {
6    console.log(message);  // Displays "Hello, World!"
7});

await

await একটি প্রমিজ রেজলভ হওয়ার জন্য অপেক্ষা করার জন্য ব্যবহৃত হয়। await ব্যবহার করে আপনি প্রমিজের রেজলভ হওয়া পর্যন্ত এক্সিকিউশনকে থামিয়ে রাখতে পারেন এবং প্রমিজের ফলাফল পেতে পারেন। await শুধুমাত্র একটি async ফাংশনের ভিতরে ব্যবহার করা যেতে পারে।

উদাহরণ: কিভাবে await ব্যবহার করবেন

 1async function fetchData() {
 2    // Wait for the result of the Promise
 3    const data = await fetch('https://codesparklab.com/json/example.json');
 4    // Wait for the asynchronous operation to complete
 5    const jsonData = await data.json();
 6    // Retrieve and display the data
 7    console.log(jsonData);
 8}
 9
10fetchData();

উপরের উদাহরণে, এটি fetch ফাংশন দ্বারা রিটার্নকৃত প্রমিজের জন্য await দিয়ে অপেক্ষা করে এবং তারপর ফলাফল ব্যবহার করে আরও অ্যাসিঙ্ক্রোনাস অপারেশন সম্পন্ন করে।

async/await এর সাথে এরর হ্যান্ডলিং

যদি একটি async ফাংশনের ভিতরে কোনো এরর ঘটে, তবে সেই এররটি প্রমিজের একটি reject হিসেবে গণ্য করা হয়। আপনি এরর হ্যান্ডলিং করার জন্য try...catch স্টেটমেন্ট ব্যবহার করতে পারেন।

উদাহরণ: এরর হ্যান্ডলিং

 1async function fetchData() {
 2    try {
 3        // Invalid URL
 4        const data = await fetch('https://invalid.codesparklab.com/');
 5        const jsonData = await data.json();
 6        console.log(jsonData);
 7    } catch (error) {
 8        // Catch the error
 9        console.error('Failed to fetch data:', error);
10    }
11}
12
13fetchData();

try...catch ব্লক ব্যবহার করে আপনি অ্যাসিঙ্ক্রোনাস অপারেশন চলাকালে ঘটে যাওয়া এরর ক্যাচ করতে পারেন এবং এরর ঘটলে প্রোগ্রাম ক্র্যাশ হওয়া প্রতিরোধ করতে পারেন।

async/await এর সুবিধা

প্রচলিত Promise চেইনের তুলনায়, async/await নিম্নলিখিত সুবিধাগুলি প্রদান করে:।

• উন্নত পাঠযোগ্যতা
  • অ্যাসিনক্রোনাস প্রসেসিং সিঙ্ক্রোনাস কোডের মতো করে লেখা যায়, ফলে গভীরভাবে নেস্ট করা Promise চেইন এবং কলব্যাকের জটিলতা এড়ানো যায়।
• সহজ ডিবাগিং
  • এটি যেহেতু সিঙ্ক্রোনাস কোডের মতো দেখায়, তাই ডিবাগিং এবং এরর হ্যান্ডলিং আরও সহজ হয়ে যায়।
• উন্নত রক্ষণাবেক্ষণযোগ্যতা
  • অ্যাসিনক্রোনাস প্রক্রিয়াগুলি আরও সহজভাবে লেখা যায়, ফলে কোড পরিবর্তন বা সংশোধন করা সহজ হয় এবং দীর্ঘমেয়াদে রক্ষণাবেক্ষণযোগ্যতাও বৃদ্ধি পায়।

উদাহরণ: Promise চেইন বনাম async/await

চলেন আমরা Promise চেইন ব্যবহৃত কোড এবং async/await ব্যবহৃত কোডের তুলনা করি।

 1// Code using Promise chains
 2function fetchDataPromise() {
 3    fetch('https://codesparklab.com/json/example.json')
 4        .then((response) => response.json())
 5        .then((data) => {
 6            console.log(data);
 7        })
 8    .catch((error) => {
 9        console.error('Failed to fetch data:', error);
10    });
11}
12
13// Code using async/await
14async function fetchDataAsync() {
15    try {
16        const response = await fetch('https://codesparklab.com/json/example.json');
17        const data = await response.json();
18        console.log(data);
19    } catch (error) {
20        console.error('Failed to fetch data:', error);
21    }
22}

async/await ব্যবহার করলে আপনি অ্যাসিনক্রোনাস প্রক্রিয়া সরলরেখায় লিখতে পারেন, যার ফলে কোড আরও পাঠযোগ্য হয়।

একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন একই সাথে সম্পাদন করুন

Promise.all() অথবা Promise.race() কে await এর সাথে যুক্ত করে, আপনি একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন একই সাথে সম্পাদন করতে পারেন এবং তাদের ফলাফল দলবদ্ধভাবে পরিচালনা করতে পারেন।

Promise.all()

 1async function fetchMultipleData() {
 2    try {
 3        const [data1, data2] = await Promise.all([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData1 = await data1.json();
 8        const jsonData2 = await data2.json();
 9        console.log(jsonData1);
10        console.log(jsonData2);
11    } catch (error) {
12        console.error('Failed to fetch data:', error);
13    }
14}
15
16fetchMultipleData();

• Promise.all() একই সাথে একাধিক Promise সমাধান করে এবং তাদের ফলাফল অ্যারের আকারে প্রদান করে। এটি সকল Promise সমাধান হওয়ার জন্য অপেক্ষা করে, এবং যদি কোনো একটি ব্যর্থ হয়, তবে এটি সামগ্রিকভাবে ব্যর্থতা হিসেবে বিবেচিত হয়।

Promise.race()

 1async function fetchFastestData() {
 2    try {
 3        const fastestResponse = await Promise.race([
 4            fetch('https://codesparklab.com/json/example1.json'),
 5            fetch('https://codesparklab.com/json/example2.json')
 6        ]);
 7        const jsonData = await fastestResponse.json();
 8        console.log('Fastest data:', jsonData);
 9    } catch (error) {
10        console.error('Fetch error:', error);
11    }
12}
13
14fetchFastestData();

• Promise.race() প্রথম যে Promise সফল বা ব্যর্থ হবে তার ফলাফল ফেরত দেয়। যখন আপনি প্রথম শেষ হওয়া অ্যাসিঙ্ক্রোনাস অপারেশনে প্রতিক্রিয়া দিতে চান তখন এটি উপকারী। তবে, যদি প্রথম Promise ব্যর্থ হয়, তাহলে ত্রুটিটি সাথে সাথে catch দ্বারা ধরা হয়।

Promise.allSettled()

 1async function fetchWithAllSettled() {
 2    const results = await Promise.allSettled([
 3        // This URL will success
 4        fetch('https://codesparklab.com/json/example1.json'),
 5        // This URL will fail
 6        fetch('https://invalid.codesparklab.com/')
 7    ]);
 8
 9    results.forEach((result, index) => {
10        if (result.status === 'fulfilled') {
11            const url = result.value.url;
12            console.log(`Request ${index + 1} succeeded:`, url);
13        } else {
14            const reason = result.reason;
15            console.warn(`Request ${index + 1} failed:`, reason);
16        }
17    });
18}
19
20fetchWithAllSettled();

• Promise.allSettled() সফল বা ব্যর্থ যাই হোক না কেন, সব ফলাফলের জন্য অপেক্ষা করে। প্রত্যেকটি ফলাফল { status, value } অথবা { status, reason } আকারে ফেরত দেয়, যাতে আপনি বুঝতে পারেন কোন Promise সফল হয়েছে এবং কোনটি ব্যর্থ হয়েছে।

Promise.any()

 1async function fetchAnySuccessful() {
 2    try {
 3        const firstSuccessful = await Promise.any([
 4            // This URL will fail
 5            fetch('https://invalid.codesparklab.com/'),
 6            // This URL will success
 7            fetch('https://codesparklab.com/json/example1.json')
 8        ]);
 9        const jsonData = await firstSuccessful.json();
10        console.log('First successful response:', jsonData);
11    } catch (error) {
12        console.error('All fetch requests failed:', error);
13    }
14}
15
16fetchAnySuccessful();

• Promise.any() শুধুমাত্র প্রথম সফলভাবে পূর্ণ হওয়া Promise-এর ফলাফল ফেরত দেয়। সব Promise ব্যর্থ হলে তবেই কেবল একটি ব্যতিক্রম ছোঁড়া হয়। এটি এমন পরিবেশে পুনরায় চেষ্টা করার পদ্ধতি হিসেবে ব্যবহার করা যেতে পারে যেখানে কিছু API-র উপর নির্ভর করা যায় না যতক্ষণ না একটি সফল হয়।

সারসংক্ষেপ

• async ফাংশন: সর্বদা একটি Promise প্রদান করে এবং অ্যাসিঙ্ক্রোনাস প্রসেসিং লেখার জন্য ব্যবহৃত হয়।
• await: একটি Promise সমাধান হওয়ার জন্য অপেক্ষা করতে এবং তার ফলাফল গ্রহণ করতে ব্যবহৃত হয়।
• ত্রুটি পরিচালনা: অ্যাসিঙ্ক্রোনাস প্রসেসিং চলাকালীন ঘটে যাওয়া ত্রুটি পরিচালনা করতে try...catch ব্যবহার করুন।
• একাধিক অ্যাসিঙ্ক্রোনাস অপারেশন: Promise.all() ইত্যাদি মেথড ব্যবহার করে আপনি একাধিক অ্যাসিঙ্ক্রোনাস টাস্ক একসাথে চালাতে পারেন।

async/await অ্যাসিঙ্ক্রোনাস প্রসেসিং পরিচালনার জন্য শক্তিশালী টুল, তাই জটিল অ্যাসিঙ্ক্রোনাস লজিক সরল করতে এগুলো ব্যবহার করতে নিশ্চিত হতে হবে।

আপনি আমাদের ইউটিউব চ্যানেলে ভিজ্যুয়াল স্টুডিও কোড ব্যবহার করে উপরের নিবন্ধটি অনুসরণ করতে পারেন। দয়া করে ইউটিউব চ্যানেলটিও দেখুন।

YouTube Video