Http अनुरोध मॉड्यूल के उदाहरण का उपयोग करके js में करीने का व्यावहारिक उपयोग

सभी को नमस्कार! यह किसी के लिए कोई रहस्य नहीं है कि प्रोग्रामिंग दुनिया में कई तकनीकों, प्रथाओं और प्रोग्रामिंग पैटर्न (डिजाइन) हैं, लेकिन अक्सर, कुछ नया सीखना, यह पूरी तरह से स्पष्ट नहीं है कि यह नया कहां और कैसे लागू किया जाए।

आज, http अनुरोधों के साथ काम करने के लिए एक छोटा आवरण मॉड्यूल बनाने के उदाहरण का उपयोग करके, हम कार्य करने के वास्तविक लाभों का विश्लेषण करेंगे - कार्यात्मक प्रोग्रामिंग का स्वागत।

सभी नवागंतुकों और अभ्यास में कार्यात्मक प्रोग्रामिंग का उपयोग करने में रुचि रखने वालों के लिए - स्वागत है, जो पूरी तरह से समझते हैं कि करी क्या है - मैं कोड पर आपकी टिप्पणियों के लिए तत्पर हूं, क्योंकि वे कहते हैं - पूर्णता की कोई सीमा नहीं है।

तो चलिए शुरू करते हैं

लेकिन करी की अवधारणा से नहीं, बल्कि समस्या के बयान से, जहां हम इसे लागू कर सकते हैं।

हमारे पास निम्नलिखित सिद्धांत के अनुसार काम करने वाला एक निश्चित ब्लॉग एपीआई है (असली एपीआई के साथ सभी मैच एक दुर्घटना हैं):

• /api/v1/index/ लिए एक अनुरोध मुख्य पृष्ठ के लिए डेटा वापस आ जाएगी
• /api/v1/news/ समाचार पृष्ठ के लिए डेटा वापस करेगा
• /api/v1/articles/ की सूची के लिए डेटा वापस करेगा
• अनुरोध /api/v1/article/222/ आईडी 222 के साथ लेख पृष्ठ पर वापस आ जाएगा
• /api/v1/article/edit/222/ लिए एक अनुरोध आईडी 222 के साथ एक लेख संपादन प्रपत्र वापस आ जाएगा
  ... और इसी तरह, आगे, आगे

जैसा कि आप देख सकते हैं, एपीआई तक पहुँचने के लिए हमें एक निश्चित संस्करण v1 की एपीआई की ओर मुड़ना होगा (यह कितना कम बढ़ेगा और एक नया संस्करण जारी किया जाएगा) और फिर डेटा अनुरोध को आगे डिज़ाइन करें।

इसलिए, जेएस कोड में, डेटा प्राप्त करने के लिए, उदाहरण के लिए, आईडी 222 के साथ एक लेख , हमें लिखना होगा (जितना संभव हो उतना उदाहरण को सरल बनाने के लिए, हम मूल जेएस लाने की विधि का उपयोग करते हैं):

 fetch('/api/v1/article/222/') .then(/* success */) .catch(/* error */) 

उसी लेख को संपादित करने के लिए, हम यह अनुरोध करेंगे:

 fetch('/api/v1/article/edit/222/') .then(/* success */) .catch(/* error */) 

निश्चित रूप से आपने पहले ही देखा है कि हमारे अनुरोधों में बहुत सारे डुप्लिकेट पथ हैं। उदाहरण के लिए, हमारे एपीआई /api/v1/ लिए पथ और संस्करण, और एक लेख /api/v1/article/ और /api/v1/article/edit/ ।

हमारे पसंदीदा DRY (खुद को दोहराएं नहीं) नियम के बाद, एपीआई अनुरोध कोड का अनुकूलन कैसे करें?

हम स्थिरांक में क्वेरी भाग जोड़ सकते हैं, उदाहरण के लिए:

 const API = '/api' const VERSION = '/v1' const ARTICLE = `${API}${VERSION}/article` 

और अब हम ऊपर दिए गए उदाहरणों को इस तरह से फिर से लिख सकते हैं:

लेख का अनुरोध

 fetch(`${ARTICLE}/222/`) 

अनुच्छेद संपादन अनुरोध

 fetch(`${ARTICLE}/edit/222/`) 

कोड कम प्रतीत होता है, एपीआई से संबंधित स्थिरांक हैं, लेकिन आप और मैं जानते हैं कि क्या अधिक आसानी से किया जा सकता है।

