TypeScript bilan Turi Xavfsiz API So'rovlari: To'liq Qo'llanma

Zamonaviy veb-dasturlashda API'lar bilan ishlash asosiy vazifadir. TypeScript o'zining kuchli turlar tizimi bilan, tur xavfsiz API so'rovlarini yoqish orqali ilovalaringizning ishonchliligi va qo'llab-quvvatlanuvchanligini ta'minlashda muhim afzalliklarni taqdim etadi. Ushbu qo'llanma TypeScript xususiyatlaridan foydalanib, mustahkam va xatolarsiz API o'zaro ta'sirlarini yaratishni, eng yaxshi amaliyotlar, ilg'or texnikalar va real misollarni qamrab olgan holda o'rganadi.

Nima uchun API so'rovlari uchun tur xavfsizligi muhim?

API'lar bilan ishlaganda, siz asosan tashqi manbadan kelayotgan ma'lumotlar bilan ish olib borasiz. Bu ma'lumotlar har doim ham siz kutgan formatda bo'lmasligi mumkin, bu esa ish vaqtidagi xatolarga va kutilmagan xatti-harakatlarga olib keladi. Tur xavfsizligi siz qabul qilayotgan ma'lumotlarning oldindan belgilangan tuzilishga mos kelishini tekshirish orqali muhim himoya qatlamini ta'minlaydi va dasturlash jarayonining boshida yuzaga kelishi mumkin bo'lgan muammolarni aniqlaydi.

Ish vaqti xatoliklarining kamayishi: Kompilyatsiya vaqtida turlarni tekshirish, tur bilan bog'liq xatolarni ishlab chiqarishga yetib bormasdan oldin aniqlash va tuzatishga yordam beradi.
Kodning qo'llab-quvvatlanuvchanligini oshirish: Aniq tur ta'riflari kodingizni tushunish va o'zgartirishni osonlashtiradi, refaktoring paytida xatoliklarni kiritish xavfini kamaytiradi.
Kodning o'qiluvchanligini yaxshilash: Tur annotatsiyalari qimmatli hujjatlarni taqdim etadi, bu esa dasturchilarga kutilayotgan ma'lumotlar tuzilmalarini tushunishni osonlashtiradi.
Yaxshiroq dasturchi tajribasi: IDE tomonidan turlarni tekshirish va avtomatik to'ldirishni qo'llab-quvvatlash dasturchi tajribasini sezilarli darajada yaxshilaydi va xatolar ehtimolini kamaytiradi.

TypeScript loyihangizni sozlash

API so'rovlariga kirishdan oldin, TypeScript loyihangiz sozlanganligiga ishonch hosil qiling. Agar siz noldan boshlayotgan bo'lsangiz, yangi loyihani quyidagicha ishga tushirishingiz mumkin:

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

Bu standart TypeScript kompilyator sozlamalari bilan `tsconfig.json` faylini yaratadi. Siz ushbu sozlamalarni loyihangiz ehtiyojlariga mos ravishda sozlashingiz mumkin. Masalan, qat'iyroq tur tekshiruvi uchun qat'iy rejimni yoqishingiz mumkin:

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

API javoblari uchun turlarni belgilash

Tur xavfsiz API so'rovlariga erishishning birinchi qadami - API'dan qabul qilishni kutayotgan ma'lumotlar tuzilishini ifodalovchi TypeScript turlarini belgilashdir. Bu odatda `interface` yoki `type` e'lonlari yordamida amalga oshiriladi.

Interfeyslardan foydalanish

Interfeyslar obyekt shaklini aniqlashning kuchli usulidir. Masalan, agar siz API'dan foydalanuvchilar ro'yxatini olayotgan bo'lsangiz, shunga o'xshash interfeysni belgilashingiz mumkin:

interface User {
  id: number;
  name: string;
  email: string;
  address?: string; // Ixtiyoriy xususiyat
  phone?: string; // Ixtiyoriy xususiyat
  website?: string; // Ixtiyoriy xususiyat
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
}

Xususiyat nomidan keyingi `?` belgisi xususiyatning ixtiyoriy ekanligini bildiradi. Bu ba'zi maydonlar yetishmayotgan API javoblarini qayta ishlash uchun foydalidir.

Tiplardan foydalanish

Tiplar interfeyslar bilan o'xshash, ammo ko'proq moslashuvchanlikni taqdim etadi, jumladan, birlashma turlari va kesishma turlarini belgilash imkoniyati mavjud. Yuqoridagi interfeys bilan bir xil natijaga tip yordamida erishishingiz mumkin:

