$lang['tuto'] = "பயிற்சிகள்"; ?>$lang['tuto'] = "பயிற்சிகள்"; ?> Fetch ஐப் பயன்படுத்தி JavaScript

Fetch ஐப் பயன்படுத்தி JavaScript உடன் API POST கோரிக்கையை அனுப்புகிறது

Alice Dupont
ஞாயிறு, 29 செப்டம்பர், 2024 ’அன்று’ முற்பகல் 3:44:41
API Authentication

பெறுதல் மூலம் API POST கோரிக்கையை எவ்வாறு அனுப்புவது என்பதைப் புரிந்துகொள்வது

அனுப்புதல் ஏ APIகளைப் பயன்படுத்தும் போது தரவுப் பகிர்வு மற்றும் அங்கீகாரத்திற்கு அவசியம். ஜாவாஸ்கிரிப்ட் மற்றும் ஐ எப்படி பயன்படுத்துவது என்பது உங்களுக்குத் தெரிந்தால், HTTP கோரிக்கைகளை அனுப்ப இது நம்பகமான வழியாகும் நுட்பம். ஆனால் கோரிக்கையை துல்லியமாக உருவாக்குவது எப்போதாவது தெளிவாக இருக்காது, குறிப்பாக இது போன்ற தலைப்புகளுடன் பணிபுரியும் போது .

இந்த வழக்கில் அங்கீகரிக்க, நீங்கள் அனுப்ப வேண்டும் ஒரு API இறுதிப்புள்ளிக்கு. மேற்கூறிய இறுதிப்புள்ளிக்கு ஒரு குறிப்பிட்ட அமைப்பு தேவைப்படுகிறது, அதில் ஹாஷ் செய்யப்பட்ட நற்சான்றிதழ்கள் மற்றும் ஒரு . ஆயினும்கூட, நீங்கள் அனுபவிக்கும் தவறுகள் அடிக்கடி சந்திக்கப்படுகின்றன, குறிப்பாக இறுக்கமான வடிவமைப்புத் தேவைகளைக் கொண்ட வெளிப்புற APIகளைப் பயன்படுத்தும் போது.

இந்த கட்டுரையை எவ்வாறு உருவாக்குவது என்பதை விளக்கும் பயன்படுத்தி முறை சரியானது. சாத்தியமான சிக்கல்களைக் கண்டறிந்து, நீங்கள் சந்தித்த '500 இன்டர்னல் சர்வர் பிழை' போன்ற பொதுவான பிழைகளைத் தடுக்க, சரியான தலைப்பு வடிவமைப்பைக் காண்பிப்போம்.

நீங்கள் முடிப்பதற்குள், ஜாவாஸ்கிரிப்டை எவ்வாறு ஒன்றாகச் சேர்ப்பது மற்றும் சமர்ப்பிப்பது என்பது உங்களுக்குத் தெரியும் , இது API வெற்றிகரமாகத் தொடர்பு கொள்ளப்பட்டு தேவையான தரவை வழங்கும் என்பதற்கு உத்தரவாதம் அளிக்கும்.