मेरा मानना ​​है कि समस्या को हल करने के लिए अभी भी विकल्प हैं, लेकिन हमारा काम करी का उपयोग करके समाधान पर विचार करना है।

Http सेवाओं के आधार पर अनुरोधों के निर्माण का सिद्धांत

रणनीति एक निश्चित फ़ंक्शन बनाने के लिए है, जिसे कॉल करके हम एपीआई अनुरोधों का निर्माण करेंगे।

यह कैसे काम करना चाहिए

हम मूल भ्रूण पर रैपर फ़ंक्शन को कॉल करके अनुरोध का निर्माण करते हैं (चलो इसे http कहते हैं। इस फ़ंक्शन के लिए नीचे पूर्ण कोड है), उन तर्कों में, जिनमें हम अनुरोध पैरामीटर पास करते हैं:

 cosnt httpToArticleId222 = http({ url: '/api/v1/article/222/', method: 'POST' }) 

कृपया ध्यान दें कि इस http फ़ंक्शन का परिणाम एक फ़ंक्शन होगा जिसमें url और विधि अनुरोध सेटिंग्स शामिल हैं।

अब, httpToArticleId222() कॉल httpToArticleId222() हम वास्तव में एपीआई को अनुरोध भेजते हैं।

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

तो, सबसे पहले, हम एक एपीआई कॉल सेवा का निर्माण कर रहे हैं (साथ ही अनुरोध पैरामीटर जोड़ रहे हैं जो बाद के सभी अनुरोधों के लिए अपरिवर्तित हैं, उदाहरण के लिए, एक विधि)

 const httpAPI = http({ url: '/api', method: 'POST' }) 

अब हम पहले संस्करण के एपीआई तक पहुंचने की सेवा बनाते हैं। भविष्य में, हम एपीआई के एक अलग संस्करण में httpAPI सेवा से एक अलग अनुरोध शाखा बनाने में सक्षम होंगे।

 const httpAPIv1 = httpAPI({ url: '/v1' }) 

पहले संस्करण के एपीआई तक पहुंचने की सेवा तैयार है। अब हम इसमें से बाकी डेटा के लिए सेवाएँ बनाएँगे (लेख की शुरुआत में तात्कालिक सूची याद रखें)

होमपेज डेटा

 const httpAPIv1Main = httpAPIv1({ url: '/index' }) 

समाचार पृष्ठ डेटा

 const httpAPIv1News = httpAPIv1({ url: '/news' }) 

लेख सूची डेटा

 const httpAPIv1Articles = httpAPIv1({ url: '/articles' }) 

अंत में हम अपने मुख्य उदाहरण के लिए आते हैं, सामग्री के लिए डेटा

 const httpAPIv1Article = httpAPIv1({ url: '/article' }) 

लेख संपादन का मार्ग कैसे प्राप्त करें? बेशक, आपने यह अनुमान लगाया था, हम पहले से निर्मित फ़ंक्शन httpAPIv1Article से डेटा लोड कर रहे हैं

 const httpAPIv1ArticleEdit = httpAPIv1({ url: '/edit' }) 

एक छोटा तार्किक परिणाम

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

 export { httpAPIv1Main, httpAPIv1News, httpAPIv1Articles, httpAPIv1Article, httpAPIv1ArticleEdit } 

मैं एक विशिष्ट फ़ंक्शन के साथ एक सेवा आयात कर रहा हूं

 import { httpAPIv1Article } from 'services' 

