ടൈപ്പ്സ്ക്രിപ്റ്റ് ഉപയോഗിച്ച് ടൈപ്പ്-സേഫ് API കോളുകൾ: ഒരു സമ്പൂർണ്ണ ഗൈഡ്

ആധുനിക വെബ് ഡെവലപ്‌മെന്റിൽ, എപിഐകളുമായി (APIs) സംവദിക്കുന്നത് ഒരു അടിസ്ഥാനപരമായ കാര്യമാണ്. ടൈപ്പ്സ്ക്രിപ്റ്റ്, അതിൻ്റെ ശക്തമായ ടൈപ്പ് സിസ്റ്റം ഉപയോഗിച്ച്, ടൈപ്പ്-സേഫ് എപിഐ കോളുകൾ പ്രവർത്തനക്ഷമമാക്കി നിങ്ങളുടെ ആപ്ലിക്കേഷനുകളുടെ വിശ്വാസ്യതയും പരിപാലനക്ഷമതയും ഉറപ്പാക്കുന്നതിൽ കാര്യമായ നേട്ടം നൽകുന്നു. ഈ ഗൈഡ്, മികച്ച രീതികൾ, നൂതന സാങ്കേതിക വിദ്യകൾ, യഥാർത്ഥ ലോക ഉദാഹരണങ്ങൾ എന്നിവ ഉൾക്കൊള്ളിച്ച്, പിഴവുകളില്ലാത്തതും ശക്തവുമായ എപിഐ ഇടപെടലുകൾ നിർമ്മിക്കുന്നതിന് ടൈപ്പ്സ്ക്രിപ്റ്റിന്റെ സവിശേഷതകൾ എങ്ങനെ പ്രയോജനപ്പെടുത്താമെന്ന് വിശദീകരിക്കും.

എപിഐ കോളുകൾക്ക് ടൈപ്പ് സേഫ്റ്റി എന്തുകൊണ്ട് പ്രധാനമാണ്

എപിഐകളുമായി പ്രവർത്തിക്കുമ്പോൾ, നിങ്ങൾ പ്രധാനമായും ഒരു ബാഹ്യ ഉറവിടത്തിൽ നിന്നുള്ള ഡാറ്റയാണ് കൈകാര്യം ചെയ്യുന്നത്. ഈ ഡാറ്റ നിങ്ങൾ പ്രതീക്ഷിക്കുന്ന ഫോർമാറ്റിൽ ആയിരിക്കണമെന്നില്ല, ഇത് റൺടൈം പിശകുകളിലേക്കും അപ്രതീക്ഷിത പെരുമാറ്റങ്ങളിലേക്കും നയിച്ചേക്കാം. നിങ്ങൾ സ്വീകരിക്കുന്ന ഡാറ്റ മുൻകൂട്ടി നിശ്ചയിച്ച ഘടനയ്ക്ക് അനുസൃതമാണോ എന്ന് പരിശോധിക്കുന്നതിലൂടെ ടൈപ്പ് സേഫ്റ്റി ഒരു നിർണായക പരിരക്ഷ നൽകുന്നു, അതുവഴി ഡെവലപ്‌മെൻ്റ് പ്രക്രിയയുടെ തുടക്കത്തിൽ തന്നെ സാധ്യമായ പ്രശ്നങ്ങൾ കണ്ടെത്താൻ സഹായിക്കുന്നു.

• റൺടൈം പിശകുകൾ കുറയ്ക്കുന്നു: കംപൈൽ സമയത്ത് ടൈപ്പ് പരിശോധിക്കുന്നത്, പ്രൊഡക്ഷനിൽ എത്തുന്നതിനുമുമ്പ് ടൈപ്പുമായി ബന്ധപ്പെട്ട പിശകുകൾ കണ്ടെത്താനും പരിഹരിക്കാനും സഹായിക്കുന്നു.
• മെച്ചപ്പെട്ട കോഡ് പരിപാലനം: വ്യക്തമായ ടൈപ്പ് നിർവചനങ്ങൾ നിങ്ങളുടെ കോഡ് മനസ്സിലാക്കാനും പരിഷ്ക്കരിക്കാനും എളുപ്പമാക്കുന്നു, റീഫാക്റ്ററിംഗ് സമയത്ത് ബഗുകൾ ഉണ്ടാകാനുള്ള സാധ്യത കുറയ്ക്കുന്നു.
• മെച്ചപ്പെട്ട കോഡ് വായനാക്ഷമത: ടൈപ്പ് അനോട്ടേഷനുകൾ വിലപ്പെട്ട ഡോക്യുമെന്റേഷൻ നൽകുന്നു, ഇത് പ്രതീക്ഷിക്കുന്ന ഡാറ്റാ ഘടനകൾ മനസ്സിലാക്കാൻ ഡെവലപ്പർമാർക്ക് എളുപ്പമാക്കുന്നു.
• മികച്ച ഡെവലപ്പർ അനുഭവം: ടൈപ്പ് ചെക്കിംഗിനും ഓട്ടോകംപ്ലീഷനുമുള്ള IDE പിന്തുണ ഡെവലപ്പർ അനുഭവം ഗണ്യമായി മെച്ചപ്പെടുത്തുകയും പിശകുകളുടെ സാധ്യത കുറയ്ക്കുകയും ചെയ്യുന്നു.

