👩🏾‍🤝‍👩🏽 🔙 💡 हम HTTP अनुरोध करते हैं, इनायत से नीचा (और एक भी अंतराल नहीं) 📱 🛐 🕓

आज, कुछ लोगों को याद है कि वेब अनुप्रयोग एक एकल XHR अनुरोध के बिना चल सकते हैं। AJAX (अतुल्यकालिक जावास्क्रिप्ट और एक्सएमएल) पृष्ठ को फिर से लोड किए बिना एक ठंडा सुविधा प्रदान करता है। यह अवधारणा सबसे आधुनिक एसपीए से गुजरती है।

लेकिन ऐसा कुछ नहीं दिया गया है, आपको हर चीज के लिए भुगतान करना होगा। AJAX की अवधारणा अत्यंत सरल लगती है, लेकिन सर्वर से डेटा के अनुरोध के स्तर पर भी, आप बहुत सारी समस्याओं को पूरा कर सकते हैं।

आरंभ करने के लिए, आइए AJAX के साथ सबसे सरल SPA एप्लिकेशन लिखें:

initApp(); function initApp() { document.body.innerHTML = ` <h3>Employees list</h3> <ul id="employees-list"></ul> <button id="load-employees">Load employee</button> `; document.getElementById('load-employees').addEventListener('click', loadEmployee); } function loadEmployee() { fetch('http://dummy.restapiexample.com/api/v1/employee/1') .then(res => res.json()).then(({employee_name}) => addEmployee(employee_name)); } function addEmployee(employeeName) { const employeeElement = document.createElement('li'); employeeElement.innerText = employeeName; document.getElementById('employees-list').appendChild(employeeElement); }

सब कुछ बेहद सरल है: जब आप बटन पर क्लिक करते हैं, तो हम सर्वर से डेटा का अनुरोध करते हैं और जब वे प्राप्त होते हैं, तो आइटम को सूची में जोड़ें।

जैसा कि मैंने कहा, इस स्तर पर बहुत कुछ गलत हो सकता है और, इस विषय का विस्तार करने के लिए, हम पहले एक छोटे से सिद्धांत का विश्लेषण करेंगे।

निर्माण दोष सहिष्णु इंटरफेस के दो दर्शन

ग्रेसफुल डिग्रेडेशन

यह इंटरफ़ेस डिज़ाइन दर्शन है जिसमें उपयोगकर्ता को शुरू में यथासंभव अधिक फ़ंक्शन प्रदान किए जाते हैं। और केवल सिस्टम के किसी भी हिस्से की विफलता की स्थिति में उस पर निर्भर कार्य अक्षम हैं। यह जटिल लगता है, लेकिन नीचे हम एक उदाहरण के साथ इसका विश्लेषण करेंगे - यह बहुत अधिक स्पष्ट होगा।

प्रगतिशील वृद्धि

एक वैकल्पिक / समानांतर दर्शन है - प्रगतिशील वृद्धि। इसमें, आंदोलन दूसरे तरीके से जाता है: शुरू में, उपयोगकर्ता को कार्यात्मकताओं के एक न्यूनतम (या औसत) सेट के साथ प्रदान किया जाता है। और बाकी को इनिशियलाइज़ करने के लिए, उनके काम के लिए आवश्यक सिस्टम के पुर्जों के समर्थन को पहले चेक किया जाता है।

आमतौर पर, जब ब्राउज़र-आधारित अनुप्रयोगों के संदर्भ में सुशोभित गिरावट और प्रगतिशील वृद्धि के बारे में बात की जाती है, तो उनका मतलब क्रॉस-ब्राउज़र संगतता या अनुकूलन क्षमता है। इन अवधारणाओं को समझाने वाला एक लोकप्रिय उदाहरण है। मान लें कि आपके आवेदन में एक प्रिंट पेज फ़ंक्शन है, और यदि आप ऐसा करते हैं:

 <body> <a href="javascript:window.print()" id="print-btn">Print</a> <script> const printButton = document.getElementById('print-btn'); if (printButton && typeof window.print !== 'function') { printButton.parentNode.appendChild(document.createTextNode('  ')); printButton.parentNode.removeChild(printButton); } </script> </body>

तब यह शालीन गिरावट है , क्योंकि आप तुरंत प्रिंट बटन दिखाते हैं, लेकिन जब आपको पता चलता है कि प्रिंटिंग ब्राउज़र द्वारा समर्थित नहीं है, तो आप कार्यक्षमता को हटा देते हैं।