கட்டளை பயன்பாட்டின் உதாரணம்
fetch() get() செயல்பாட்டைப் பயன்படுத்தி HTTP கோரிக்கைகள் மூலம் சேவையகத்தைத் தொடர்புகொள்ளலாம். இந்த நிகழ்வில் API இறுதிப் புள்ளியில் POST கோரிக்கையைச் சமர்ப்பிக்க இது பயன்படுத்தப்படுகிறது.
Authorization ஏபிஐ அழைப்பைச் சமர்ப்பிக்கும் போது, ​​ஹேஷ் நற்சான்றிதழ்கள் மற்றும் ஏபிஐ விசையை உள்ளடக்கிய பியரர் டோக்கன் அங்கீகரிப்புக்கு வசதியாக அங்கீகாரத் தலைப்பு வழியாக அனுப்பப்படுகிறது.
async/await ஒத்திசைவற்ற குறியீட்டை மிகவும் புரிந்துகொள்ளக்கூடிய முறையில் நிர்வகிக்கப் பயன்படுகிறது. ஒத்திசைவு செயல்பாடுகள் மூலம் வாக்குறுதி அளிக்கப்படும், மேலும் வாக்குறுதி நிறைவேறும் வரை செயல்படுத்தல் இடைநிறுத்தப்படும்.
response.ok HTTP கோரிக்கை (நிலைக் குறியீடு 200–299) வெற்றிகரமாக இருந்ததா என்பதை இந்த அளவுரு தீர்மானிக்கிறது. தோல்வி நிகழ்வுகளை சரியான முறையில் நிர்வகிப்பதற்கு, பதில் ஏற்றுக்கொள்ளப்படாவிட்டால் பிழை ஏற்படுத்தப்படும்.
response.json() API பதிலின் JSON உடலைப் பாகுபடுத்தப் பயன்படுத்தப்பட்டது. இது பதில் ஸ்ட்ரீமில் இருந்து ஒரு ஜாவாஸ்கிரிப்ட் பொருளை உருவாக்குகிறது.
throw new Error() API பதில் தோல்வியுற்றால், தனிப்பயனாக்கப்பட்ட பிழைச் செய்தியை அனுப்புகிறது. இது துல்லியமான செய்திகளை வழங்குகிறது, இது மிகவும் திறமையான பிழை மேலாண்மைக்கு உதவுகிறது.
console.assert() Console.assert() என்பது பிழைத்திருத்தம் மற்றும் சோதனைக்கு பயன்படுத்தப்படும் ஒரு கருவியாகும், இது சோதனைகளில் பெறுதல் முறையின் செல்லுபடியை சரிபார்க்க உதவுகிறது.
Content-Type கோரிக்கை அமைப்பின் வடிவம் உள்ளடக்க வகை தலைப்பில் குறிப்பிடப்பட்டுள்ளது, இது API ஆனது தரவைப் புரிந்து கொள்ள முடியும் என்பதை உறுதி செய்கிறது (இந்த வழக்கில் பயன்பாடு/json).
try/catch பிழைகளைக் கையாள ஒத்திசைவு நடைமுறைகளில் பயன்படுத்தப்பட்டது. பிழையை ஏற்படுத்தக்கூடிய குறியீடு முயற்சித் தொகுதியில் உள்ளது, மேலும் எழும் எந்தப் பிழைகளும் கேட்ச் பிளாக்கில் கையாளப்படும்.

POST கோரிக்கைகளுக்கான JavaScript Fetch API ஐப் புரிந்துகொள்வது

வழங்கப்பட்ட ஸ்கிரிப்ட்களின் முக்கிய கவனம் ஒரு அனுப்புவதில் உள்ளது ஜாவாஸ்கிரிப்ட்களைப் பயன்படுத்தி APIக்கு முறை. பொருத்தமான தலைப்புகளை அனுப்புதல்-குறிப்பாக தி தலைப்பு, API விசை மற்றும் ஹாஷ் நற்சான்றிதழ்கள் இரண்டையும் கொண்டுள்ளது - முதன்மை சவாலாக உள்ளது. இந்தத் தரவு API ஆல் பியர் டோக்கனாக எதிர்பார்க்கப்படுகிறது, இது அங்கீகாரத்திற்காக சேவையகத்திற்கு அனுப்பப்படும். இந்த பிரபலமான அங்கீகார நுட்பத்தைப் பயன்படுத்தி கிளையன்ட் மற்றும் சர்வர் இடையே தொடர்பு கொள்ளும்போது நற்சான்றிதழ்கள் போன்ற முக்கியமான தரவு குறியாக்கம் செய்யப்பட்டு பாதுகாக்கப்படுகிறது.

HTTP கோரிக்கைகளை அனுப்பும் போது, ​​பெறும் முறை மிகவும் நெகிழ்வானது. அடிப்படை பெறுதல் அமைப்பு, முதல் ஸ்கிரிப்ட் எடுத்துக்காட்டில் பயன்படுத்தப்படுகிறது 'POST' என அமைக்கப்பட்டுள்ளது. இது API க்கு தரவு மீட்டெடுக்கப்படுவதற்குப் பதிலாக அனுப்பப்படுவதைக் குறிக்கிறது. இந்நிலையில், தி அங்கீகரிப்பு புலத்தை வைத்திருப்பதால், பொருள் இன்றியமையாதது, அங்குதான் தாங்கி டோக்கன் அனுப்பப்படுகிறது. 'உள்ளடக்க வகை: பயன்பாடு/json' என்பதும், JSON வடிவத்தில் தரவு அனுப்பப்படுவதை சேவையகத்திற்குத் தெரிவிக்க சேர்க்கப்பட்டுள்ளது. இது இல்லாத பட்சத்தில் கோரிக்கையை சர்வரின் முறையற்ற விளக்கத்தால் பிழைகள் ஏற்படலாம்.