നിങ്ങളുടെ ടൈപ്പ്സ്ക്രിപ്റ്റ് പ്രോജക്റ്റ് സജ്ജീകരിക്കുന്നു

എപിഐ കോളുകളിലേക്ക് കടക്കുന്നതിന് മുമ്പ്, നിങ്ങൾ ഒരു ടൈപ്പ്സ്ക്രിപ്റ്റ് പ്രോജക്റ്റ് സജ്ജീകരിച്ചിട്ടുണ്ടെന്ന് ഉറപ്പാക്കുക. നിങ്ങൾ ആദ്യം മുതൽ ആരംഭിക്കുകയാണെങ്കിൽ, ഇനിപ്പറയുന്നവ ഉപയോഗിച്ച് ഒരു പുതിയ പ്രോജക്റ്റ് ആരംഭിക്കാം:

npm init -y
npm install typescript --save-dev
tsc --init

ഇത് സ്ഥിരസ്ഥിതി ടൈപ്പ്സ്ക്രിപ്റ്റ് കംപൈലർ ഓപ്ഷനുകളുള്ള ഒരു `tsconfig.json` ഫയൽ സൃഷ്ടിക്കും. നിങ്ങളുടെ പ്രോജക്റ്റിന്റെ ആവശ്യങ്ങൾക്കനുസരിച്ച് ഈ ഓപ്ഷനുകൾ നിങ്ങൾക്ക് ഇഷ്ടാനുസൃതമാക്കാം. ഉദാഹരണത്തിന്, കർശനമായ ടൈപ്പ് പരിശോധനയ്ക്കായി സ്ട്രിക്റ്റ് മോഡ് (strict mode) പ്രവർത്തനക്ഷമമാക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം:

// tsconfig.json
{
  "compilerOptions": {
    "target": "es5",
    "module": "commonjs",
    "strict": true,
    "esModuleInterop": true,
    "skipLibCheck": true,
    "forceConsistentCasingInFileNames": true
  }
}

എപിഐ റെസ്പോൺസുകൾക്കായി ടൈപ്പുകൾ നിർവചിക്കുന്നു

ടൈപ്പ്-സേഫ് എപിഐ കോളുകൾ നേടുന്നതിനുള്ള ആദ്യപടി, എപിഐയിൽ നിന്ന് നിങ്ങൾക്ക് ലഭിക്കാൻ പ്രതീക്ഷിക്കുന്ന ഡാറ്റയുടെ ഘടനയെ പ്രതിനിധീകരിക്കുന്ന ടൈപ്പ്സ്ക്രിപ്റ്റ് ടൈപ്പുകൾ നിർവചിക്കുക എന്നതാണ്. ഇത് സാധാരണയായി `interface` അല്ലെങ്കിൽ `type` ഡിക്ലറേഷനുകൾ ഉപയോഗിച്ചാണ് ചെയ്യുന്നത്.

ഇൻ്റർഫേസുകൾ ഉപയോഗിക്കുന്നു

ഒരു ഒബ്ജക്റ്റിന്റെ രൂപം നിർവചിക്കാനുള്ള ശക്തമായ മാർഗമാണ് ഇൻ്റർഫേസുകൾ. ഉദാഹരണത്തിന്, നിങ്ങൾ ഒരു എപിഐയിൽ നിന്ന് ഉപയോക്താക്കളുടെ ഒരു ലിസ്റ്റ് ലഭ്യമാക്കുകയാണെങ്കിൽ, നിങ്ങൾക്ക് ഇതുപോലൊരു ഇൻ്റർഫേസ് നിർവചിക്കാം:

interface User {
  id: number;
  name: string;
  email: string;
  address?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  phone?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  website?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

ഒരു പ്രോപ്പർട്ടി പേരിന് ശേഷമുള്ള `?` സൂചിപ്പിക്കുന്നത് ആ പ്രോപ്പർട്ടി ഓപ്ഷണൽ ആണെന്നാണ്. ചില ഫീൽഡുകൾ ലഭ്യമല്ലാത്ത എപിഐ റെസ്പോൺസുകൾ കൈകാര്യം ചെയ്യാൻ ഇത് ഉപയോഗപ്രദമാണ്.

ടൈപ്പുകൾ ഉപയോഗിക്കുന്നു

ടൈപ്പുകൾ ഇൻ്റർഫേസുകൾക്ക് സമാനമാണ്, എന്നാൽ യൂണിയൻ ടൈപ്പുകളും ഇൻ്റർസെക്ഷൻ ടൈപ്പുകളും നിർവചിക്കാനുള്ള കഴിവ് ഉൾപ്പെടെ കൂടുതൽ വഴക്കം നൽകുന്നു. മുകളിലുള്ള ഇൻ്റർഫേസിന്റെ അതേ ഫലം ഒരു ടൈപ്പ് ഉപയോഗിച്ച് നിങ്ങൾക്ക് നേടാനാകും:

type User = {
  id: number;
  name: string;
  email: string;
  address?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  phone?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  website?: string; // ഓപ്ഷണൽ പ്രോപ്പർട്ടി
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

ലളിതമായ ഒബ്ജക്റ്റ് ഘടനകൾക്ക്, ഇൻ്റർഫേസുകളും ടൈപ്പുകളും പലപ്പോഴും പരസ്പരം മാറ്റാവുന്നവയാണ്. എന്നിരുന്നാലും, കൂടുതൽ സങ്കീർണ്ണമായ സാഹചര്യങ്ങൾ കൈകാര്യം ചെയ്യുമ്പോൾ ടൈപ്പുകൾ കൂടുതൽ ശക്തമാകും.

Axios ഉപയോഗിച്ച് എപിഐ കോളുകൾ നടത്തുന്നു

ജാവാസ്ക്രിപ്റ്റിലും ടൈപ്പ്സ്ക്രിപ്റ്റിലും എപിഐ അഭ്യർത്ഥനകൾ നടത്തുന്നതിനുള്ള ഒരു ജനപ്രിയ HTTP ക്ലയന്റാണ് Axios. ഇത് വ്യക്തവും ലളിതവുമായ ഒരു എപിഐ നൽകുന്നു, ഇത് വ്യത്യസ്ത HTTP മെത്തേഡുകൾ, അഭ്യർത്ഥന ഹെഡറുകൾ, റെസ്പോൺസ് ഡാറ്റ എന്നിവ കൈകാര്യം ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു.

Axios ഇൻസ്റ്റാൾ ചെയ്യുന്നു

npm install axios

ഒരു ടൈപ്പ്ഡ് എപിഐ കോൾ നടത്തുന്നു

Axios ഉപയോഗിച്ച് ഒരു ടൈപ്പ്-സേഫ് എപിഐ കോൾ നടത്താൻ, നിങ്ങൾക്ക് `axios.get` മെത്തേഡ് ഉപയോഗിക്കാം, ജെനറിക്സ് ഉപയോഗിച്ച് പ്രതീക്ഷിക്കുന്ന റെസ്പോൺസ് ടൈപ്പ് വ്യക്തമാക്കാം:

import axios from 'axios';

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('ഉപയോക്താക്കളെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
    throw error;
  }
}

fetchUsers().then(users => {
  users.forEach(user => {
    console.log(user.name);
  });
});

ഈ ഉദാഹരണത്തിൽ, `axios.get('...')` എന്നത് റെസ്പോൺസ് ഡാറ്റ `User` ഒബ്ജക്റ്റുകളുടെ ഒരു അറേ ആയിരിക്കുമെന്ന് ടൈപ്പ്സ്ക്രിപ്റ്റിനോട് പറയുന്നു. ഇത് റെസ്പോൺസ് ഡാറ്റയുമായി പ്രവർത്തിക്കുമ്പോൾ ടൈപ്പ് പരിശോധനയും ഓട്ടോകംപ്ലീഷനും നൽകാൻ ടൈപ്പ്സ്ക്രിപ്റ്റിനെ അനുവദിക്കുന്നു.

വ്യത്യസ്ത HTTP മെത്തേഡുകൾ കൈകാര്യം ചെയ്യുന്നു

Axios, `GET`, `POST`, `PUT`, `DELETE`, `PATCH` എന്നിവയുൾപ്പെടെ വിവിധ HTTP മെത്തേഡുകളെ പിന്തുണയ്ക്കുന്നു. വ്യത്യസ്ത തരം എപിഐ അഭ്യർത്ഥനകൾ നടത്താൻ നിങ്ങൾക്ക് അനുബന്ധ മെത്തേഡുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു പുതിയ ഉപയോക്താവിനെ സൃഷ്ടിക്കാൻ, നിങ്ങൾക്ക് `axios.post` മെത്തേഡ് ഉപയോഗിക്കാം:

async function createUser(user: Omit): Promise {
  try {
    const response = await axios.post('https://jsonplaceholder.typicode.com/users', user);
    return response.data;
  } catch (error) {
    console.error('ഉപയോക്താവിനെ സൃഷ്ടിക്കുന്നതിൽ പിശക്:', error);
    throw error;
  }
}

const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  address: '123 Main St',
  phone: '555-1234',
  website: 'example.com',
  company: {
    name: 'Example Corp',
    catchPhrase: 'Leading the way',
    bs: 'Innovative solutions'
  }
};

