Boshqariladigan va saqlanadigan veb-ilovalar yaratish uchun TypeScriptda Fetch API bilan tur xavfsizligini qanday amalga oshirishni o'rganing. Eng yaxshi amaliyotlar va amaliy misollarni o'rganing.
TypeScript Web API: Foydali Ilovalar Uchun Fetch Turi Xavfsizligiga Erishish
Zamonaviy veb-dasturlashda API'lardan ma'lumotlarni olish asosiy vazifa hisoblanadi. JavaScriptdagi mahalliy Fetch API tarmoq so'rovlarini amalga oshirish uchun qulay usulni taqdim etsa-da, u o'ziga xos tur xavfsizligidan mahrum. Bu ish vaqtida xatolarga olib kelishi va murakkab ilovalarni saqlashni qiyinlashtirishi mumkin. TypeScript, o'zining statik turlash imkoniyatlari bilan, bu muammoni hal qilish uchun kuchli yechim taklif qiladi. Ushbu keng qamrovli qo'llanma TypeScriptda Fetch API bilan tur xavfsizligini qanday amalga oshirishni, yanada mustahkam va saqlanadigan veb-ilovalar yaratishni ko'rib chiqadi.
Nima uchun Fetch API bilan Tur Xavfsizligi Muhim?
Amalga oshirish tafsilotlariga sho'ng'ishdan oldin, Fetch API bilan ishlashda tur xavfsizligi nima uchun muhimligini tushunib olaylik:
- Ish vaqti xatolarini kamaytirish: TypeScriptning statik turlashi noto'g'ri ma'lumot turlari tufayli kutilmagan ish vaqti muammolarini oldini olib, dasturlash davomida xatolarni aniqlashga yordam beradi.
- Kodni saqlashni yaxshilash: Tur annotatsiyalari kodni, ayniqsa ko'plab dasturchilar bilan katta loyihalarda tushunish va saqlashni osonlashtiradi.
- Dasturchi tajribasini yaxshilash: IDElar, tur ma'lumotlari mavjud bo'lganda yaxshiroq avtomatik to'ldirish, xatolarni ko'rsatish va refaktoring imkoniyatlarini taqdim etadi.
- Ma'lumotlarni tekshirish: Tur xavfsizligi API'lardan olingan ma'lumotlarning tuzilishi va turlarini tekshirishga imkon beradi, ma'lumotlar yaxlitligini ta'minlaydi.
TypeScript bilan Asosiy Fetch API Ishlatilishi
Tur xavfsizligi bo'lmagan holatda TypeScriptda Fetch APIdan foydalanishning asosiy misoli bilan boshlaylik:
async function fetchData(url: string) {
const response = await fetch(url);
const data = await response.json();
return data;
}
fetchData('https://api.example.com/users')
.then(data => {
console.log(data.name); // Agar 'name' mavjud bo'lmasa, ish vaqti xatosi yuzaga kelishi mumkin
});
Ushbu misolda, `fetchData` funksiyasi berilgan URL manzilidan ma'lumotlarni oladi va javobni JSON sifatida qayta ishlaydi. Biroq, `data` o'zgaruvchisining turi noaniq `any` hisoblanadi, bu degan ma'noni anglatadi, TypeScript hech qanday tur tekshiruvini taqdim etmaydi. Agar API javobida `name` xususiyati mavjud bo'lmasa, kod ish vaqtida xatolikni chiqaradi.
Interfeyslar bilan Tur Xavfsizligini Amalga Oshirish
Fetch API chaqiruvlariga tur xavfsizligini qo'shishning eng keng tarqalgan usuli kutilayotgan ma'lumotlar tuzilishini ifodalovchi interfeyslarni aniqlashdir.
Interfeyslarni Aniqlash
Faraz qilaylik, biz quyidagi formatda ma'lumotlarni qaytaradigan API'dan foydalanuvchilar ro'yxatini olmoqdamiz:
[
{
"id": 1,
"name": "John Doe",
"email": "john.doe@example.com"
},
{
"id": 2,
"name": "Jane Smith",
"email": "jane.smith@example.com"
}
]
Biz ushbu ma'lumotlar tuzilishini ifodalash uchun interfeysni aniqlashimiz mumkin:
interface User {
id: number;
name: string;
email: string;
}
Fetch API bilan Interfeyslarni Ishlatish
Endi, biz `fetchData` funksiyasini `User` interfeysini ishlatish uchun yangilashimiz mumkin:
async function fetchData(url: string): Promise<User[]> {
const response = await fetch(url);
const data = await response.json();
return data as User[];
}
fetchData('https://api.example.com/users')
.then(users => {
users.forEach(user => {
console.log(user.name); // 'name' xususiyatiga tur-xavfsiz kirish
});
});
Ushbu yangilangan misolda, biz `fetchData` funksiyasiga tur annotatsiyasini qo'shdik, u `User` ob'ektlarining massiviga (`Promise<User[]>`) to'g'ri keluvchi `Promise` qaytarishini belgilaydi. Shuningdek, biz `response.json()` dan olingan ma'lumot `User` ob'ektlarining massivi ekanligini TypeScriptga aytish uchun tur tekshiruvi (`as User[]`) dan foydalanamiz. Bu TypeScriptga ma'lumotlar tuzilishini tushunishga va tur tekshiruvini taqdim etishga yordam beradi.
Muhim Eslatma: `as` kalit so'zi tur tekshiruvini amalga oshirsa-da, u ish vaqti tekshiruvini amalga oshirmaydi. Bu kompilyatorga nimani kutish kerakligini aytadi, ammo ma'lumotlar haqiqatan ham tekshirilgan turga mos kelishini kafolatlamaydi. Bu erda `io-ts` yoki `zod` kabi kutubxonalar ish vaqti tekshiruvi uchun foydali bo'ladi, keyinroq muhokama qilinadi.
Qayta Ishlatiladigan Fetch Funksiyalari Uchun Generiklardan Foydalanish
Qayta ishlatiladigan fetch funksiyalarini yaratish uchun biz generiklardan foydalanishimiz mumkin. Generiklar bizga har bir tur uchun alohida funksiyalar yozmasdan turli ma'lumot turlari bilan ishlay oladigan funksiyani aniqlashga imkon beradi.
Generik Fetch Funksiyasini Aniqlash
async function fetchData<T>(url: string): Promise<T> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: T = await response.json();
return data;
}
Ushbu misolda, biz `T` tur parametrini qabul qiluvchi generik `fetchData` funksiyasini aniqladik. Funksiya `T` turidagi qiymatga to'g'ri keluvchi `Promise` qaytaradi. Shuningdek, javob muvaffaqiyatli bo'lganligini tekshirish uchun xatolarni boshqarishni qo'shdik.
Generik Fetch Funksiyasidan Foydalanish
Endi biz generik `fetchData` funksiyasini turli interfeyslar bilan ishlatishimiz mumkin:
interface Post {
id: number;
title: string;
body: string;
userId: number;
}
fetchData<Post>('https://jsonplaceholder.typicode.com/posts/1')
.then(post => {
console.log(post.title); // 'title' xususiyatiga tur-xavfsiz kirish
})
.catch(error => {
console.error("Post olishda xatolik:", error);
});
fetchData<User[]>('https://api.example.com/users')
.then(users => {
users.forEach(user => {
console.log(user.email);
});
})
.catch(error => {
console.error("Foydalanuvchilarni olishda xatolik:", error);
});
Ushbu misolda, biz generik `fetchData` funksiyasidan foydalanib, ham bitta `Post` hamda `User` ob'ektlarining massivini olamiz. TypeScript avtomatik ravishda taqdim etgan tur parametri asosida to'g'ri turini aniqlaydi.
Xatoliklar va Status Kodlarni Boshqarish
Fetch API bilan ishlashda xatoliklar va status kodlarni boshqarish juda muhim. HTTP xatolarini tekshirish va zarur bo'lganda xatolikni chiqarish uchun biz `fetchData` funksiyamizga xatoliklarni boshqarishni qo'shishimiz mumkin.
async function fetchData<T>(url: string): Promise<T> {
const response = await fetch(url);
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: T = await response.json();
return data;
}
Ushbu yangilangan misolda, biz `response.ok` xususiyatini tekshiryapmiz, bu javob status kodi 200-299 diapazonida ekanligini ko'rsatadi. Agar javob OK bo'lmasa, biz status kodi bilan xatolikni chiqarishimiz mumkin.
`io-ts` yoki `zod` bilan Ish Vaqti Ma'lumotlarini Tekshirish
Yuqorida aytib o'tilganidek, TypeScript tur tekshiruvlari (`as`) ish vaqti tekshiruvini amalga oshirmaydi. API'lardan olingan ma'lumotlar haqiqatan ham kutilgan turga mos kelishini ta'minlash uchun biz `io-ts` yoki `zod` kabi kutubxonalardan foydalanishimiz mumkin.
`io-ts` dan Foydalanish
`io-ts` ish vaqti turlarini aniqlash va ma'lumotlarni ushbu turlarga qarshi tekshirish uchun kutubxonadir.
import * as t from 'io-ts'
import { PathReporter } from 'io-ts/PathReporter'
const UserType = t.type({
id: t.number,
name: t.string,
email: t.string
})
type User = t.TypeOf<typeof UserType>
async function fetchDataAndValidate(url: string): Promise<User[]> {
const response = await fetch(url)
const data = await response.json()
const decodedData = t.array(UserType).decode(data)
if (decodedData._tag === 'Left') {
const errors = PathReporter.report(decodedData)
throw new Error(`Tekshirish xatoliklari: ${errors.join('\n')}`)
}
return decodedData.right
}
fetchDataAndValidate('https://api.example.com/users')
.then(users => {
users.forEach(user => {
console.log(user.name);
});
})
.catch(error => {
console.error('Foydalanuvchilarni olish va tekshirishda xatolik:', error);
});
Ushbu misolda, biz `io-ts` dan foydalanib `UserType`ni aniqlaymiz, bu bizning `User` interfeysimizga mos keladi. Keyin biz API'dan olingan ma'lumotlarni tekshirish uchun `decode` usulidan foydalanamiz. Agar tekshirish muvaffaqiyatsiz bo'lsa, biz tekshirish xatoliklari bilan xatolikni chiqarishimiz mumkin.
`zod` dan Foydalanish
`zod` sxema deklaratsiyasi va tekshiruvi uchun yana bir mashhur kutubxonadir.
import { z } from 'zod';
const UserSchema = z.object({
id: z.number(),
name: z.string(),
email: z.string().email(),
});
type User = z.infer<typeof UserSchema>;
async function fetchDataAndValidate(url: string): Promise<User[]> {
const response = await fetch(url);
const data = await response.json();
const parsedData = z.array(UserSchema).safeParse(data);
if (!parsedData.success) {
throw new Error(`Tekshirish xatoliklari: ${parsedData.error.message}`);
}
return parsedData.data;
}
fetchDataAndValidate('https://api.example.com/users')
.then(users => {
users.forEach(user => {
console.log(user.name);
});
})
.catch(error => {
console.error('Foydalanuvchilarni olish va tekshirishda xatolik:', error);
});
Ushbu misolda, biz `zod` dan foydalanib `UserSchema`ni aniqlaymiz, bu bizning `User` interfeysimizga mos keladi. Keyin biz API'dan olingan ma'lumotlarni tekshirish uchun `safeParse` usulidan foydalanamiz. Agar tekshirish muvaffaqiyatsiz bo'lsa, biz tekshirish xatoliklari bilan xatolikni chiqarishimiz mumkin.
Ham `io-ts` ham `zod` API'lardan olingan ma'lumotlar ish vaqtida kutilgan turga mos kelishini ta'minlash uchun kuchli usulni taqdim etadi.
Mashhur Freymvorklar bilan Integratsiya (React, Angular, Vue.js)
Tur-xavfsiz Fetch API chaqiruvlari React, Angular va Vue.js kabi mashhur JavaScript freymvorklari bilan osongina integratsiya qilinishi mumkin.
React Misoli
import React, { useState, useEffect } from 'react';
interface User {
id: number;
name: string;
email: string;
}
function UserList() {
const [users, setUsers] = useState<User[]>([]);
const [loading, setLoading] = useState(true);
const [error, setError] = useState<string | null>(null);
useEffect(() => {
async function fetchUsers() {
try {
const response = await fetch('https://api.example.com/users');
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`);
}
const data: User[] = await response.json();
setUsers(data);
} catch (error: any) {
setError(error.message);
} finally {
setLoading(false);
}
}
fetchUsers();
}, []);
if (loading) {
return <p>Yuklanmoqda...</p>;
}
if (error) {
return <p>Xatolik: {error}</p>;
}
return (
<ul>
{users.map(user => (
<li key={user.id}>{user.name}</li>
))}
</ul>
);
}
export default UserList;
Ushbu React misolida, biz `users` massivining holatini boshqarish uchun `useState` hookidan foydalanamiz. Shuningdek, komponent yuklanganda foydalanuvchilarni olish uchun `useEffect` hookidan foydalanamiz. Tur xavfsizligini ta'minlash uchun biz `users` holati va `data` o'zgaruvchisiga tur annotatsiyalarini qo'shdik.
Angular Misoli
import { Component, OnInit } from '@angular/core';
import { HttpClient } from '@angular/common/http';
interface User {
id: number;
name: string;
email: string;
}
@Component({
selector: 'app-user-list',
template: `
<ul>
<li *ngFor="let user of users">{{ user.name }}</li>
</ul>
`,
styleUrls: []
})
export class UserListComponent implements OnInit {
users: User[] = [];
constructor(private http: HttpClient) { } //
ngOnInit() {
this.http.get<User[]>('https://api.example.com/users')
.subscribe(users => {
this.users = users;
});
}
}
Ushbu Angular misolida, biz API chaqiruvini amalga oshirish uchun `HttpClient` xizmatidan foydalanamiz. Biz generiklardan foydalanib javob turini `User[]` deb belgilaymiz, bu tur xavfsizligini ta'minlaydi.
Vue.js Misoli
<template>
<ul>
<li v-for="user in users" :key="user.id">{{ user.name }}</li>
</ul>
</template>
<script>
import { defineComponent, ref, onMounted } from 'vue'
interface User {
id: number
name: string
email: string
}
export default defineComponent({
setup() {
const users = ref<User[]>([])
onMounted(async () => {
try {
const response = await fetch('https://api.example.com/users')
if (!response.ok) {
throw new Error(`HTTP error! status: ${response.status}`)
}
const data: User[] = await response.json()
users.value = data
} catch (error) {
console.error('Foydalanuvchilarni olishda xatolik:', error)
}
})
return {
users
}
}
})
</script>
Ushbu Vue.js misolida, biz reaktiv `users` massivini yaratish uchun `ref` funksiyasidan foydalanamiz. Biz komponent o'rnatilganda foydalanuvchilarni API'dan olish uchun `onMounted` hayotiy tsikli hookidan foydalanamiz. Tur xavfsizligini ta'minlash uchun biz `users` ref va `data` o'zgaruvchisiga tur annotatsiyalarini qo'shdik.
Tur-Xavfsiz Fetch API Chaqiruvlari Uchun Eng Yaxshi Amaliyotlar
TypeScriptda tur-xavfsiz Fetch API chaqiruvlarini amalga oshirishda quyidagi eng yaxshi amaliyotlarga amal qiling:
- Interfeyslarni Aniqlang: Har doim kutilayotgan ma'lumotlar tuzilishini ifodalovchi interfeyslarni aniqlang.
- Generiklardan Foydalaning: Turli ma'lumot turlari bilan ishlay oladigan qayta ishlatiladigan fetch funksiyalarini yaratish uchun generiklardan foydalaning.
- Xatolarni Boshqaring: HTTP xatolarini tekshirish va zarur bo'lganda xatolikni chiqarish uchun xatoliklarni boshqarishni amalga oshiring.
- Ma'lumotlarni Tekshiring: Ish vaqtida API'lardan olingan ma'lumotlar `io-ts` yoki `zod` kabi kutubxonalar bilan mos kelishini tekshiring.
- Holatingizni Turlang: React, Angular va Vue.js kabi freymvorklar bilan integratsiya qilganda, holat o'zgaruvchilaringiz va API javoblarini turlang.
- API Konfiguratsiyasini Markazlashtiring: API asosiy URL manzili va har qanday umumiy sarlavhalar yoki parametrlaringiz uchun markaziy joy yarating. Bu API konfiguratsiyangizni saqlash va yangilashni osonlashtiradi. Turli muhitlar (dasturlash, staging, ishlab chiqarish) uchun muhit o'zgaruvchilaridan foydalanishni ko'rib chiqing.
- API Mijozi Kutubxonasidan Foydalaning (Majburiy emas): Axios kabi API mijoz kutubxonasidan yoki OpenAPI/Swagger spetsifikatsiyasidan olingan tayyorlangan mijozdan foydalanishni ko'rib chiqing. Ushbu kutubxonalar ko'pincha o'rnatilgan tur xavfsizligi xususiyatlariga ega va API interaktivliklaringizni soddalashtirishi mumkin.
Xulosa
TypeScriptda Fetch API bilan tur xavfsizligini amalga oshirish mustahkam va saqlanadigan veb-ilovalar yaratish uchun zarurdir. Interfeyslarni aniqlash, generiklardan foydalanish, xatolarni boshqarish va ish vaqtida ma'lumotlarni tekshirish orqali siz ish vaqti xatolarini sezilarli darajada kamaytirishingiz va umumiy dasturchi tajribasini yaxshilashingiz mumkin. Ushbu qo'llanma Fetch API bilan tur xavfsizligini qanday amalga oshirish haqida keng qamrovli ko'rib chiqishni, shuningdek, amaliy misollar va eng yaxshi amaliyotlarni taqdim etadi. Ushbu ko'rsatmalarga amal qilgan holda, siz yanada ishonchli va kengayadigan veb-ilovalar yaratishingiz mumkin, ular tushunish va saqlash osonroq bo'ladi.
Qo'shimcha O'rganish
- OpenAPI/Swagger Kodini Tayyorlash: OpenAPI/Swagger spetsifikatsiyalaridan avtomatik ravishda TypeScript API mijozlarini tayyorlaydigan vositalarni o'rganing. Bu API integratsiyasini sezilarli darajada soddalashtirishi va tur xavfsizligini ta'minlashi mumkin. Misollar quyidagilarni o'z ichiga oladi: `openapi-typescript` va `swagger-codegen`.
- TypeScript bilan GraphQL: TypeScript bilan GraphQLdan foydalanishni ko'rib chiqing. GraphQLning qattiq turlangan sxemasi ajoyib tur xavfsizligini ta'minlaydi va ma'lumotlarni ortiqcha olishni bartaraf etadi.
- Tur Xavfsizligini Tekshirish: API chaqiruvlaringiz kutilgan turdagi ma'lumotlarni qaytarishini tekshirish uchun birlik testlarini yozing. Bu sizning tur xavfsizligi mexanizmlaringiz to'g'ri ishlayotganligini ta'minlashga yordam beradi.