TypeScript API

TypeScript ile API Servisleri Yönetimi

Ekim 07, 2024

//

3 dakikalık okuma

Bu yazıda, API isteklerini daha kolay ve yapılandırılmış bir şekilde yönetmek için TypeScript kullanarak oluşturduğum bir sınıfı paylaşmak istiyorum. ApiServices sınıfı, GET, POST, PUT, DELETE gibi HTTP metodlarını kullanarak, JSON ve FormData gibi veri tiplerini otomatik olarak işler. Bu yapı, API ile olan tüm iletişimi tek bir noktada toplar ve uygulamanızın her yerinde tekrar eden kodları ortadan kaldırır.


Temel Özellikler:

  • Modüler Yapı: İstek türüne göre get, post, put ve delete gibi metodlarla farklı HTTP istekleri kolayca yapılabilir.
  • Esneklik: Gönderilen body kısmında JSON ya da FormData gibi veri tiplerini otomatik ayırt eder.
  • Hata Yönetimi: İstek sırasında oluşan hatalar konsola yazdırılır ve hatalar fırlatılarak çağıran fonksiyonun bu hataları yakalaması sağlanır.

Bu basit ama etkili yapı sayesinde uygulamanızın API ile olan etkileşimlerini çok daha temiz ve düzenli bir şekilde yönetebilirsiniz.

type HttpMethod = "GET" | "POST" | "PUT" | "DELETE";

interface RequestOptions {
  method: HttpMethod;
  headers?: Record<string, string>;
  body?: any;
}

export class ApiService {
  private baseUrl: string;

  constructor(baseUrl: string) {
    this.baseUrl = baseUrl;
  }

  private async request<T>(
    endpoint: string,
    options?: RequestOptions
  ): Promise<T> {
    const url = `${this.baseUrl}${endpoint}`;
    const headers: Record<string, string> = {
      ...options?.headers,
    };
    let body: string | FormData | undefined = options?.body;

    if (body instanceof FormData) {
      delete headers['Content-Type'];
    } else if (typeof body === 'object') {
      headers['Content-Type'] = 'application/json';
      body = JSON.stringify(body);
    }

    const config: RequestInit = {
      method: options?.method,
      headers,
      body,
    };

    try {
      const response = await fetch(url, config);
      const responseData = await response.text();

      if (!response.ok) {
        throw new Error(`HTTP error! status: ${response.status}, body: ${responseData}`);
      }

      return responseData ? JSON.parse(responseData) : {};
    } catch (error) {
      console.error('Request error:', error);
      throw error;
    }
  }

  public async get<T>(endpoint: string, headers?: Record<any, any>): Promise<T> {
    return this.request<T>(endpoint, { method: "GET", headers });
  }

  public async post<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T> {
    return this.request<T>(endpoint, { method: "POST", body, headers });
  }

  public async put<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T> {
    return this.request<T>(endpoint, { method: 'PUT', body, headers });
  }

  public async delete<T>(endpoint: string, body: any, headers?: Record<string, string>): Promise<T> {
    return this.request<T>(endpoint, { method: 'DELETE', body, headers });
  }
}

const api = new ApiService(process.env.NEXT_PUBLIC_BASE_API_URL as string);
export default api;

 

Paylaş
logo

©2022 - 2024 Fatih Kurt.