createUser(newUser).then(user => {
  console.log('സൃഷ്ടിച്ച ഉപയോക്താവ്:', user);
});

ഈ ഉദാഹരണത്തിൽ, `Omit` എന്നത് `id` പ്രോപ്പർട്ടി ഇല്ലാത്ത, എന്നാൽ `User`-ന് തുല്യമായ ഒരു ടൈപ്പ് സൃഷ്ടിക്കുന്നു. ഒരു പുതിയ ഉപയോക്താവിനെ സൃഷ്ടിക്കുമ്പോൾ `id` സാധാരണയായി സെർവർ സൃഷ്ടിക്കുന്നതിനാൽ ഇത് ഉപയോഗപ്രദമാണ്.

Fetch എപിഐ ഉപയോഗിക്കുന്നു

HTTP അഭ്യർത്ഥനകൾ നടത്തുന്നതിനുള്ള ഒരു ബിൽറ്റ്-ഇൻ ജാവാസ്ക്രിപ്റ്റ് എപിഐയാണ് Fetch എപിഐ. ഇത് Axios-നേക്കാൾ അടിസ്ഥാനപരമാണെങ്കിലും, ടൈപ്പ്-സേഫ് എപിഐ കോളുകൾ നേടുന്നതിന് ടൈപ്പ്സ്ക്രിപ്റ്റിനൊപ്പം ഇതും ഉപയോഗിക്കാം. നിങ്ങളുടെ ആവശ്യങ്ങൾക്ക് അനുയോജ്യമാണെങ്കിൽ ഒരു ഡിപൻഡൻസി ചേർക്കുന്നത് ഒഴിവാക്കാൻ നിങ്ങൾ ഇത് ഇഷ്ടപ്പെട്ടേക്കാം.

Fetch ഉപയോഗിച്ച് ഒരു ടൈപ്പ്ഡ് എപിഐ കോൾ നടത്തുന്നു

Fetch ഉപയോഗിച്ച് ഒരു ടൈപ്പ്-സേഫ് എപിഐ കോൾ നടത്താൻ, നിങ്ങൾക്ക് `fetch` ഫംഗ്ഷൻ ഉപയോഗിക്കാം, തുടർന്ന് റെസ്പോൺസ് JSON ആയി പാഴ്‌സ് ചെയ്യാം, പ്രതീക്ഷിക്കുന്ന റെസ്പോൺസ് ടൈപ്പ് വ്യക്തമാക്കാം:

async function fetchUsers(): Promise {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP പിശക്! സ്റ്റാറ്റസ്: ${response.status}`);
    }
    const data: User[] = await response.json();
    return data;
  } catch (error) {
    console.error('ഉപയോക്താക്കളെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
    throw error;
  }
}

fetchUsers().then(users => {
  users.forEach(user => {
    console.log(user.name);
  });
});

ഈ ഉദാഹരണത്തിൽ, `const data: User[] = await response.json();` എന്നത് റെസ്പോൺസ് ഡാറ്റ `User` ഒബ്ജക്റ്റുകളുടെ ഒരു അറേ ആയി കണക്കാക്കണമെന്ന് ടൈപ്പ്സ്ക്രിപ്റ്റിനോട് പറയുന്നു. ഇത് ടൈപ്പ് പരിശോധനയും ഓട്ടോകംപ്ലീഷനും നടത്താൻ ടൈപ്പ്സ്ക്രിപ്റ്റിനെ അനുവദിക്കുന്നു.

Fetch ഉപയോഗിച്ച് വ്യത്യസ്ത HTTP മെത്തേഡുകൾ കൈകാര്യം ചെയ്യുന്നു

Fetch ഉപയോഗിച്ച് വ്യത്യസ്ത തരം എപിഐ അഭ്യർത്ഥനകൾ നടത്താൻ, നിങ്ങൾക്ക് `method`, `body` തുടങ്ങിയ വ്യത്യസ്ത ഓപ്ഷനുകളുള്ള `fetch` ഫംഗ്ഷൻ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു പുതിയ ഉപയോക്താവിനെ സൃഷ്ടിക്കാൻ, നിങ്ങൾക്ക് ഇനിപ്പറയുന്ന കോഡ് ഉപയോഗിക്കാം:

async function createUser(user: Omit): Promise {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users', {
      method: 'POST',
      headers: {
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(user)
    });
    if (!response.ok) {
      throw new Error(`HTTP പിശക്! സ്റ്റാറ്റസ്: ${response.status}`);
    }
    const data: User = await response.json();
    return data;
  } catch (error) {
    console.error('ഉപയോക്താവിനെ സൃഷ്ടിക്കുന്നതിൽ പിശക്:', error);
    throw error;
  }
}

const newUser = {
  name: 'John Doe',
  email: 'john.doe@example.com',
  address: '123 Main St',
  phone: '555-1234',
  website: 'example.com',
  company: {
    name: 'Example Corp',
    catchPhrase: 'Leading the way',
    bs: 'Innovative solutions'
  }
};

createUser(newUser).then(user => {
  console.log('സൃഷ്ടിച്ച ഉപയോക്താവ്:', user);
});

എപിഐ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നു

എപിഐ കോളുകളുടെ ഒരു നിർണായക വശമാണ് പിശകുകൾ കൈകാര്യം ചെയ്യൽ. നെറ്റ്‌വർക്ക് കണക്റ്റിവിറ്റി പ്രശ്നങ്ങൾ, സെർവർ പിശകുകൾ, അസാധുവായ അഭ്യർത്ഥനകൾ എന്നിവയുൾപ്പെടെ പല കാരണങ്ങളാൽ എപിഐകൾ പരാജയപ്പെടാം. നിങ്ങളുടെ ആപ്ലിക്കേഷൻ ക്രാഷ് ആകുന്നതോ അപ്രതീക്ഷിതമായി പെരുമാറുന്നതോ തടയാൻ ഈ പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യേണ്ടത് അത്യാവശ്യമാണ്.

Try-Catch ബ്ലോക്കുകൾ ഉപയോഗിക്കുന്നു

അസിൻക്രണസ് കോഡിലെ പിശകുകൾ കൈകാര്യം ചെയ്യുന്നതിനുള്ള ഏറ്റവും സാധാരണമായ മാർഗ്ഗം ട്രൈ-ക്യാച്ച് (try-catch) ബ്ലോക്കുകൾ ഉപയോഗിക്കുക എന്നതാണ്. എപിഐ കോളിനിടെ ഉണ്ടാകുന്ന ഏതൊരു എക്സെപ്ഷനും പിടിക്കാനും അവയെ ഉചിതമായി കൈകാര്യം ചെയ്യാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('ഉപയോക്താക്കളെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
    // പിശക് കൈകാര്യം ചെയ്യുക, ഉദാഹരണത്തിന്, ഉപയോക്താവിന് ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക
    throw error; // കോളിംഗ് കോഡിനും ഇത് കൈകാര്യം ചെയ്യാൻ അനുവദിക്കുന്നതിന് പിശക് വീണ്ടും എറിയുക
  }
}

നിർദ്ദിഷ്ട എറർ കോഡുകൾ കൈകാര്യം ചെയ്യുന്നു

എപിഐകൾ പലപ്പോഴും സംഭവിച്ച പിശകിന്റെ തരം സൂചിപ്പിക്കാൻ നിർദ്ദിഷ്ട എറർ കോഡുകൾ നൽകുന്നു. കൂടുതൽ വ്യക്തമായ പിശക് കൈകാര്യം ചെയ്യാൻ നിങ്ങൾക്ക് ഈ എറർ കോഡുകൾ ഉപയോഗിക്കാം. ഉദാഹരണത്തിന്, ഒരു 404 Not Found പിശകിന്, 500 Internal Server Error-ൽ നിന്ന് വ്യത്യസ്തമായ ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കാൻ നിങ്ങൾ ആഗ്രഹിച്ചേക്കാം.

async function fetchUser(id: number): Promise {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    return response.data;
  } catch (error: any) {
    if (error.response?.status === 404) {
      console.log(`ഐഡി ${id} ഉള്ള ഉപയോക്താവിനെ കണ്ടെത്തിയില്ല.`);
      return null; // അല്ലെങ്കിൽ ഒരു കസ്റ്റം പിശക് എറിയുക
    } else {
      console.error('ഉപയോക്താവിനെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
      throw error;
    }
  }
}

fetchUser(123).then(user => {
  if (user) {
    console.log('ഉപയോക്താവ്:', user);
  } else {
    console.log('ഉപയോക്താവിനെ കണ്ടെത്തിയില്ല.');
  }
});

കസ്റ്റം എറർ ടൈപ്പുകൾ സൃഷ്ടിക്കുന്നു

കൂടുതൽ സങ്കീർണ്ണമായ പിശക് കൈകാര്യം ചെയ്യുന്ന സാഹചര്യങ്ങൾക്കായി, നിങ്ങൾക്ക് വ്യത്യസ്ത തരം എപിഐ പിശകുകളെ പ്രതിനിധീകരിക്കാൻ കസ്റ്റം എറർ ടൈപ്പുകൾ സൃഷ്ടിക്കാൻ കഴിയും. ഇത് കൂടുതൽ ഘടനാപരമായ പിശക് വിവരങ്ങൾ നൽകാനും പിശകുകൾ കൂടുതൽ ഫലപ്രദമായി കൈകാര്യം ചെയ്യാനും നിങ്ങളെ അനുവദിക്കുന്നു.

class ApiError extends Error {
  constructor(public statusCode: number, message: string) {
    super(message);
    this.name = 'ApiError';
  }
}

async function fetchUser(id: number): Promise {
  try {
    const response = await axios.get(`https://jsonplaceholder.typicode.com/users/${id}`);
    return response.data;
  } catch (error: any) {
    if (error.response?.status === 404) {
      throw new ApiError(404, `ഐഡി ${id} ഉള്ള ഉപയോക്താവിനെ കണ്ടെത്തിയില്ല.`);
    } else {
      console.error('ഉപയോക്താവിനെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
      throw new ApiError(500, 'ഇന്റേണൽ സെർവർ പിശക്'); //അല്ലെങ്കിൽ അനുയോജ്യമായ മറ്റേതെങ്കിലും സ്റ്റാറ്റസ് കോഡ്
    }
  }
}