पुनश्च: मूल उदाहरण में, नोसेस्क्रिप्ट टैग का उपयोग सुंदर गिरावट को प्रदर्शित करने के लिए किया गया था, लेकिन यह मुझे बहुत पुराना लगता है।

यदि आप ऐसा करते हैं:

 if(typeof window.print === 'function') { const printButton = document.createElement('a'); printButton.innerText = 'Print'; printButton.addEventListener('click', () => window.print()); document.body.appendChild(printButton); }

यह एक प्रगतिशील वृद्धि है , क्योंकि पहले आप आवश्यक एपीआई के लिए समर्थन की जांच करते हैं और उसके बाद ही फ़ंक्शन जोड़ते हैं।

उदाहरण दोष सहिष्णुता इंटरफ़ेस डिजाइन दर्शन के सबसे आदिम अनुप्रयोग को प्रदर्शित करते हैं।

AJAX और HTTP अनुरोधों पर वापस जाएं।

AJAX के साथ क्या गलत हो सकता है?

अनपेक्षित HTTP स्थिति कोड

सबसे सरल मामला होगा यदि सर्वर गलत स्थिति कोड लौटाता है जिसकी आपको उम्मीद थी, 500 का कहना है। यह एक सामान्य परिदृश्य है, और संभवतः आपके पास इसे संसाधित करने के लिए कुछ उपकरण हैं। उदाहरण के लिए, उपयोगकर्ता को "एक सर्वर त्रुटि हुई है" एक अधिसूचना दिखाएं। यह स्पष्ट रूप से गिरावट है, लेकिन यह कितना सुशोभित है? क्या यहां प्रगतिशील वृद्धि को लागू करना संभव है? नहीं, यह निश्चित रूप से प्रगतिशील वृद्धि के लिए जगह नहीं है - कार्यक्षमता पहले ही खराब हो गई है। आप केवल इस मुसीबत को खूबसूरती से हरा सकते हैं:

भविष्य में इसे रोकने के लिए यह पता लगाने के लिए कि यह स्थिति आम तौर पर क्लाइंट में होती है। इसके लिए, आमतौर पर त्रुटि लॉगर्स का उपयोग किया जाता है, उदाहरण के लिए संतरी ।io ।
यदि संभव हो तो प्राप्त आंकड़ों को कैश करें। एक समान अनुरोध के लिए पहले से ही कॉल होने पर कूल करें और आपने डेटा कैश कर दिया। इस मामले में, भले ही आपको सर्वर से एक अप्रत्याशित स्थिति कोड प्राप्त होता है, आप इंटरफ़ेस प्रदर्शित कर सकते हैं, हालांकि सबसे वर्तमान डेटा के साथ नहीं।
बाद में अनुरोध को पुनः प्रयास करें। शायद यह एक अस्थायी सर्वर क्रैश है और कुछ सेकंड के बाद यह "रिलीज़" होगा। आप या तो स्वचालित रूप से दूसरा अनुरोध कर सकते हैं या उपयोगकर्ता को यह विकल्प प्रदान कर सकते हैं।
बाकी एप्लिकेशन को ब्लॉक न करें। यदि आप HTTP अनुरोध को कॉल करने से पहले एक स्पिनर या कंकाल दिखाते हैं, तो इसे सफल या नहीं अनुरोध के किसी भी पूरा होने पर छिपाना न भूलें। यह स्पष्ट लग सकता है, लेकिन मैं इस पर बहुत बार आया हूं।
सामान्य तौर पर, कई अप्रत्याशित स्थिति कोड हो सकते हैं, उदाहरण के लिए, जब उपयोगकर्ता सत्र समाप्त हो गया और सर्वर ने कोड 403 के साथ जवाब दिया। इस त्रुटि के लिए, एक अलग हैंडलर की आवश्यकता है जो सत्र टोकन को फिर से जारी करता है या प्राधिकरण के लिए उपयोगकर्ता को भेजता है। विफलता के आवेदन में सभी संभावित सर्वर प्रतिक्रियाओं के लिए हैंडलर होना चाहिए।

अमान्य उत्तर

कभी बैकएंड पर भरोसा मत करो! सर्वर 200 कोड के साथ प्रतिक्रिया दे सकता है, लेकिन प्रतिक्रिया के शरीर में वह गलत डेटा लौटाएगा जिसकी आपको आवश्यकता है। इस स्थिति में, आप एक अप्रत्याशित स्थिति कोड के साथ ही काम कर सकते हैं, लेकिन कठिनाई यह निर्धारित करने में है कि उत्तर वास्तव में अमान्य है।