type User = {
  id: number;
  name: string;
  email: string;
  address?: string; // Ixtiyoriy xususiyat
  phone?: string; // Ixtiyoriy xususiyat
  website?: string; // Ixtiyoriy xususiyat
  company?: {
    name: string;
    catchPhrase: string;
    bs: string;
  };
};

Oddiy obyekt tuzilmalari uchun interfeyslar va tiplar ko'pincha bir-birining o'rnini bosa oladi. Biroq, murakkabroq stsenariylar bilan ishlaganda tiplar yanada kuchliroq bo'ladi.

Axios bilan API so'rovlarini amalga oshirish

Axios - JavaScript va TypeScript'da API so'rovlarini amalga oshirish uchun mashhur HTTP klientidir. U toza va intuitiv API taqdim etadi, bu turli HTTP usullari, so'rov sarlavhalari va javob ma'lumotlarini osonlikcha boshqarish imkonini beradi.

Axios'ni o'rnatish

npm install axios

Turli API so'rovini amalga oshirish

Axios bilan tur xavfsiz API so'rovini amalga oshirish uchun siz `axios.get` usulidan foydalanishingiz va generiklar yordamida kutilayotgan javob turini belgilashingiz mumkin:

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('Foydalanuvchilarni olishda xatolik:', error);
    throw error;
  }
}

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

Ushbu misolda `axios.get('...')` TypeScript'ga javob ma'lumotlari `User` obyektlari massivi bo'lishi kutilayotganini bildiradi. Bu TypeScript'ga javob ma'lumotlari bilan ishlashda tur tekshiruvi va avtomatik to'ldirishni ta'minlashga imkon beradi.

Turli HTTP usullarini qayta ishlash

Axios turli HTTP usullarini, jumladan `GET`, `POST`, `PUT`, `DELETE` va `PATCH`ni qo'llab-quvvatlaydi. Siz turli xil API so'rovlarini amalga oshirish uchun mos usullardan foydalanishingiz mumkin. Masalan, yangi foydalanuvchi yaratish uchun `axios.post` usulidan foydalanishingiz mumkin:

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('Foydalanuvchi yaratishda xatolik:', 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('Yaratilgan foydalanuvchi:', user);
});

Ushbu misolda `Omit` `User` bilan bir xil, ammo `id` xususiyatisiz tip yaratadi. Bu foydalidir, chunki `id` odatda yangi foydalanuvchi yaratilganda server tomonidan yaratiladi.

Fetch API'dan foydalanish

Fetch API - bu HTTP so'rovlarini amalga oshirish uchun o'rnatilgan JavaScript API. Axios'ga qaraganda oddiyroq bo'lsa-da, u ham TypeScript bilan tur xavfsiz API so'rovlariga erishish uchun ishlatilishi mumkin. Agar ehtiyojlaringizga mos kelsa, bog'liqlik qo'shmaslik uchun uni afzal ko'rishingiz mumkin.

Fetch bilan Turli API So'rovini Amalga Oshirish

Fetch bilan tur xavfsiz API so'rovini amalga oshirish uchun `fetch` funksiyasidan foydalanishingiz va keyin javobni JSON sifatida tahlil qilib, kutilayotgan javob turini belgilashingiz mumkin:

async function fetchUsers(): Promise {
  try {
    const response = await fetch('https://jsonplaceholder.typicode.com/users');
    if (!response.ok) {
      throw new Error(`HTTP xatoligi! holat: ${response.status}`);
    }
    const data: User[] = await response.json();
    return data;
  } catch (error) {
    console.error('Foydalanuvchilarni olishda xatolik:', error);
    throw error;
  }
}

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

Ushbu misolda `const data: User[] = await response.json();` TypeScript'ga javob ma'lumotlari `User` obyektlari massivi sifatida qaralishi kerakligini bildiradi. Bu TypeScript'ga tur tekshiruvi va avtomatik to'ldirishni amalga oshirish imkonini beradi.

Fetch bilan turli HTTP usullarini qayta ishlash