fetchUser(123).catch(error => {
  if (error instanceof ApiError) {
    console.error(`എപിഐ പിശക്: ${error.statusCode} - ${error.message}`);
  } else {
    console.error('അപ്രതീക്ഷിതമായ ഒരു പിശക് സംഭവിച്ചു:', error);
  }
});

ഡാറ്റാ വാലിഡേഷൻ

ടൈപ്പ്സ്ക്രിപ്റ്റിന്റെ ടൈപ്പ് സിസ്റ്റം ഉപയോഗിക്കുമ്പോൾ പോലും, നിങ്ങൾ എപിഐകളിൽ നിന്ന് സ്വീകരിക്കുന്ന ഡാറ്റ റൺടൈമിൽ സാധൂകരിക്കുന്നത് നിർണായകമാണ്. എപിഐകൾ അറിയിപ്പ് കൂടാതെ അവയുടെ റെസ്പോൺസ് ഘടന മാറ്റിയേക്കാം, നിങ്ങളുടെ ടൈപ്പ്സ്ക്രിപ്റ്റ് ടൈപ്പുകൾ എപിഐയുടെ യഥാർത്ഥ റെസ്പോൺസുമായി എല്ലായ്പ്പോഴും തികച്ചും സമന്വയിപ്പിക്കണമെന്നില്ല.

റൺടൈം വാലിഡേഷനായി Zod ഉപയോഗിക്കുന്നു

റൺടൈം ഡാറ്റാ വാലിഡേഷനുള്ള ഒരു ജനപ്രിയ ടൈപ്പ്സ്ക്രിപ്റ്റ് ലൈബ്രറിയാണ് Zod. നിങ്ങളുടെ ഡാറ്റയുടെ പ്രതീക്ഷിക്കുന്ന ഘടന വിവരിക്കുന്ന സ്കീമകൾ നിർവചിക്കാനും തുടർന്ന് റൺടൈമിൽ ആ സ്കീമകൾക്കെതിരെ ഡാറ്റ സാധൂകരിക്കാനും ഇത് നിങ്ങളെ അനുവദിക്കുന്നു.

Zod ഇൻസ്റ്റാൾ ചെയ്യുന്നു

npm install zod

Zod ഉപയോഗിച്ച് എപിഐ റെസ്പോൺസുകൾ സാധൂകരിക്കുന്നു

Zod ഉപയോഗിച്ച് എപിഐ റെസ്പോൺസുകൾ സാധൂകരിക്കുന്നതിന്, നിങ്ങളുടെ ടൈപ്പ്സ്ക്രിപ്റ്റ് ടൈപ്പിന് അനുയോജ്യമായ ഒരു Zod സ്കീമ നിർവചിക്കുകയും തുടർന്ന് ഡാറ്റ സാധൂകരിക്കുന്നതിന് `parse` മെത്തേഡ് ഉപയോഗിക്കുകയും ചെയ്യാം.

import { z } from 'zod';

