JavaScript Promises மற்றும் Async/Await விளக்கம்
நீங்கள் ஆன்லைனில் ஒரு பீட்சாவை ஆர்டர் செய்வதாக கற்பனை செய்து கொள்ளுங்கள்.
அது வரும் வரை நீங்கள் கதவருகே எதையும் செய்யாமல் நின்று கொண்டிருக்க மாட்டீர்கள். நீங்கள் வீடியோக்கள் பார்ப்பீர்கள், வேலை செய்வீர்கள் அல்லது நண்பர்களுடன் பேசுவீர்கள். பீட்சா வந்தவுடன், நீங்கள் சாப்பிடுவீர்கள்.
JavaScript-உம் இதேபோலத்தான் செயல்படுகிறது.
API கோரிக்கைகள் (requests) அல்லது தரவுத்தள அழைப்புகள் (database calls) போன்ற பணிகளுக்கு நேரம் எடுக்கும். JavaScript ஒவ்வொரு பணிக்காகக் காத்திருந்தால், உங்கள் ஆப் (app) முடங்கிவிடும் (freeze). அதற்குப் பதிலாக, அது காத்திருக்கும் நேரத்தில் மற்ற குறியீடுகளை (code) தொடர்ந்து இயங்கிக்கொண்டே இருக்கும்.
ஒரு Promise என்பது எதிர்காலத்தில் கிடைக்கவிருக்கும் ஒரு மதிப்பைக் குறிக்கிறது.
ஒரு Promise மூன்று நிலைகளைக் கொண்டுள்ளது:
- Pending (நிலுவையில் உள்ளது)
- Fulfilled (வெற்றி)
- Rejected (தோல்வி)
ஒரு புதிய Promise-ஐ உருவாக்குவதற்கான குறியீட்டை நீங்கள் அரிதாகவே பார்ப்பீர்கள். ஏனெனில் fetch() போன்ற நவீன கருவிகள் ஏற்கனவே உங்களுக்காக ஒரு Promise-ஐத் திருப்பித் தருகின்றன.
.then() என்ன செய்கிறது?
.then() தரவை மீட்டெடுக்கிறது என்று பலர் நினைக்கிறார்கள். அது அவ்வாறு செய்யாது.
.then() ஒரு callback செயல்பாட்டை (function) பதிவு செய்கிறது. "இந்த Promise முடிந்ததும், இந்தச் செயல்பாட்டை இயக்கு" என்று நீங்கள் JavaScript-இடம் கூறுகிறீர்கள்.
இது ஒரு டெலிவரி ஆப் போன்றது. நீங்கள் உணவை ஆர்டர் செய்கிறீர்கள், ஆப் சொல்கிறது: "உணவு வந்தவுடன் என்னை அழையுங்கள்." அந்தச் செயல்பாடு முடிவிற்காகக் காத்திருக்கிறது.
ஏன் Async/Await பயன்படுத்த வேண்டும்?
பயனர் தரவு (user data), பிறகு பதிவுகள் (posts), பிறகு கருத்துகள் (comments) எனப் பெற நீங்கள் .then() அழைப்புகளைத் தொடர்ச்சியாகப் பயன்படுத்தலாம் (chaining). இது வேலை செய்யும், ஆனால் நீண்ட தொடர்கள் வாசிப்பதற்கு கடினமாக இருக்கும்.
Async/await குறியீட்டை சாதாரண, படிநிலை (step-by-step) குறியீடு போலக் காட்டுகிறது. இது மிகவும் சுத்தமாகவும் (cleaner) எளிதில் புரிந்துகொள்ளக்கூடியதாகவும் இருக்கும்.
await, JavaScript-ஐத் தடுக்கிறதா (block)?
இது ஒரு பொதுவான நேர்காணல் கேள்வி. பதில்: இல்லை.
JavaScript ஒரு await முக்கியச் சொல்லைச் (keyword) சந்திக்கும் போது, அது அந்த குறிப்பிட்ட async செயல்பாட்டை மட்டுமே நிறுத்தி வைக்கும். உங்கள் பயன்பாட்டின் மற்ற பகுதிகள் தொடர்ந்து இயங்கிக்கொண்டே இருக்கும்.
உதாரண ஓட்டம்:
- async செயல்பாட்டில் உள்ள குறியீட்டை இயக்குகிறது.
- await-ஐச் சந்தித்து அந்தச் செயல்பாட்டை நிறுத்துகிறது.
- பயன்பாட்டின் மற்ற பகுதிகளை இயக்குகிறது.
- பணி முடிந்ததும், async செயல்பாட்டைத் தொடர்கிறது.
Async/await என்பது Promises-ஐ எழுதுவதற்கான ஒரு சுத்தமான வழி மட்டுமே. இது ஒரு syntactic sugar ஆகும்.
முக்கியக் குறிப்புகள்:
- Promise = எதிர்கால மதிப்பு.
- fetch() = ஒரு Promise-ஐத் திருப்பித் தருகிறது.
- .then() = தயாரானதும் இதை இயக்கு.
- await = இந்தச் செயல்பாட்டை மட்டும் நிறுத்து, முழு நிரலையும் அல்ல.
- async/await = சுத்தமான Promise தொடரியல் (syntax).
Source: https://dev.to/aarthirs/javascript-promises-asyncawait-explained-with-a-real-life-example-43bm