Fetch bilan turli xil API so'rovlarini amalga oshirish uchun `fetch` funksiyasini turli xil sozlamalar, masalan, `method` va `body` sozlamalari bilan ishlatishingiz mumkin. Masalan, yangi foydalanuvchi yaratish uchun quyidagi koddan foydalanishingiz mumkin:

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 xatoligi! holat: ${response.status}`);
    }
    const data: User = await response.json();
    return data;
  } catch (error) {
    console.error('Foydalanuvchi yaratishda xatolik:', 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('Yaratilgan foydalanuvchi:', user);
});

API xatolarini qayta ishlash

Xatolarni qayta ishlash API so'rovlarining muhim jihatidir. API'lar ko'plab sabablarga ko'ra, jumladan tarmoq ulanishi muammolari, server xatolari va noto'g'ri so'rovlar tufayli ishlamay qolishi mumkin. Ilovangizning ishdan chiqishini yoki kutilmagan xatti-harakatlarni ko'rsatishini oldini olish uchun ushbu xatolarni oqilona qayta ishlash zarur.

Try-Catch bloklaridan foydalanish

Asinxron kodda xatolarni qayta ishlashning eng keng tarqalgan usuli bu try-catch bloklaridan foydalanishdir. Bu sizga API so'rovi paytida yuzaga keladigan har qanday istisnolarni ushlab olish va ularni mos ravishda qayta ishlash imkonini beradi.

async function fetchUsers(): Promise {
  try {
    const response = await axios.get('https://jsonplaceholder.typicode.com/users');
    return response.data;
  } catch (error) {
    console.error('Foydalanuvchilarni olishda xatolik:', error);
    // Xatoni qayta ishlang, masalan, foydalanuvchiga xato xabarini ko'rsating
    throw error; // Chaqiruvchi kod ham uni qayta ishlashiga imkon berish uchun xatoni qayta tashlang
  }
}

Maxsus xato kodlarini qayta ishlash

API'lar ko'pincha yuz bergan xato turini ko'rsatish uchun maxsus xato kodlarini qaytaradi. Siz ushbu xato kodlaridan yanada aniqroq xatolarni qayta ishlash uchun foydalanishingiz mumkin. Masalan, 404 Topilmadi xatosi uchun 500 Ichki Server Xatosi'dan farqli xabar ko'rsatishni xohlashingiz mumkin.

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'li foydalanuvchi topilmadi.`);
      return null; // Yoki maxsus xato tashlang
    } else {
      console.error('Foydalanuvchini olishda xatolik:', error);
      throw error;
    }
  }
}

fetchUser(123).then(user => {
  if (user) {
    console.log('Foydalanuvchi:', user);
  } else {
    console.log('Foydalanuvchi topilmadi.');
  }
});

Maxsus xato turlarini yaratish

Murakkabroq xatolarni qayta ishlash stsenariylari uchun siz API xatolarining turli xillarini ifodalash uchun maxsus xato turlarini yaratishingiz mumkin. Bu sizga yanada tizimli xato ma'lumotlarini taqdim etish va xatolarni samaraliroq qayta ishlash imkonini beradi.

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'li foydalanuvchi topilmadi.`);
    } else {
      console.error('Foydalanuvchini olishda xatolik:', error);
      throw new ApiError(500, 'Ichki Server Xatosi'); //Yoki boshqa mos keladigan holat kodi
    }
  }
}

fetchUser(123).catch(error => {
  if (error instanceof ApiError) {
    console.error(`API xatosi: ${error.statusCode} - ${error.message}`);
  } else {
    console.error('Kutilmagan xatolik yuz berdi:', error);
  }
});

Ma'lumotlarni tekshirish

Hatto TypeScript'ning turlar tizimi bilan ham, API'lardan qabul qilgan ma'lumotlaringizni ish vaqtida tekshirish juda muhimdir. API'lar o'z javob tuzilishini ogohlantirmasdan o'zgartirishi mumkin, va sizning TypeScript turlaringiz har doim ham API'ning haqiqiy javobi bilan to'liq sinxronlashmagan bo'lishi mumkin.

Ish vaqtida tekshirish uchun Zod'dan foydalanish

Zod - bu ish vaqtida ma'lumotlarni tekshirish uchun mashhur TypeScript kutubxonasidir. U ma'lumotlaringizning kutilayotgan tuzilishini tavsiflovchi sxemalarni aniqlashga va keyin ish vaqtida ma'lumotlarni ushbu sxemalarga qarshi tekshirishga imkon beradi.

Zod'ni o'rnatish

npm install zod

Zod yordamida API javoblarini tekshirish

Zod yordamida API javoblarini tekshirish uchun siz TypeScript turiga mos keladigan Zod sxemasini aniqlashingiz va keyin ma'lumotlarni tekshirish uchun `parse` usulidan foydalanishingiz mumkin.

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('Foydalanuvchilarni olishda xatolik:', error);
    throw error;
  }
}