const userSchema = z.object({
  id: z.number(),
  name: z.string(),
  email: z.string().email(),
  address: z.string().optional(),
  phone: z.string().optional(),
  website: z.string().optional(),
  company: z.object({
    name: z.string(),
    catchPhrase: z.string(),
    bs: z.string(),
  }).optional(),
});

type User = z.infer;

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    const data = z.array(userSchema).parse(response.data);
    return data;
  } catch (error) {
    console.error('ഉപയോക്താക്കളെ ലഭ്യമാക്കുന്നതിൽ പിശക്:', error);
    throw error;
  }
}

ഈ ഉദാഹരണത്തിൽ, `z.array(userSchema).parse(response.data)` എന്നത് റെസ്പോൺസ് ഡാറ്റ `userSchema`-യ്ക്ക് അനുസൃതമായ ഒബ്ജക്റ്റുകളുടെ ഒരു അറേ ആണെന്ന് സാധൂകരിക്കുന്നു. ഡാറ്റ സ്കീമയ്ക്ക് അനുസൃതമല്ലെങ്കിൽ, Zod ഒരു പിശക് പുറപ്പെടുവിക്കും, അത് നിങ്ങൾക്ക് ഉചിതമായി കൈകാര്യം ചെയ്യാൻ കഴിയും.

നൂതന സാങ്കേതിക വിദ്യകൾ

പുനരുപയോഗിക്കാവുന്ന എപിഐ ഫംഗ്ഷനുകൾക്കായി ജെനറിക്സ് ഉപയോഗിക്കുന്നു

വ്യത്യസ്ത തരം ഡാറ്റ കൈകാര്യം ചെയ്യാൻ കഴിയുന്ന പുനരുപയോഗിക്കാവുന്ന എപിഐ ഫംഗ്ഷനുകൾ എഴുതാൻ ജെനറിക്സ് നിങ്ങളെ അനുവദിക്കുന്നു. ഉദാഹരണത്തിന്, ഏത് എപിഐ എൻഡ്‌പോയിന്റിൽ നിന്നും ഡാറ്റ ലഭ്യമാക്കാനും ശരിയായ ടൈപ്പിൽ അത് തിരികെ നൽകാനും കഴിയുന്ന ഒരു ജെനറിക് `fetchData` ഫംഗ്ഷൻ നിങ്ങൾക്ക് സൃഷ്ടിക്കാൻ കഴിയും.

async function fetchData(url: string): Promise {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error(`${url} എന്നതിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നതിൽ പിശക്:`, error);
    throw error;
  }
}

// ഉപയോഗം
fetchData('https://jsonplaceholder.typicode.com/users').then(users => {
  console.log('ഉപയോക്താക്കൾ:', users);
});

fetchData<{ title: string; body: string }>('https://jsonplaceholder.typicode.com/todos/1').then(todo => {
    console.log('Todo', todo)
});

ഗ്ലോബൽ എറർ ഹാൻഡ്‌ലിംഗിനായി ഇന്റർസെപ്റ്ററുകൾ ഉപയോഗിക്കുന്നു

നിങ്ങളുടെ കോഡ് കൈകാര്യം ചെയ്യുന്നതിനുമുമ്പ് അഭ്യർത്ഥനകളെയും പ്രതികരണങ്ങളെയും തടയാൻ അനുവദിക്കുന്ന ഇന്റർസെപ്റ്ററുകൾ Axios നൽകുന്നു. പിശകുകൾ ലോഗ് ചെയ്യുകയോ ഉപയോക്താവിന് പിശക് സന്ദേശങ്ങൾ പ്രദർശിപ്പിക്കുകയോ പോലുള്ള ഗ്ലോബൽ എറർ ഹാൻഡ്‌ലിംഗ് നടപ്പിലാക്കാൻ നിങ്ങൾക്ക് ഇന്റർസെപ്റ്ററുകൾ ഉപയോഗിക്കാം.

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('ഗ്ലോബൽ എറർ ഹാൻഡ്‌ലർ:', error);
    // ഉപയോക്താവിന് ഒരു പിശക് സന്ദേശം പ്രദർശിപ്പിക്കുക
    return Promise.reject(error);
  }
);

എപിഐ URL-കൾക്കായി എൻവയോൺമെൻ്റ് വേരിയബിളുകൾ ഉപയോഗിക്കുന്നു

നിങ്ങളുടെ കോഡിൽ എപിഐ URL-കൾ ഹാർഡ്‌കോഡ് ചെയ്യുന്നത് ഒഴിവാക്കാൻ, URL-കൾ സംഭരിക്കുന്നതിന് നിങ്ങൾക്ക് എൻവയോൺമെൻ്റ് വേരിയബിളുകൾ ഉപയോഗിക്കാം. ഇത് ഡെവലപ്‌മെന്റ്, സ്റ്റേജിംഗ്, പ്രൊഡക്ഷൻ പോലുള്ള വ്യത്യസ്ത എൻവയോൺമെൻ്റുകൾക്കായി നിങ്ങളുടെ ആപ്ലിക്കേഷൻ കോൺഫിഗർ ചെയ്യുന്നത് എളുപ്പമാക്കുന്നു.