यदि आप टाइपस्क्रिप्ट में लिखते हैं, तो आपके लिए एक अच्छा टूल है - टाइपस्क्रिप्ट-ज्सन-स्कीमा । इसके साथ, आप टाइपस्क्रिप्ट इंटरफ़ेस से json योजनाएँ बना सकते हैं और रनटाइम में डेटा को मान्य करने के लिए उनका उपयोग कर सकते हैं।

लंबा जवाब

यह वह झटका है जो कुछ उम्मीद करता है। यदि हमें त्रुटियां या यहां तक कि अमान्य प्रतिक्रिया डेटा याद है, तो हम शायद ही कभी टाइमआउट याद करते हैं। अपराधी न केवल सर्वर एप्लिकेशन, बल्कि इंटरनेट प्रदाता या क्लाइंट डिवाइस भी हो सकता है।

इसके बारे में मत भूलो, उपयोगकर्ता को सूचित करना बेहतर है कि अनुरोध स्क्रीन पर कताई सर्कल के साथ उसका सामना करने की तुलना में सामान्य से अधिक लंबा है। जब अनुरोध के निष्पादन के लिए आवंटित समय समाप्त हो जाता है, तो आप दो पिछली स्थितियों में समान परिदृश्य से गुजर सकते हैं।

इंटरनेट का अभाव

मैं यह जानकर बहुत प्रभावित हुआ कि Google दस्तावेज़ में एक ऑफ़लाइन मोड है। इससे मुझे बहुत मदद मिली जब मैंने एक हवाई जहाज पर एक लेख लिखने का फैसला किया, जहां कोई इंटरनेट नहीं था।

बेशक, एप्लिकेशन अलग हैं और उनमें से कई इंटरनेट के बिना व्यावहारिक रूप से बेकार हैं। लेकिन इन अनुप्रयोगों में भी, आप कनेक्शन की कमी के साथ मामले को संभाल सकते हैं और एक सूचनात्मक संदेश दिखा सकते हैं (हालांकि मुझे "क्रोम" में अत्याचार का खेल खेलना पसंद है)।

इसके अलावा, आप इंटरनेट कनेक्शन को कनेक्ट / डिस्कनेक्ट करने वाली घटनाओं को सुन सकते हैं। और, उदाहरण के लिए, विंडो पर ऑनलाइन ईवेंट के दौरान डेटा को स्वचालित रूप से पुनः लोड करें।

दोष सहिष्णु इंटरफ़ेस - यह आसान नहीं है

कुल मिलाकर, उन कार्यों की सूची जो HTTP अनुरोध को लागू करते समय लागू की जानी चाहिए:

लॉग त्रुटियों।
डेटा कैश करें और उसका उपयोग करें।
असफल अनुरोधों को दोहराएं।
इंटरफ़ेस को ब्लॉक न करें।
सभी संभावित सर्वर प्रतिक्रियाओं को संभालें।
सर्वर प्रतिक्रियाओं को मान्य करें।
टाइमआउट सेट करें।
ऑफलाइन मोड (इंटरनेट की कमी)।

पहली बार में जो तुच्छ लग रहा था वह कई समस्याओं के साथ एक संपूर्ण दर्शन में बदल गया। बेशक, यह मास्टहेड नहीं है। लेकिन अगर आपका आवेदन परिपक्वता के उच्च स्तर पर पहुंच गया है और आप वास्तव में उच्च गुणवत्ता वाला इंटरफ़ेस बनाना चाहते हैं, तो यह वह दिशा है जिसमें यह विकसित होने के लायक है।

इस लेख का उद्देश्य HTTP अनुरोधों के साथ काम करते समय संभावित समस्याओं के बारे में बात करना है, लेकिन विशिष्ट समाधानों के बारे में नहीं। आज बड़ी संख्या में पुस्तकालय और चौखटे हैं जो इन समस्याओं को हल करने के उद्देश्य से हैं, उदाहरण के लिए, Angular में HTTP इंटरसेप्टर।
संभावित समस्याओं के बारे में जानना, इंटरनेट पर उनके लिए एक समाधान खोजना बहुत आसान होगा।

हम HTTP अनुरोध करते हैं, इनायत से नीचा (और एक भी अंतराल नहीं)