Ushbu misolda `z.array(userSchema).parse(response.data)` javob ma'lumotlarining `userSchema` ga mos keladigan obyektlar massivi ekanligini tekshiradi. Agar ma'lumotlar sxemaga mos kelmasa, Zod xato chiqaradi, keyin uni mos ravishda qayta ishlashingiz mumkin.

Ilg'or Texnikalar

Qayta ishlatiladigan API funksiyalari uchun generiklardan foydalanish

Generiklar sizga har xil turdagi ma'lumotlarni qayta ishlay oladigan qayta ishlatiladigan API funksiyalarini yozish imkonini beradi. Masalan, siz har qanday API nuqtasidan ma'lumotlarni olib, uni to'g'ri tur bilan qaytaradigan umumiy `fetchData` funksiyasini yaratishingiz mumkin.

async function fetchData(url: string): Promise {
  try {
    const response = await axios.get(url);
    return response.data;
  } catch (error) {
    console.error(`${url} manzilidan ma'lumotlarni olishda xatolik:`, error);
    throw error;
  }
}

// Foydalanish
fetchData('https://jsonplaceholder.typicode.com/users').then(users => {
  console.log('Foydalanuvchilar:', users);
});

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

Global xatolarni qayta ishlash uchun Interseptorlardan foydalanish

Axios so'rovlar va javoblarni kodingiz tomonidan qayta ishlanishidan oldin to'xtatib turishga imkon beruvchi interseptorlarni taqdim etadi. Siz interseptorlardan global xatolarni qayta ishlash, masalan, xatolarni yozib borish yoki foydalanuvchiga xato xabarlarini ko'rsatish uchun foydalanishingiz mumkin.

axios.interceptors.response.use(
  (response) => response,
  (error) => {
    console.error('Global xato ishlovchisi:', error);
    // Foydalanuvchiga xato xabarini ko'rsatish
    return Promise.reject(error);
  }
);

API URL'lari uchun muhit o'zgaruvchilaridan foydalanish

API URL'larini kodingizda qattiq kodlashdan qochish uchun siz URL'larni saqlash uchun muhit o'zgaruvchilaridan foydalanishingiz mumkin. Bu ilovangizni rivojlantirish, sinov va ishlab chiqarish kabi turli muhitlar uchun sozlashni osonlashtiradi.

`.env` fayli va `dotenv` paketidan foydalanishga misol.

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

// dotenv o'rnatish
npm install dotenv

// dotenv'ni import qilish va sozlash
import * as dotenv from 'dotenv'
dotenv.config()

const apiUrl = process.env.API_URL || 'http://localhost:3000'; // standart qiymatni taqdim eting

async function fetchData(endpoint: string): Promise {
  try {
    const response = await axios.get(`${apiUrl}/${endpoint}`);
    return response.data;
  } catch (error) {
    console.error(`${apiUrl}/${endpoint} manzilidan ma'lumotlarni olishda xatolik:`, error);
    throw error;
  }
}

Xulosa

Tur xavfsiz API so'rovlari mustahkam, qo'llab-quvvatlanadigan va xatolarsiz veb-ilovalar yaratish uchun zarurdir. TypeScript API javoblari uchun turlarni aniqlash, ish vaqtida ma'lumotlarni tekshirish va xatolarni oqilona qayta ishlash imkonini beruvchi kuchli xususiyatlarni taqdim etadi. Ushbu qo'llanmada keltirilgan eng yaxshi amaliyotlar va texnikalarga amal qilish orqali siz API o'zaro ta'sirlaringizning sifati va ishonchliligini sezilarli darajada oshirishingiz mumkin.

TypeScript va Axios va Zod kabi kutubxonalardan foydalanib, siz API so'rovlaringizning tur xavfsizligini, ma'lumotlaringizning tekshirilishini va xatolaringizning oqilona qayta ishlanishini ta'minlashingiz mumkin. Bu yanada mustahkam va qo'llab-quvvatlanadigan ilovalarga olib keladi.

Hatto TypeScript'ning turlar tizimi bilan ham, ma'lumotlaringizni har doim ish vaqtida tekshirishni unutmang. API'lar o'zgarishi mumkin va sizning turlaringiz har doim ham API'ning haqiqiy javobi bilan to'liq sinxronlashmagan bo'lishi mumkin. Ma'lumotlaringizni ish vaqtida tekshirish orqali, ilovangizda muammolar keltirib chiqarishidan oldin yuzaga kelishi mumkin bo'lgan muammolarni aniqlay olasiz.

Dasturlashdan zavqlaning!