`.env` ഫയലും `dotenv` പാക്കേജും ഉപയോഗിച്ചുള്ള ഉദാഹരണം.

// .env
API_URL=https://api.example.com

// dotenv ഇൻസ്റ്റാൾ ചെയ്യുക
npm install dotenv

// dotenv ഇമ്പോർട്ടുചെയ്ത് കോൺഫിഗർ ചെയ്യുക
import * as dotenv from 'dotenv'
dotenv.config()

const apiUrl = process.env.API_URL || 'http://localhost:3000'; // ഒരു ഡിഫോൾട്ട് മൂല്യം നൽകുക

async function fetchData(endpoint: string): Promise {
  try {
    const response = await axios.get(`${apiUrl}/${endpoint}`);
    return response.data;
  } catch (error) {
    console.error(`${apiUrl}/${endpoint} എന്നതിൽ നിന്ന് ഡാറ്റ ലഭ്യമാക്കുന്നതിൽ പിശക്:`, error);
    throw error;
  }
}

ഉപസംഹാരം

ശക്തവും, പരിപാലിക്കാൻ എളുപ്പമുള്ളതും, പിശകുകളില്ലാത്തതുമായ വെബ് ആപ്ലിക്കേഷനുകൾ നിർമ്മിക്കുന്നതിന് ടൈപ്പ്-സേഫ് എപിഐ കോളുകൾ അത്യാവശ്യമാണ്. എപിഐ റെസ്പോൺസുകൾക്കായി ടൈപ്പുകൾ നിർവചിക്കാനും, റൺടൈമിൽ ഡാറ്റ സാധൂകരിക്കാനും, പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യാനും ടൈപ്പ്സ്ക്രിപ്റ്റ് ശക്തമായ സവിശേഷതകൾ നൽകുന്നു. ഈ ഗൈഡിൽ പ്രതിപാദിച്ചിട്ടുള്ള മികച്ച രീതികളും സാങ്കേതിക വിദ്യകളും പിന്തുടരുന്നതിലൂടെ, നിങ്ങളുടെ എപിഐ ഇടപെടലുകളുടെ ഗുണനിലവാരവും വിശ്വാസ്യതയും ഗണ്യമായി മെച്ചപ്പെടുത്താൻ കഴിയും.

ടൈപ്പ്സ്ക്രിപ്റ്റും Axios, Zod പോലുള്ള ലൈബ്രറികളും ഉപയോഗിക്കുന്നതിലൂടെ, നിങ്ങളുടെ എപിഐ കോളുകൾ ടൈപ്പ്-സേഫ് ആണെന്നും, നിങ്ങളുടെ ഡാറ്റ സാധൂകരിക്കപ്പെട്ടതാണെന്നും, നിങ്ങളുടെ പിശകുകൾ ശരിയായി കൈകാര്യം ചെയ്യപ്പെടുന്നുവെന്നും ഉറപ്പാക്കാൻ കഴിയും. ഇത് കൂടുതൽ ശക്തവും പരിപാലിക്കാൻ എളുപ്പമുള്ളതുമായ ആപ്ലിക്കേഷനുകളിലേക്ക് നയിക്കും.

ടൈപ്പ്സ്ക്രിപ്റ്റിന്റെ ടൈപ്പ് സിസ്റ്റം ഉപയോഗിക്കുമ്പോൾ പോലും, നിങ്ങളുടെ ഡാറ്റ എല്ലായ്പ്പോഴും റൺടൈമിൽ സാധൂകരിക്കാൻ ഓർമ്മിക്കുക. എപിഐകൾ മാറിയേക്കാം, നിങ്ങളുടെ ടൈപ്പുകൾ എപിഐയുടെ യഥാർത്ഥ റെസ്പോൺസുമായി എല്ലായ്പ്പോഴും തികച്ചും സമന്വയിപ്പിക്കണമെന്നില്ല. നിങ്ങളുടെ ഡാറ്റ റൺടൈമിൽ സാധൂകരിക്കുന്നതിലൂടെ, നിങ്ങളുടെ ആപ്ലിക്കേഷനിൽ പ്രശ്നങ്ങൾ ഉണ്ടാക്കുന്നതിന് മുമ്പ് സാധ്യമായ പ്രശ്നങ്ങൾ കണ്ടെത്താൻ കഴിയും.

ഹാപ്പി കോഡിംഗ്!