Velo: Fetch API से थर्ड-पार्टी सेवाओं को एक्सेस करना
Velo का इस्तेमाल करके आप थर्ड-पार्टी वेब सेवाओं को एक्सेस करने के लिए कोड लिख सकते हैं। Fetch API में HTTP रिक्वेस्ट भेजने के लिए दो फ़ंक्शन हैं: getJSON() और fetch()। JSON ऑब्जेक्ट पाने वाली सामान्य GET रिक्वेस्ट के लिए, हम getJSON() इस्तेमाल करने का सुझाव देते हैं। अधिक जटिल रिक्वेस्ट के लिए, fetch() ज्यादा फ़ंक्शनैलिटी देता है।
getJSON( ) का इस्तेमाल करके GET रिक्वेस्ट भेजना
अपनी सेवा को कॉल करने के लिए, सबसे पहले हमें एक बैकएंड वेब मॉड्यूल में getGreetings() फ़ंक्शन लिखना होगा। (रेफ़रेंस के लिए, हमने वेब मॉड्यूल को dataFetcher.jsw नाम दिया है। बाद में हमें अपने फ़्रंटएंड कोड में इससे getGreetings() इंपोर्ट करना होगा।)
1import { getJSON } from 'wix-fetch';
2
3// GET call using getJSON
4export async function getGreetings() {
5 const response = await getJSON('https://velo-examples.wixsite.com/training-tester/_functions/greetings');
6 return response;
7}सबसे पहले हम Fetch API के getJSON() फ़ंक्शन को इंपोर्ट करते हैं। इसके बाद, अपने getGreetings() फ़ंक्शन में हम केवल getJSON() को कॉल करके रिस्पॉन्स रिटर्न करते हैं।
अब हम अपने "फ़ेच ग्रीटिंग्स" बटन पर क्लिक होने पर getGreetings() बैकएंड फ़ंक्शन को कॉल करने और रिज़ल्ट दिखाने के लिए फ़्रंटएंड कोड लिख सकते हैं।
1import { getGreetings } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6 $w('#fetchAllButton').onClick(async () => {
7 $w('#fetchAllButton').disable();
8
9 const fetchedData = await getGreetings();
10 const repeaterData = fetchedData.map(item => {
11 item._id = item.id.toString();
12 return item;
13 });
14
15 $w('#helloRepeater').data = repeaterData;
16 $w('#helloRepeater').show();
17
18 $w('#fetchAllButton').enable();
19 });
20
21 $w('#helloRepeater').onItemReady( ($item, itemData) => {
22 $item('#repeatedLanguageText').text = itemData.language;
23 $item('#repeatedHelloText').text = itemData.greeting;
24 });
25});सबसे पहले हम अपने बैकएंड वेब मॉड्यूल dataFetcher.jsw से getGreetings() फ़ंक्शन इंपोर्ट करते हैं।
"फ़ेच ग्रीटिंग्स" बटन पर क्लिक होने पर, हम getGreetings() को कॉल करके रिस्पॉन्स का इंतज़ार करते हैं। रिस्पॉन्स मिलने पर, हम मिली हुई IDs को स्ट्रिंग्स में बदलते हैं और उनसे एक रिपीटर में डाटा भरते हैं।
ऊपर दिए गए उदाहरण के बारे में अधिक जानकारी पाने और इसे खुद आज़माने के लिए, हमारा हेलो फ़ेच उदाहरण पृष्ठ देखें।
fetch( ) का इस्तेमाल करके GET रिक्वेस्ट भेजना
अब fetch() का इस्तेमाल करने वाला ऐसा ही एक उदाहरण देखते हैं।
मान लीजिए कि हम किसी बटन पर क्लिक करने से एक रैंडम भाषा में ग्रीटिंग पाने के लिए किसी थर्ड-पार्टी सेवा को GET रिक्वेस्ट भेजना चाहते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
सबसे पहले, सर्विस कॉल करने के लिए हमें बैकएंड वेब मॉड्यूल में getRandomGreeting() फ़ंक्शन लिखना होगा। (रेफ़रेंस के लिए, हमने वेब मॉड्यूल का नाम dataFetcher.jsw रखा है। बाद में हमें अपने फ्रंटएंड कोड में इससे getRandomGreeting() इंपोर्ट करना होगा।)
1import { fetch } from 'wix-fetch';
2
3// GET call using fetch
4export async function getRandomGreeting() {
5 const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/randomgreeting');
6 if(response.ok) {
7 const json = await response.json();
8 return json.greeting;
9 } else {
10 return Promise.reject("Fetch did not succeed");
11 }
12}सबसे पहले, हम Fetch API का fetch() फ़ंक्शन इंपोर्ट करते हैं, जिसे हम अपने getRandomGreeting() कोड में कॉल करते हैं। अगर कॉल सफल होती है, तो हम रिस्पॉन्स को JSON फ़ाइल में कन्वर्ट करते हैं और फिर उसका greeting ऑब्जेक्ट रिटर्न करते हैं। अगर कॉल विफल होती है, तो हम Promise.reject मैसेज रिटर्न करते हैं।
अब हम ऐसा फ्रंटएंड कोड लिख सकते हैं जो "फ़ेच रैंडम ग्रीटिंग" बटन पर क्लिक होने के बाद हमारे getRandomGreeting() बैकएंड फ़ंक्शन को कॉल करे और रिज़ल्ट दिखाए।
1import { getRandomGreeting } from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6 $w('#fetchRandomButton').onClick(async () => {
7 $w('#fetchRandomButton').disable();
8
9 const fetchedData = await getRandomGreeting();
10
11 $w('#languageText').text = fetchedData.language;
12 $w('#helloText').text = fetchedData.message;
13
14 $w('#languageText').show();
15 $w('#helloText').show();
16
17 $w('#fetchRandomButton').enable();
18 });
19});सबसे पहले, हम अपने बैकएंड वेब मॉड्यूल dataFetcher.jsw से getRandomGreeting() फ़ंक्शन इंपोर्ट करते हैं।
"फ़ेच रैंडम ग्रीटिंग" बटन पर क्लिक होने पर, हम getRandomGreeting() को कॉल करते हैं और रिस्पॉन्स का इंतज़ार करते हैं। रिस्पॉन्स मिलने पर, हम डाटा दिखाने के लिए अपने टेक्स्ट फ़ील्ड का इस्तेमाल करते हैं।
ऊपर दिए गए उदाहरण के बारे में ज़्यादा जानकारी पाने और खुद इसे आज़माने के लिए, हमारा हेलो फ़ेच उदाहरण पृष्ठ देखें।
fetch( ) का इस्तेमाल करके POST रिक्वेस्ट करना
fetch() का इस्तेमाल POST जैसी अन्य तरह की रिक्वेस्ट 3rd-party सेवाओं को भेजने के लिए भी किया जा सकता है।
मान लीजिए कि हम किसी बटन पर क्लिक होने पर तय भाषा में ग्रीटिंग POST करने के लिए किसी 3rd-party सर्विस को कॉल करना चाहते हैं, जैसा कि नीचे दिए गए उदाहरण में दिखाया गया है:
सबसे पहले, सर्विस कॉल करने के लिए हमें एक बैकएंड वेब मॉड्यूल में postGreeting() फ़ंक्शन लिखना होगा। (रेफ़रेंस के लिए, हमने वेब मॉड्यूल का नाम dataFetcher.jsw रखा है। बाद में हमें अपने फ्रंटएंड कोड में इससे postGreeting() इंपोर्ट करना होगा।)
1import { fetch } from 'wix-fetch';
2
3// POST call using fetch
4export async function postGreeting(language, greeting) {
5 const jsonBody = {
6 language,
7 greeting
8 };
9
10 const fetchOptions = {
11 method: 'post',
12 headers: 'application/json',
13 body: JSON.stringify(jsonBody)
14 };
15
16 const response = await fetch('https://velo-examples.wixsite.com/training-tester/_functions/greeting', fetchOptions);
17 return response.json();
18}सबसे पहले, हम Fetch API का fetch() इंपोर्ट करते हैं, जिसे हम अपने postGreeting() फ़ंक्शन में कॉल करते हैं।
हमारा फ़ंक्शन language और greeting पैरामीटर लेता है, जिन्हें फ्रंटएंड से पास किया जाता है, और उन्हें 3rd-party सर्विस पर POST करता है।
इस बार हमें fetch() में कुछ अतिरिक्त ऑप्शन पैरामीटर पास करने होंगे, जिन्हें हमने fetchOptions नाम दिया है। इन ऑप्शन में अनुरोध किया गया मेथड (post), भेजे जा रहे डाटा का फ़ॉर्मैट बताने वाला शीर्षलेख (application/json) और language व greeting वैल्यू वाला jsonBody ऑब्जेक्ट शामिल हैं।
अब हम ऐसा फ्रंटएंड कोड लिख सकते हैं जो "पोस्ट ग्रीटिंग" बटन पर क्लिक होने के बाद हमारे postGreeting() बैकएंड फ़ंक्शन को कॉल करे।
1import { postGreeting} from 'backend/dataFetcher';
2
3// See the dataFetcher.jsw web module in the backend for the service call //
4
5$w.onReady(function () {
6 $w('#postButton').onClick(async () => {
7 $w('#postButton').disable();
8
9 const putResponse = await postGreeting($w('#languageInput').value, $w('#greetingInput').value);
10
11 console.log(putResponse);
12
13 if(putResponse.success) {
14 $w('#successIcon').show();
15 $w('#errorIcon').hide();
16 $w('#responseMessage').text = putResponse.success;
17 }
18 else {
19 $w('#successIcon').hide();
20 $w('#errorIcon').show();
21 $w('#responseMessage').text = putResponse.error;
22 }
23
24 $w('#responseMessage').show();
25 $w('#postButton').enable();
26 });
27});सबसे पहले, हम अपने बैकएंड वेब मॉड्यूल dataFetcher.jsw से postGreeting() फ़ंक्शन इंपोर्ट करते हैं।
"पोस्ट ग्रीटिंग" बटन पर क्लिक होने पर, हम संबंधित इनपुट एलिमेंट से मिली language और greeting वैल्यू के साथ postGreeting() को कॉल करते हैं और रिस्पॉन्स का इंतज़ार करते हैं। रिस्पॉन्स मिलने पर, हम टेक्स्ट फ़ील्ड में दिखाते हैं कि कॉल सफल हुई या विफल।
ऊपर दिए गए उदाहरण के बारे में ज़्यादा जानकारी पाने और खुद इसे आज़माने के लिए, हमारा हेलो फ़ेच उदाहरण पृष्ठ देखें।
API की के साथ काम करना
- API की को सीक्रेट्स मैनेजर में स्टोर करें।
- ऐसा कोड लिखें जो सीक्रेट्स API का इस्तेमाल करके API की को एक्सट्रैक्ट करे और सर्विस कॉल को बैकएंड वेब मॉड्यूल में पूरा करे। ऐसा करने से क्लाइंट-साइड कोड से सर्विस कॉल करने पर API की एक्सपोज होने जैसी सिक्योरिटी से जुड़ी समस्याओं से बचा जा सकता है।
सबसे पहले, वेदर सर्विस को कॉल करने और डाटा पाने के लिए बैकएंड वेब मॉड्यूल में एक फंक्शन बनाएं:
1//serviceModule.jsw
2
3import {fetch} from 'wix-fetch';
4import {getSecret} from 'wix-secrets-backend';
5
6export async function getCurrentTemp(city) {
7 const url = 'https://api.openweathermap.org/data/2.5/weather?q=';
8 const key = await getSecret(WeatherApiKey);
9
10 let fullUrl = url + city + '&APPID=' + key + '&units=imperial';
11
12 return fetch(fullUrl, {method: 'get'})
13 .then(response => response.json())
14 .then(json => json.main.temp);
15}इस उदाहरण में, सबसे पहले https रिक्वेस्ट करने और सीक्रेट्स मैनेजर से सीक्रेट्स पाने के लिए जरूरी फंक्शन इंपोर्ट करें। इसके बाद, एक नया फंक्शन बनाएं जो उस city को इनपुट के रूप में ले, जिसका मौसम आप देखना चाहते हैं। फंक्शन सबसे पहले fetch रिक्वेस्ट के लिए पूरा URL बनाता है। यह URL, सर्विस के एड्रेस और API की से मिलकर बनता है। इस उदाहरण को काम करने के लिए, आपको अपनी API को सीक्रेट्स मैनेजर में "WeatherApiKey" नाम से स्टोर करना होगा। इसके बाद, फंक्शन असल रिक्वेस्ट करता है। रिस्पॉन्स मिलने पर, यह उसमें से तापमान का डाटा निकालता है। यह तापमान डाटा क्लाइंट-साइड कॉल को मिलेगा।