ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ ಮತ್ತು ದೋಷ-ಮುಕ್ತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗಾಗಿ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳನ್ನು ಕರಗತ ಮಾಡಿಕೊಳ್ಳಿ. ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ಸುಧಾರಿತ ತಂತ್ರಗಳನ್ನು ಕಲಿಯಿರಿ.
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳು: ಒಂದು ಸಮಗ್ರ ಮಾರ್ಗದರ್ಶಿ
ಆಧುನಿಕ ವೆಬ್ ಡೆವಲಪ್ಮೆಂಟ್ನಲ್ಲಿ, APIಗಳೊಂದಿಗೆ ಸಂವಹನ ನಡೆಸುವುದು ಒಂದು ಮೂಲಭೂತ ಕಾರ್ಯವಾಗಿದೆ. ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್, ತನ್ನ ಶಕ್ತಿಯುತ ಟೈಪ್ ಸಿಸ್ಟಮ್ನೊಂದಿಗೆ, ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳನ್ನು ಸಕ್ರಿಯಗೊಳಿಸುವ ಮೂಲಕ ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ಗಳ ವಿಶ್ವಾಸಾರ್ಹತೆ ಮತ್ತು ನಿರ್ವಹಣೆಯನ್ನು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳುವಲ್ಲಿ ಗಮನಾರ್ಹ ಪ್ರಯೋಜನವನ್ನು ನೀಡುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯು ದೃಢವಾದ ಮತ್ತು ದೋಷ-ಮುಕ್ತ API ಸಂವಹನಗಳನ್ನು ನಿರ್ಮಿಸಲು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಹೇಗೆ ಬಳಸಿಕೊಳ್ಳುವುದು ಎಂಬುದನ್ನು ವಿವರಿಸುತ್ತದೆ, ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು, ಸುಧಾರಿತ ತಂತ್ರಗಳು ಮತ್ತು ನೈಜ-ಪ್ರಪಂಚದ ಉದಾಹರಣೆಗಳನ್ನು ಒಳಗೊಂಡಿದೆ.
API ಕರೆಗಳಿಗೆ ಟೈಪ್ ಸೇಫ್ಟಿ ಏಕೆ ಮುಖ್ಯ?
API ಗಳೊಂದಿಗೆ ಕೆಲಸ ಮಾಡುವಾಗ, ನೀವು ಮೂಲಭೂತವಾಗಿ ಬಾಹ್ಯ ಮೂಲದಿಂದ ಬರುವ ಡೇಟಾದೊಂದಿಗೆ ವ್ಯವಹರಿಸುತ್ತೀರಿ. ಈ ಡೇಟಾವು ನೀವು ನಿರೀಕ್ಷಿಸುವ ಸ್ವರೂಪದಲ್ಲಿ ಯಾವಾಗಲೂ ಇರಬಹುದು, ಇದು ರನ್ಟೈಮ್ ದೋಷಗಳು ಮತ್ತು ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಗೆ ಕಾರಣವಾಗುತ್ತದೆ. ನೀವು ಸ್ವೀಕರಿಸುವ ಡೇಟಾವು ಪೂರ್ವನಿರ್ಧರಿತ ರಚನೆಗೆ ಅನುಗುಣವಾಗಿದೆಯೇ ಎಂದು ಪರಿಶೀಲಿಸುವ ಮೂಲಕ, ಅಭಿವೃದ್ಧಿ ಪ್ರಕ್ರಿಯೆಯ ಆರಂಭದಲ್ಲಿ ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚುವ ಮೂಲಕ ಟೈಪ್ ಸೇಫ್ಟಿಯು ಒಂದು ನಿರ್ಣಾಯಕ ರಕ್ಷಣೆಯ ಪದರವನ್ನು ಒದಗಿಸುತ್ತದೆ.
- ಕಡಿಮೆಯಾದ ರನ್ಟೈಮ್ ದೋಷಗಳು: ಕಂಪೈಲ್ ಸಮಯದಲ್ಲಿ ಟೈಪ್ ಚೆಕಿಂಗ್, ಉತ್ಪಾದನೆಯನ್ನು ತಲುಪುವ ಮೊದಲು ಟೈಪ್-ಸಂಬಂಧಿತ ದೋಷಗಳನ್ನು ಗುರುತಿಸಲು ಮತ್ತು ಸರಿಪಡಿಸಲು ಸಹಾಯ ಮಾಡುತ್ತದೆ.
- ಸುಧಾರಿತ ಕೋಡ್ ನಿರ್ವಹಣೆ: ಸ್ಪಷ್ಟವಾದ ಟೈಪ್ ವ್ಯಾಖ್ಯಾನಗಳು ನಿಮ್ಮ ಕೋಡ್ ಅನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಮತ್ತು ಮಾರ್ಪಡಿಸಲು ಸುಲಭಗೊಳಿಸುತ್ತವೆ, ರಿಫ್ಯಾಕ್ಟರಿಂಗ್ ಸಮಯದಲ್ಲಿ ಬಗ್ಗಳನ್ನು ಪರಿಚಯಿಸುವ ಅಪಾಯವನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
- ಹೆಚ್ಚಿದ ಕೋಡ್ ಓದುವಿಕೆ: ಟೈಪ್ ಟಿಪ್ಪಣಿಗಳು ಮೌಲ್ಯಯುತವಾದ ದಸ್ತಾವೇಜನ್ನು ಒದಗಿಸುತ್ತವೆ, ಇದು ಡೆವಲಪರ್ಗಳಿಗೆ ನಿರೀಕ್ಷಿತ ಡೇಟಾ ರಚನೆಗಳನ್ನು ಅರ್ಥಮಾಡಿಕೊಳ್ಳಲು ಸುಲಭಗೊಳಿಸುತ್ತದೆ.
- ಉತ್ತಮ ಡೆವಲಪರ್ ಅನುಭವ: ಟೈಪ್ ಚೆಕಿಂಗ್ ಮತ್ತು ಸ್ವಯಂಪೂರ್ಣತೆಗಾಗಿ IDE ಬೆಂಬಲವು ಡೆವಲಪರ್ ಅನುಭವವನ್ನು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸುತ್ತದೆ ಮತ್ತು ದೋಷಗಳ ಸಾಧ್ಯತೆಯನ್ನು ಕಡಿಮೆ ಮಾಡುತ್ತದೆ.
ನಿಮ್ಮ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿಸಲಾಗುತ್ತಿದೆ
API ಕರೆಗಳಿಗೆ ಧುಮುಕುವ ಮೊದಲು, ನೀವು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಹೊಂದಿಸಿದ್ದೀರಿ ಎಂದು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಿ. ನೀವು ಮೊದಲಿನಿಂದ ಪ್ರಾರಂಭಿಸುತ್ತಿದ್ದರೆ, ನೀವು ಇದನ್ನು ಬಳಸಿಕೊಂಡು ಹೊಸ ಪ್ರಾಜೆಕ್ಟ್ ಅನ್ನು ಪ್ರಾರಂಭಿಸಬಹುದು:
npm init -y
npm install typescript --save-dev
tsc --init
ಇದು ಡೀಫಾಲ್ಟ್ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಕಂಪೈಲರ್ ಆಯ್ಕೆಗಳೊಂದಿಗೆ `tsconfig.json` ಫೈಲ್ ಅನ್ನು ರಚಿಸುತ್ತದೆ. ನಿಮ್ಮ ಪ್ರಾಜೆಕ್ಟ್ನ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದುವಂತೆ ನೀವು ಈ ಆಯ್ಕೆಗಳನ್ನು ಕಸ್ಟಮೈಸ್ ಮಾಡಬಹುದು. ಉದಾಹರಣೆಗೆ, ಕಟ್ಟುನಿಟ್ಟಾದ ಟೈಪ್ ಚೆಕಿಂಗ್ಗಾಗಿ ನೀವು ಸ್ಟ್ರಿಕ್ಟ್ ಮೋಡ್ ಅನ್ನು ಸಕ್ರಿಯಗೊಳಿಸಲು ಬಯಸಬಹುದು:
// tsconfig.json
{
"compilerOptions": {
"target": "es5",
"module": "commonjs",
"strict": true,
"esModuleInterop": true,
"skipLibCheck": true,
"forceConsistentCasingInFileNames": true
}
}
API ಪ್ರತಿಕ್ರಿಯೆಗಳಿಗಾಗಿ ಟೈಪ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು
ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳನ್ನು ಸಾಧಿಸುವ ಮೊದಲ ಹೆಜ್ಜೆ ಎಂದರೆ API ಯಿಂದ ನೀವು ಸ್ವೀಕರಿಸಲು ನಿರೀಕ್ಷಿಸುವ ಡೇಟಾದ ರಚನೆಯನ್ನು ಪ್ರತಿನಿಧಿಸುವ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಟೈಪ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವುದು. ಇದನ್ನು ಸಾಮಾನ್ಯವಾಗಿ `interface` ಅಥವಾ `type` ಡಿಕ್ಲರೇಶನ್ಗಳನ್ನು ಬಳಸಿ ಮಾಡಲಾಗುತ್ತದೆ.
ಇಂಟರ್ಫೇಸ್ಗಳನ್ನು ಬಳಸುವುದು
ಇಂಟರ್ಫೇಸ್ಗಳು ಒಂದು ಆಬ್ಜೆಕ್ಟ್ನ ಆಕಾರವನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಒಂದು ಶಕ್ತಿಯುತ ಮಾರ್ಗವಾಗಿದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು API ಯಿಂದ ಬಳಕೆದಾರರ ಪಟ್ಟಿಯನ್ನು ಪಡೆಯುತ್ತಿದ್ದರೆ, ನೀವು ಈ ರೀತಿಯ ಇಂಟರ್ಫೇಸ್ ಅನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಬಹುದು:
interface User {
id: number;
name: string;
email: string;
address?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
phone?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
website?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
company?: {
name: string;
catchPhrase: string;
bs: string;
};
}
ಪ್ರಾಪರ್ಟಿ ಹೆಸರಿನ ನಂತರ `?` ಚಿಹ್ನೆಯು ಪ್ರಾಪರ್ಟಿ ಐಚ್ಛಿಕವಾಗಿದೆ ಎಂದು ಸೂಚಿಸುತ್ತದೆ. ಕೆಲವು ಫೀಲ್ಡ್ಗಳು ಕಾಣೆಯಾಗಿರಬಹುದಾದ API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಇದು ಉಪಯುಕ್ತವಾಗಿದೆ.
ಟೈಪ್ಗಳನ್ನು ಬಳಸುವುದು
ಟೈಪ್ಗಳು ಇಂಟರ್ಫೇಸ್ಗಳಂತೆಯೇ ಇರುತ್ತವೆ ಆದರೆ ಯೂನಿಯನ್ ಟೈಪ್ಗಳು ಮತ್ತು ಇಂಟರ್ಸೆಕ್ಷನ್ ಟೈಪ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸುವ ಸಾಮರ್ಥ್ಯ ಸೇರಿದಂತೆ ಹೆಚ್ಚಿನ ನಮ್ಯತೆಯನ್ನು ನೀಡುತ್ತವೆ. ಮೇಲಿನ ಇಂಟರ್ಫೇಸ್ನಂತೆಯೇ ಅದೇ ಫಲಿತಾಂಶವನ್ನು ನೀವು ಟೈಪ್ ಬಳಸಿ ಸಾಧಿಸಬಹುದು:
type User = {
id: number;
name: string;
email: string;
address?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
phone?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
website?: string; // ಐಚ್ಛಿಕ ಪ್ರಾಪರ್ಟಿ
company?: {
name: string;
catchPhrase: string;
bs: string;
};
};
ಸರಳ ಆಬ್ಜೆಕ್ಟ್ ರಚನೆಗಳಿಗಾಗಿ, ಇಂಟರ್ಫೇಸ್ಗಳು ಮತ್ತು ಟೈಪ್ಗಳು ಸಾಮಾನ್ಯವಾಗಿ ಪರಸ್ಪರ ಬದಲಾಯಿಸಲ್ಪಡುತ್ತವೆ. ಆದಾಗ್ಯೂ, ಹೆಚ್ಚು ಸಂಕೀರ್ಣ ಸನ್ನಿವೇಶಗಳೊಂದಿಗೆ ವ್ಯವಹರಿಸುವಾಗ ಟೈಪ್ಗಳು ಹೆಚ್ಚು ಶಕ್ತಿಶಾಲಿಯಾಗುತ್ತವೆ.
Axios ನೊಂದಿಗೆ API ಕರೆಗಳನ್ನು ಮಾಡುವುದು
ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನಲ್ಲಿ API ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು Axios ಒಂದು ಜನಪ್ರಿಯ HTTP ಕ್ಲೈಂಟ್ ಆಗಿದೆ. ಇದು ಸ್ವಚ್ಛ ಮತ್ತು ಅರ್ಥಗರ್ಭಿತ API ಅನ್ನು ಒದಗಿಸುತ್ತದೆ, ಇದು ವಿಭಿನ್ನ HTTP ವಿಧಾನಗಳು, ವಿನಂತಿ ಹೆಡರ್ಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸಲು ಸುಲಭವಾಗಿಸುತ್ತದೆ.
Axios ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ
npm install axios
ಟೈಪ್ ಮಾಡಿದ API ಕರೆಯನ್ನು ಮಾಡುವುದು
Axios ನೊಂದಿಗೆ ಟೈಪ್-ಸೇಫ್ API ಕರೆಯನ್ನು ಮಾಡಲು, ನೀವು `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
ವಿಭಿನ್ನ HTTP ವಿಧಾನಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
Axios `GET`, `POST`, `PUT`, `DELETE`, ಮತ್ತು `PATCH` ಸೇರಿದಂತೆ ವಿವಿಧ HTTP ವಿಧಾನಗಳನ್ನು ಬೆಂಬಲಿಸುತ್ತದೆ. ವಿವಿಧ ರೀತಿಯ API ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು ನೀವು ಅನುಗುಣವಾದ ವಿಧಾನಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, ಹೊಸ ಬಳಕೆದಾರರನ್ನು ರಚಿಸಲು, ನೀವು `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
ಫೆಚ್ API ಬಳಸುವುದು
ಫೆಚ್ API HTTP ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು ಒಂದು ಅಂತರ್ನಿರ್ಮಿತ ಜಾವಾಸ್ಕ್ರಿಪ್ಟ್ API ಆಗಿದೆ. ಇದು Axios ಗಿಂತ ಹೆಚ್ಚು ಮೂಲಭೂತವಾಗಿದ್ದರೂ, ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳನ್ನು ಸಾಧಿಸಲು ಇದನ್ನು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನೊಂದಿಗೆ ಸಹ ಬಳಸಬಹುದು. ನಿಮ್ಮ ಅಗತ್ಯಗಳಿಗೆ ಸರಿಹೊಂದಿದರೆ ಅವಲಂಬನೆಯನ್ನು ಸೇರಿಸುವುದನ್ನು ತಪ್ಪಿಸಲು ನೀವು ಇದನ್ನು ಆದ್ಯತೆ ನೀಡಬಹುದು.
ಫೆಚ್ನೊಂದಿಗೆ ಟೈಪ್ ಮಾಡಿದ API ಕರೆಯನ್ನು ಮಾಡುವುದು
ಫೆಚ್ನೊಂದಿಗೆ ಟೈಪ್-ಸೇಫ್ API ಕರೆಯನ್ನು ಮಾಡಲು, ನೀವು `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` ಆಬ್ಜೆಕ್ಟ್ಗಳ ಅರೇ ಎಂದು ಪರಿಗಣಿಸಬೇಕು ಎಂದು ಹೇಳುತ್ತದೆ. ಇದು ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ಗೆ ಟೈಪ್ ಚೆಕಿಂಗ್ ಮತ್ತು ಸ್ವಯಂಪೂರ್ಣತೆಯನ್ನು ನಿರ್ವಹಿಸಲು ಅನುಮತಿಸುತ್ತದೆ.
ಫೆಚ್ನೊಂದಿಗೆ ವಿಭಿನ್ನ HTTP ವಿಧಾನಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ಫೆಚ್ನೊಂದಿಗೆ ವಿವಿಧ ರೀತಿಯ API ವಿನಂತಿಗಳನ್ನು ಮಾಡಲು, ನೀವು `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);
});
API ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
ದೋಷ ನಿರ್ವಹಣೆ API ಕರೆಗಳ ಒಂದು ನಿರ್ಣಾಯಕ ಅಂಶವಾಗಿದೆ. ನೆಟ್ವರ್ಕ್ ಸಂಪರ್ಕ ಸಮಸ್ಯೆಗಳು, ಸರ್ವರ್ ದೋಷಗಳು ಮತ್ತು ಅಮಾನ್ಯ ವಿನಂತಿಗಳು ಸೇರಿದಂತೆ ಹಲವು ಕಾರಣಗಳಿಗಾಗಿ APIಗಳು ವಿಫಲವಾಗಬಹುದು. ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ ಕ್ರ್ಯಾಶ್ ಆಗುವುದನ್ನು ಅಥವಾ ಅನಿರೀಕ್ಷಿತ ನಡವಳಿಕೆಯನ್ನು ಪ್ರದರ್ಶಿಸುವುದನ್ನು ತಡೆಯಲು ಈ ದೋಷಗಳನ್ನು ನಾಜೂಕಾಗಿ ನಿರ್ವಹಿಸುವುದು ಅತ್ಯಗತ್ಯ.
Try-Catch ಬ್ಲಾಕ್ಗಳನ್ನು ಬಳಸುವುದು
ಅಸಿಂಕ್ರೊನಸ್ ಕೋಡ್ನಲ್ಲಿ ದೋಷಗಳನ್ನು ನಿರ್ವಹಿಸಲು ಅತ್ಯಂತ ಸಾಮಾನ್ಯವಾದ ಮಾರ್ಗವೆಂದರೆ try-catch ಬ್ಲಾಕ್ಗಳನ್ನು ಬಳಸುವುದು. ಇದು API ಕರೆಯ ಸಮಯದಲ್ಲಿ ಎಸೆಯಲ್ಪಟ್ಟ ಯಾವುದೇ ವಿನಾಯಿತಿಗಳನ್ನು ಹಿಡಿಯಲು ಮತ್ತು ಅವುಗಳನ್ನು ಸೂಕ್ತವಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
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; // ದೋಷವನ್ನು ಮರು-ಎಸೆಯಿರಿ ಇದರಿಂದ ಕರೆಯುವ ಕೋಡ್ ಕೂಡ ಅದನ್ನು ನಿರ್ವಹಿಸಬಹುದು
}
}
ನಿರ್ದಿಷ್ಟ ದೋಷ ಕೋಡ್ಗಳನ್ನು ನಿರ್ವಹಿಸುವುದು
APIಗಳು ಸಂಭವಿಸಿದ ದೋಷದ ಪ್ರಕಾರವನ್ನು ಸೂಚಿಸಲು ನಿರ್ದಿಷ್ಟ ದೋಷ ಕೋಡ್ಗಳನ್ನು ಹಿಂತಿರುಗಿಸುತ್ತವೆ. ಹೆಚ್ಚು ನಿರ್ದಿಷ್ಟವಾದ ದೋಷ ನಿರ್ವಹಣೆಯನ್ನು ಒದಗಿಸಲು ನೀವು ಈ ದೋಷ ಕೋಡ್ಗಳನ್ನು ಬಳಸಬಹುದು. ಉದಾಹರಣೆಗೆ, 500 ಆಂತರಿಕ ಸರ್ವರ್ ದೋಷಕ್ಕಿಂತ 404 ನಾಟ್ ಫೌಂಡ್ ದೋಷಕ್ಕಾಗಿ ನೀವು ವಿಭಿನ್ನ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಲು ಬಯಸಬಹುದು.
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 ${id} ಹೊಂದಿರುವ ಬಳಕೆದಾರರು ಕಂಡುಬಂದಿಲ್ಲ.`);
return null; // ಅಥವಾ ಕಸ್ಟಮ್ ದೋಷವನ್ನು ಎಸೆಯಿರಿ
} else {
console.error('ಬಳಕೆದಾರರನ್ನು ಪಡೆಯುವಲ್ಲಿ ದೋಷ:', error);
throw error;
}
}
}
fetchUser(123).then(user => {
if (user) {
console.log('ಬಳಕೆದಾರ:', user);
} else {
console.log('ಬಳಕೆದಾರರು ಕಂಡುಬಂದಿಲ್ಲ.');
}
});
ಕಸ್ಟಮ್ ದೋಷ ಪ್ರಕಾರಗಳನ್ನು ರಚಿಸುವುದು
ಹೆಚ್ಚು ಸಂಕೀರ್ಣವಾದ ದೋಷ ನಿರ್ವಹಣಾ ಸನ್ನಿವೇಶಗಳಿಗಾಗಿ, ವಿವಿಧ ರೀತಿಯ API ದೋಷಗಳನ್ನು ಪ್ರತಿನಿಧಿಸಲು ನೀವು ಕಸ್ಟಮ್ ದೋಷ ಪ್ರಕಾರಗಳನ್ನು ರಚಿಸಬಹುದು. ಇದು ಹೆಚ್ಚು ರಚನಾತ್ಮಕ ದೋಷ ಮಾಹಿತಿಯನ್ನು ಒದಗಿಸಲು ಮತ್ತು ದೋಷಗಳನ್ನು ಹೆಚ್ಚು ಪರಿಣಾಮಕಾರಿಯಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
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 ${id} ಹೊಂದಿರುವ ಬಳಕೆದಾರರು ಕಂಡುಬಂದಿಲ್ಲ.`);
} else {
console.error('ಬಳಕೆದಾರರನ್ನು ಪಡೆಯುವಲ್ಲಿ ದೋಷ:', error);
throw new ApiError(500, 'Internal Server Error'); //ಅಥವಾ ಬೇರೆ ಯಾವುದೇ ಸೂಕ್ತ ಸ್ಟೇಟಸ್ ಕೋಡ್
}
}
}
fetchUser(123).catch(error => {
if (error instanceof ApiError) {
console.error(`API ದೋಷ: ${error.statusCode} - ${error.message}`);
} else {
console.error('ಒಂದು ಅನಿರೀಕ್ಷಿತ ದೋಷ ಸಂಭವಿಸಿದೆ:', error);
}
});
ಡೇಟಾ ವ್ಯಾಲಿಡೇಶನ್
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನ ಟೈಪ್ ಸಿಸ್ಟಮ್ನೊಂದಿಗೆ ಸಹ, ನೀವು APIಗಳಿಂದ ಸ್ವೀಕರಿಸುವ ಡೇಟಾವನ್ನು ರನ್ಟೈಮ್ನಲ್ಲಿ ಮೌಲ್ಯೀಕರಿಸುವುದು ನಿರ್ಣಾಯಕವಾಗಿದೆ. APIಗಳು ಯಾವುದೇ ಸೂಚನೆಯಿಲ್ಲದೆ ತಮ್ಮ ಪ್ರತಿಕ್ರಿಯೆ ರಚನೆಯನ್ನು ಬದಲಾಯಿಸಬಹುದು, ಮತ್ತು ನಿಮ್ಮ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಟೈಪ್ಗಳು ಯಾವಾಗಲೂ APIಯ ನೈಜ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಿಂಕ್ರೊನೈಸ್ ಆಗದಿರಬಹುದು.
ರನ್ಟೈಮ್ ವ್ಯಾಲಿಡೇಶನ್ಗಾಗಿ Zod ಬಳಸುವುದು
Zod ರನ್ಟೈಮ್ ಡೇಟಾ ವ್ಯಾಲಿಡೇಶನ್ಗಾಗಿ ಒಂದು ಜನಪ್ರಿಯ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಲೈಬ್ರರಿಯಾಗಿದೆ. ಇದು ನಿಮ್ಮ ಡೇಟಾದ ನಿರೀಕ್ಷಿತ ರಚನೆಯನ್ನು ವಿವರಿಸುವ ಸ್ಕೀಮಾಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು ಮತ್ತು ನಂತರ ರನ್ಟೈಮ್ನಲ್ಲಿ ಆ ಸ್ಕೀಮಾಗಳ ವಿರುದ್ಧ ಡೇಟಾವನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ.
Zod ಅನ್ನು ಇನ್ಸ್ಟಾಲ್ ಮಾಡಲಾಗುತ್ತಿದೆ
npm install zod
Zod ನೊಂದಿಗೆ API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸುವುದು
Zod ನೊಂದಿಗೆ API ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು, ನಿಮ್ಮ ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಟೈಪ್ಗೆ ಅನುಗುಣವಾದ 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 ಒಂದು ದೋಷವನ್ನು ಎಸೆಯುತ್ತದೆ, ಅದನ್ನು ನೀವು ಸೂಕ್ತವಾಗಿ ನಿರ್ವಹಿಸಬಹುದು.
ಸುಧಾರಿತ ತಂತ್ರಗಳು
ಪುನರ್ಬಳಕೆಯ API ಫಂಕ್ಷನ್ಗಳಿಗಾಗಿ ಜೆನೆರಿಕ್ಸ್ ಬಳಸುವುದು
ಜೆನೆರಿಕ್ಸ್ ವಿಭಿನ್ನ ರೀತಿಯ ಡೇಟಾವನ್ನು ನಿರ್ವಹಿಸಬಲ್ಲ ಪುನರ್ಬಳಕೆಯ API ಫಂಕ್ಷನ್ಗಳನ್ನು ಬರೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ಉದಾಹರಣೆಗೆ, ನೀವು ಯಾವುದೇ API ಎಂಡ್ಪಾಯಿಂಟ್ನಿಂದ ಡೇಟಾವನ್ನು ಪಡೆಯಬಲ್ಲ ಮತ್ತು ಅದನ್ನು ಸರಿಯಾದ ಟೈಪ್ನೊಂದಿಗೆ ಹಿಂತಿರುಗಿಸಬಲ್ಲ ಜೆನೆರಿಕ್ `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;
}
}
// Usage
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)
});
ಗ್ಲೋಬಲ್ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ಗಾಗಿ ಇಂಟರ್ಸೆಪ್ಟರ್ಗಳನ್ನು ಬಳಸುವುದು
Axios ಇಂಟರ್ಸೆಪ್ಟರ್ಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ ಅದು ನಿಮ್ಮ ಕೋಡ್ನಿಂದ ನಿರ್ವಹಿಸಲ್ಪಡುವ ಮೊದಲು ವಿನಂತಿಗಳು ಮತ್ತು ಪ್ರತಿಕ್ರಿಯೆಗಳನ್ನು ತಡೆಯಲು ನಿಮಗೆ ಅನುಮತಿಸುತ್ತದೆ. ದೋಷಗಳನ್ನು ಲಾಗ್ ಮಾಡುವುದು ಅಥವಾ ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಸಂದೇಶಗಳನ್ನು ಪ್ರದರ್ಶಿಸುವಂತಹ ಗ್ಲೋಬಲ್ ಎರರ್ ಹ್ಯಾಂಡ್ಲಿಂಗ್ ಅನ್ನು ಕಾರ್ಯಗತಗೊಳಿಸಲು ನೀವು ಇಂಟರ್ಸೆಪ್ಟರ್ಗಳನ್ನು ಬಳಸಬಹುದು.
axios.interceptors.response.use(
(response) => response,
(error) => {
console.error('ಗ್ಲೋಬಲ್ ದೋಷ ನಿರ್ವಾಹಕ:', error);
// ಬಳಕೆದಾರರಿಗೆ ದೋಷ ಸಂದೇಶವನ್ನು ಪ್ರದರ್ಶಿಸಿ
return Promise.reject(error);
}
);
API URL ಗಳಿಗಾಗಿ ಎನ್ವಿರಾನ್ಮೆಂಟ್ ವೇರಿಯಬಲ್ಗಳನ್ನು ಬಳಸುವುದು
ನಿಮ್ಮ ಕೋಡ್ನಲ್ಲಿ API 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;
}
}
ತೀರ್ಮಾನ
ದೃಢವಾದ, ನಿರ್ವಹಿಸಬಲ್ಲ, ಮತ್ತು ದೋಷ-ಮುಕ್ತ ವೆಬ್ ಅಪ್ಲಿಕೇಶನ್ಗಳನ್ನು ನಿರ್ಮಿಸಲು ಟೈಪ್-ಸೇಫ್ API ಕರೆಗಳು ಅತ್ಯಗತ್ಯ. ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ API ಪ್ರತಿಕ್ರಿಯೆಗಳಿಗಾಗಿ ಟೈಪ್ಗಳನ್ನು ವ್ಯಾಖ್ಯಾನಿಸಲು, ರನ್ಟೈಮ್ನಲ್ಲಿ ಡೇಟಾವನ್ನು ಮೌಲ್ಯೀಕರಿಸಲು, ಮತ್ತು ದೋಷಗಳನ್ನು ನಾಜೂಕಾಗಿ ನಿರ್ವಹಿಸಲು ನಿಮಗೆ ಅನುವು ಮಾಡಿಕೊಡುವ ಶಕ್ತಿಯುತ ವೈಶಿಷ್ಟ್ಯಗಳನ್ನು ಒದಗಿಸುತ್ತದೆ. ಈ ಮಾರ್ಗದರ್ಶಿಯಲ್ಲಿ ವಿವರಿಸಲಾದ ಉತ್ತಮ ಅಭ್ಯಾಸಗಳು ಮತ್ತು ತಂತ್ರಗಳನ್ನು ಅನುಸರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ API ಸಂವಹನಗಳ ಗುಣಮಟ್ಟ ಮತ್ತು ವಿಶ್ವಾಸಾರ್ಹತೆಯನ್ನು ನೀವು ಗಮನಾರ್ಹವಾಗಿ ಸುಧಾರಿಸಬಹುದು.
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ ಮತ್ತು Axios ಮತ್ತು Zod ನಂತಹ ಲೈಬ್ರರಿಗಳನ್ನು ಬಳಸುವ ಮೂಲಕ, ನಿಮ್ಮ API ಕರೆಗಳು ಟೈಪ್-ಸೇಫ್ ಆಗಿರುವುದನ್ನು, ನಿಮ್ಮ ಡೇಟಾ ಮೌಲ್ಯೀಕರಿಸಲ್ಪಟ್ಟಿರುವುದನ್ನು, ಮತ್ತು ನಿಮ್ಮ ದೋಷಗಳನ್ನು ನಾಜೂಕಾಗಿ ನಿರ್ವಹಿಸಲಾಗಿದೆಯೆಂದು ನೀವು ಖಚಿತಪಡಿಸಿಕೊಳ್ಳಬಹುದು. ಇದು ಹೆಚ್ಚು ದೃಢವಾದ ಮತ್ತು ನಿರ್ವಹಿಸಬಲ್ಲ ಅಪ್ಲಿಕೇಶನ್ಗಳಿಗೆ ಕಾರಣವಾಗುತ್ತದೆ.
ಟೈಪ್ಸ್ಕ್ರಿಪ್ಟ್ನ ಟೈಪ್ ಸಿಸ್ಟಮ್ನೊಂದಿಗೆ ಸಹ, ರನ್ಟೈಮ್ನಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಯಾವಾಗಲೂ ಮೌಲ್ಯೀಕರಿಸಲು ಮರೆಯದಿರಿ. APIಗಳು ಬದಲಾಗಬಹುದು, ಮತ್ತು ನಿಮ್ಮ ಟೈಪ್ಗಳು ಯಾವಾಗಲೂ APIಯ ನೈಜ ಪ್ರತಿಕ್ರಿಯೆಯೊಂದಿಗೆ ಸಂಪೂರ್ಣವಾಗಿ ಸಿಂಕ್ರೊನೈಸ್ ಆಗದಿರಬಹುದು. ರನ್ಟೈಮ್ನಲ್ಲಿ ನಿಮ್ಮ ಡೇಟಾವನ್ನು ಮೌಲ್ಯೀಕರಿಸುವ ಮೂಲಕ, ನಿಮ್ಮ ಅಪ್ಲಿಕೇಶನ್ನಲ್ಲಿ ಸಮಸ್ಯೆಗಳನ್ನು ಉಂಟುಮಾಡುವ ಮೊದಲು ನೀವು ಸಂಭಾವ್ಯ ಸಮಸ್ಯೆಗಳನ್ನು ಪತ್ತೆಹಚ್ಚಬಹುದು.
ಹ್ಯಾಪಿ ಕೋಡಿಂಗ್!