और मैं अनुरोध को निष्पादित करता हूं, पहले सामग्री की आईडी जोड़कर इसे फिर से संगठित करता हूं, और फिर मैं अनुरोध भेजने के लिए फ़ंक्शन को कॉल करता हूं (जैसा कि वे कहते हैं: "आसान")

 httpAPIv1Article({ url: ArticleID // id  -   })() .then(/* success */) .catch(/* error */) 

स्वच्छ, सुंदर, समझने योग्य (विज्ञापन नहीं)

यह कैसे काम करता है

हम करीने के कारण डेटा के साथ एक फ़ंक्शन को "लोड" कर सकते हैं।

सिद्धांत की एक बिट।
करी एक फ़ंक्शन का निर्माण करने की क्षमता है, जिसमें धीरे-धीरे अपने तर्क लागू करने की क्षमता है। यह कहा जाता है के बाद समारोह लौटने से हासिल की है।

एक क्लासिक उदाहरण इसके अतिरिक्त है।
हमारे पास एक राशि फ़ंक्शन है, जिसे हम पहली बार कॉल करते हैं, हम बाद की तह के लिए पहला नंबर पास करते हैं। इसे कॉल करने के बाद, हमें एक नया फ़ंक्शन मिलता है जो योग की गणना करने के लिए दूसरे नंबर की अपेक्षा करता है। यहाँ उसका कोड है (ES6 वाक्य रचना)

 const sum = a => b => a + b 

हम इसे पहली बार (आंशिक अनुप्रयोग) कहते हैं और परिणाम को एक चर में सहेजते हैं, उदाहरण के लिए, sum13

 const sum13 = sum(13) 

अब sum13 को हम लापता संख्या के साथ भी तर्क में कह सकते हैं, जिसका परिणाम 13 + दूसरा तर्क होगा

 sum13(7) // =>  20 

खैर, इसे हमारे कार्य पर कैसे लागू किया जाए?

हम http फ़ंक्शन बनाते हैं, जो कि भ्रूण के ऊपर आवरण होगा

 function http (paramUser) {} 

फ़ंक्शन कॉल के समय पारमउज़र अनुरोध पैरामीटर हैं

आइए हमारे फ़ंक्शन में तर्क जोड़ना शुरू करें।

डिफ़ॉल्ट रूप से निर्धारित अनुरोध पैरामीटर जोड़ें।

 function http (paramUser) { /** *  -,    * @type {string} */ let param = { method: 'GET', credentials: 'same-origin' } } 

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

 function http (paramUser) { /** *  -,    * @type {string} */ let param = { method: 'GET', credentials: 'same-origin' } /** *   , *  url  ,          * * @param {object} param   * @param {object} paramUser ,    * * @return {object}     */ function paramGen (param, paramUser) { let url = param.url || '' let newParam = Object.assign({}, param, paramUser) url += paramUser.url || '' newParam.url = url return newParam } } 

हम सबसे महत्वपूर्ण से गुजरते हैं, हम करी का वर्णन करते हैं

फ़ंक्शन, उदाहरण के लिए, कपड़े और http फ़ंक्शन द्वारा लौटाया गया, हमें इसमें मदद करेगा।

 function http (paramUser) { /** *  -,    * @type {string} */ let param = { method: 'GET', credentials: 'same-origin' } /** *   , *  url  ,          * * @param {object} param   * @param {object} paramUser ,    * * @return {object}     */ function paramGen (param, paramUser) { let url = param.url || '' url += paramUser.url || '' let newParam = Object.assign({}, param, paramUser); newParam.url = url return newParam } /** *  ,     *  ,      * *  : * * -    ,        ,     * -   ,           * -   ,      * * @param {object} param ,       * @param {object} paramUser ,   * * @return {function || promise}   ,    (fetch),     */ function fabric (param, paramUser) { if (paramUser) { if (typeof paramUser === 'string') { return fabric.bind(null, paramGen(param, { url: paramUser })) } return fabric.bind(null, paramGen(param, paramUser)) } else { //  ,   ,   param    url, //       :) return fetch(param.url, param) } } return fabric.bind(null, paramGen(param, paramUser)) } 

Http फ़ंक्शन की पहली कॉल फैब्रिक फ़ंक्शन को लौटाती है, इसके साथ पारित पैरामीटर (और paramGen फ़ंक्शन द्वारा कॉन्फ़िगर), जो इसके लिए प्रतीक्षा करेगा घंटे बाद में फोन करें।

उदाहरण के लिए, अनुरोध को कॉन्फ़िगर करें

 let httpGift = http({ url: '//omozon.ru/givemegift/' }) 

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

 httpGift() .then(/* success */) .catch(/* error */) 

परिणाम

विभिन्न मॉड्यूल के विकास में करी के उपयोग के लिए धन्यवाद, हम मॉड्यूल के उपयोग में उच्च लचीलापन और परीक्षण में आसानी प्राप्त कर सकते हैं। उदाहरण के लिए, एपीआई के साथ काम करने के लिए सेवाओं की वास्तुकला का आयोजन करते समय।

यह ऐसा है जैसे कि हम एक मिनी-लाइब्रेरी बना रहे हैं, जिसके टूल का उपयोग करके हम अपने एप्लिकेशन के लिए एक सिंगल इन्फ्रास्ट्रक्चर बना रहे हैं।

मुझे आशा है कि जानकारी उपयोगी थी, जोर से मत मारो, यह मेरे जीवन का पहला लेख है :)

सभी संकलित कोड, जल्द ही मिलते हैं!