குறியீட்டை மிகவும் புரிந்துகொள்ளக்கூடியதாகவும் சுத்தமாகவும் மாற்ற, நாங்கள் அறிமுகப்படுத்துகிறோம் இரண்டாவது ஸ்கிரிப்ட்டில் தொடரியல். இந்த முறை ஒத்திசைவற்ற கோரிக்கைகளுக்கு பதிலளிக்க உதவுகிறது. நாங்கள் பயன்படுத்துகிறோம் a ப்ளாக் ப்ளாக் ப்ளாக் மற்றும் பிடிக்க (). இது குறியீட்டைப் பராமரிப்பதை எளிதாக்குகிறது மற்றும் பிழை கையாளுதலை ஒழுங்குபடுத்துகிறது. API பதிலில் ஏதேனும் சிக்கல் இருந்தால், அதைக் கண்டறிந்து முழுமையான செய்தியைப் பதிவு செய்கிறோம். ஆரம்ப கோரிக்கையின் போது ஏற்பட்ட '500 இன்டர்னல் சர்வர் பிழை' போன்ற சரிசெய்தல் பிழைகளுக்கு இது மிகவும் உதவியாக இருக்கும்.

ஃபெட்ச் லாஜிக் மூன்றாவது தீர்வில் அதன் சொந்த செயல்பாடாக பிரிக்கப்பட்டுள்ளது, இது மிகவும் மட்டு உத்தியை ஏற்றுக்கொண்டு அதை மீண்டும் பயன்படுத்தக்கூடியதாக ஆக்குகிறது. பயன்படுத்தும் ஒரு எளிய அலகு சோதனையையும் நாங்கள் செயல்படுத்துகிறோம் பெறுதல் கோரிக்கைக்கான பதில் சரியானதா என்பதைத் தீர்மானிக்க. மாற்று API இறுதிப்புள்ளிகள் அல்லது அங்கீகரிப்பு நுட்பங்களைப் பயன்படுத்த, அதன் மட்டு கட்டமைப்பின் காரணமாக நீங்கள் செயல்பாட்டை விரைவாக மாற்றலாம். அதன் உள்ளமைக்கப்பட்ட பிழை கையாளும் திறன் காரணமாக, விண்ணப்பமானது, கோரிக்கை தோல்வியுற்றாலும் கூட நுண்ணறிவான கருத்தை வழங்க முடியும்.

API POST கோரிக்கையை அங்கீகாரத்துடன் அனுப்ப Fetch ஐப் பயன்படுத்துதல்

ஜாவாஸ்கிரிப்டை எவ்வாறு பயன்படுத்துவது என்பதை இந்த எடுத்துக்காட்டு காட்டுகிறது அங்கீகார தலைப்புகள் மற்றும் பொருத்தமான பிழை கையாளுதலுடன் POST கோரிக்கையை அனுப்பும் முறை.

// Solution 1: Simple Fetch API with Authorization
const apiKey = 'your_api_key';
const hashedCredentials = 'your_hashed_credentials';
const url = 'https://authservice.priaid.ch/login?format=json';

fetch(url, {
  method: 'POST',
  headers: {
    'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
    'Content-Type': 'application/json'
  }
})
.then(response => {
  if (!response.ok) {
    throw new Error('Network response was not ok');
  }
  return response.json();
})
.then(data => console.log('Success:', data))
.catch(error => console.error('Error:', error));

Fetch உடன் அங்கீகாரம் மற்றும் கோரிக்கை பிழைகளை கையாளுதல்

இந்த முறை பிழை கையாளுதலை மேம்படுத்துவதன் மூலமும், வினவல்கள் தோல்வியுற்றால் முழுமையான கருத்தை வழங்குவதன் மூலமும் நம்பகமான API தொடர்பை உறுதி செய்கிறது.

// Solution 2: Fetch with Detailed Error Handling
async function postData() {
  const apiKey = 'your_api_key';
  const hashedCredentials = 'your_hashed_credentials';
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    const data = await response.json();
    console.log('Success:', data);
  } catch (error) {
    console.error('Fetch Error:', error.message);
  }
}
  
postData();

பெறுதல் மற்றும் அலகு சோதனையுடன் மாடுலர் அணுகுமுறை

இந்த மட்டு அணுகுமுறையானது பெறுதல் கோரிக்கையை சரிபார்க்க ஒரு எளிய அலகு சோதனையை உள்ளடக்கியது மற்றும் தர்க்கத்தை செயல்பாடுகளாக பிரிக்கிறது.

// Solution 3: Modular Fetch Function with Unit Test
const fetchData = async (apiKey, hashedCredentials) => {
  const url = 'https://authservice.priaid.ch/login?format=json';
  
  try {
    const response = await fetch(url, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${apiKey}:${hashedCredentials}`,
        'Content-Type': 'application/json'
      }
    });
    
    if (!response.ok) {
      throw new Error(`Error ${response.status}: ${response.statusText}`);
    }
    
    return await response.json();
  } catch (error) {
    return { success: false, message: error.message };
  }
};

// Unit Test
const testFetchData = async () => {
  const result = await fetchData('your_api_key', 'your_hashed_credentials');
  console.assert(result.success !== false, 'Test Failed: ', result.message);
  console.log('Test Passed:', result);
};

testFetchData();

பெறுதல் கோரிக்கைகளில் API அங்கீகாரம் மற்றும் பிழை கையாளுதல் ஆகியவற்றை விரிவுபடுத்துகிறது

APIகளுடன் பணிபுரிய, தலைப்புகள் மற்றும் டோக்கன்கள் எவ்வாறு நிர்வகிக்கப்படுகின்றன என்பதைப் பற்றிய புரிதல் தேவைப்படுகிறது, குறிப்பாக தேவைப்படும்வர்களுக்கு . இல் பியர் டோக்கனைப் பயன்படுத்துவது வழக்கம் அங்கீகாரம் நீங்கள் செய்ய முயற்சிக்கும் API கோரிக்கைக்கான தலைப்பு. மறைகுறியாக்கப்பட்ட நற்சான்றிதழ்களை அனுப்புவதன் மூலம், இந்த நுட்பம் உங்கள் கிளையன்ட் மற்றும் API க்கு இடையே பாதுகாப்பான இணைப்பை செயல்படுத்துகிறது. உங்கள் ஹாஷ் நற்சான்றிதழ்கள் மற்றும் API விசை பொதுவாக தாங்கி டோக்கனில் சேர்க்கப்படும். நீங்கள் அனுபவித்த 500 இன்டர்னல் சர்வர் பிழை போன்ற சிக்கல்களைத் தடுக்க இது சரியான முறையில் வடிவமைக்கப்பட வேண்டும்.

POST கோரிக்கைகளைப் பயன்படுத்தி சமர்ப்பிப்பதற்கான ஒரு முக்கிய அம்சம் நீங்கள் வழங்கும் குறிப்பிட்ட வடிவம் மற்றும் தரவை API பெறும் திறன் கொண்டது என்பதை சரிபார்க்கிறது. உங்கள் கோரிக்கையின் உள்ளடக்கத்தை சர்வர் சரியாகப் படிக்கிறதா என்பதை உறுதிப்படுத்த உதவ, நீங்கள் 'உள்ளடக்க வகை: பயன்பாடு/json' ஐப் பயன்படுத்தலாம். எப்போதாவது, API களுக்கு POST கோரிக்கை அமைப்பில் கூடுதல் புலங்கள் தேவைப்படலாம், இதில் படிவத் தரவு அல்லது வினவல் அளவுருக்கள் அடங்கும், அவை முதலில் ஆவணத்தில் தெளிவாகத் தெரியவில்லை.

வெளிப்புற APIகளுடன் தொடர்பு கொள்ளும் நம்பகமான நிரல்களை உருவாக்குவதற்கு, பிழை மேலாண்மையை கவனமாகக் கருத்தில் கொள்ள வேண்டும். 404 பிழைகள் அல்லது தவறான தரவு அல்லது தவறான இறுதிப்புள்ளிகள் தொடர்பான 400 பிழைகள் போன்ற 500 பிழையுடன் கூடுதலாக உங்களுக்கு கூடுதல் சிக்கல்கள் இருக்கலாம். ஒரு பயன்பாடு பிளாக், விரிவான பிழைச் செய்திகள் மற்றும் உங்கள் குறியீட்டில் உள்ள லாக்கிங் அமைப்புகளுடன், இந்தச் சிக்கல்களைக் கண்டறிவதற்கும் தீர்வு காண்பதற்கும் உதவும். உங்கள் குறியீட்டில் கோரிக்கைகளை இணைப்பதற்கு முன், போஸ்ட்மேன் அல்லது கர்ல் போன்ற நிரல்களின் மூலம் அவற்றைச் சோதித்து, அனைத்தும் சரியாகச் செயல்படுவதை உறுதிசெய்வது நல்லது.

  1. பியர் டோக்கன் என்றால் என்ன, அது ஏன் முக்கியமானது?
  2. API தகவல்தொடர்புகளைப் பாதுகாக்கப் பயன்படுத்தப்படும் ஒரு வகையான அங்கீகார நுட்பம் தாங்கி டோக்கன் ஆகும். கோரிக்கையை யார் செய்கிறார்கள் என்பதை சர்வர் அறிந்திருப்பதை உறுதிசெய்ய, அது அனுப்பப்பட்டது உங்கள் கோரிக்கையில் தலைப்பு.
  3. நான் ஏன் 500 உள் சேவையகப் பிழையைப் பெறுகிறேன்?
  4. 500 பிழை சர்வரில் ஒரு சிக்கலைக் குறிக்கிறது. உங்கள் நிகழ்வில், இது API க்கு வழங்கப்பட்ட தவறான தரவு அல்லது தவறான வடிவமைப்பின் விளைவாக இருக்கலாம் தலைப்பு.
  5. பெறுதல் கோரிக்கையில் பிழைகளை நான் எவ்வாறு கையாள்வது?
  6. பிழைத்திருத்தத்திற்கு உதவ, a ஐப் பயன்படுத்தவும் a இல் தொகுதி ஏதேனும் தவறுகளைக் கண்டறிந்து அவற்றைக் காண்பிக்கும் செயல்பாடு .
  7. 'உள்ளடக்கம்-வகை' தலைப்பு என்ன செய்கிறது?
  8. நீங்கள் சேவையகத்திற்கு அனுப்பும் தரவு வகை ஆல் குறிக்கப்படுகிறது தலைப்பு. JSON வடிவத்தில் தரவை அனுப்ப பொதுவாகப் பயன்படுத்தப்படுகிறது.
  9. வெவ்வேறு APIகள் முழுவதும் பெறுதல் செயல்பாட்டை மீண்டும் பயன்படுத்தலாமா?
  10. ஆம், பல API களுக்கான பெறுதல் செயல்பாட்டை நீங்கள் எளிதாக மீண்டும் பயன்படுத்தலாம், அதை மாடுலர் செய்து தலைப்புகள், உடல் மற்றும் API எண்ட்பாயிண்ட் ஆகியவற்றை வாதங்களாக வழங்கலாம்.

API POST கோரிக்கைகளை அனுப்புவதற்கு JavaScript ஐ எவ்வாறு பயன்படுத்துவது என்பதை வெளிப்புற சேவைகளுடன் பணிபுரிய நீங்கள் கற்றுக் கொள்ள வேண்டும். பிழைகளைச் சரியாக நிர்வகிப்பதன் மூலம், அங்கீகரிக்கப்பட்ட கோரிக்கைகளைச் செய்வதற்கான வாய்ப்புகளை நீங்கள் கணிசமாக அதிகரிக்கலாம் தலைப்பு சேர்க்கப்பட்டுள்ளது, மற்றும் ஒழுங்கமைத்தல் முறை.

500 உள் சேவையகப் பிழை போன்ற பிழைகள் தரவு அல்லது கோரிக்கை கட்டமைப்பின் வடிவமைப்பில் உள்ள சிக்கல்களை அடிக்கடி குறிப்பிடுகின்றன. இந்த வகையான சிக்கல்களை கவனமாக தலைப்பு மேலாண்மை மற்றும் முழுமையான பிழை செய்தி பிழைத்திருத்தம் மூலம் சரிசெய்வது எளிது.

  1. அங்கீகரிப்பு தலைப்புகளைக் கையாளுதல் உட்பட, JavaScript இல் பெறுவதன் மூலம் POST கோரிக்கையை எவ்வாறு கட்டமைப்பது என்பது பற்றிய விவரங்கள்: MDN Web Docs - Fetch API
  2. POST கோரிக்கையைப் பயன்படுத்தி பியர் டோக்கன்களை எவ்வாறு அங்கீகரிப்பது என்பது குறித்த வழிகாட்டுதலை வழங்கும் API ஆவணங்கள்: Priaid அங்கீகார சேவை
  3. ஜாவாஸ்கிரிப்ட் கோரிக்கைகளுக்கான பிழை கையாளுதல் பற்றிய விரிவான ஆதாரம், 500 உள் சேவையகப் பிழை போன்ற பொதுவான சிக்கல்களில் கவனம் செலுத்துகிறது: MDN Web Docs - HTTP 500 நிலைக் குறியீடு