TypeScript Tricks

Request Handler Axios

Bu kod bir genel HTTP istek işleyicisi (request handler) sağlayan bir util (yardımcı) fonksiyon ve bu fonksiyonun kullanımı için tanımlanmış türleri içerir. Aşağıda kodun açıklamasını bulabilirsiniz:

1. BaseRequest Türü:

• BaseRequest<T, V> türü, bir HTTP isteğini temsil eder.
• T parametresi, istek için kullanılan parametre türünü belirtir.
• V parametresi, isteğin başarılı olması durumunda dönen veri türünü belirtir.

2. SuccessResponse ve ErrorResponse Tipleri:

• SuccessResponse<V> türü, başarılı bir HTTP isteği sonucunda dönen veriyi temsil eder.
• ErrorResponse<E> türü, bir hata durumunda dönen hatayı temsil eder.
• E parametresi, istek sırasında oluşan hatanın türünü belirtir. Varsayılan olarak AxiosError olarak belirlenmiştir.

3. BaseResponse Türü:

• BaseResponse<V, E> türü, bir HTTP isteğinin sonucunu temsil eder.
• Başarılı bir istek durumunda SuccessResponse<V> tipinde bir nesne döner.
• Hata durumunda ErrorResponse<E> tipinde bir nesne döner.

4. requestHandler Fonksiyonu:

• requestHandler fonksiyonu, bir BaseRequest türündeki isteği işleyen bir util fonksiyondur.
• T, V, ve E parametreleri, istek, başarılı cevap ve hata türlerini belirtir.
• Fonksiyon, isteği alır ve bu isteği işleyen bir fonksiyon döner. Bu dönen fonksiyon, belirtilen parametreleri kullanarak bir HTTP isteği gerçekleştirir.
• Başarılı bir istek durumunda, SuccessResponse tipinde bir nesne döner.
• Hata durumunda, ErrorResponse tipinde bir nesne döner.

5. İşleyici (Handler) Kullanımı:

• Örneğin, requestHandler fonksiyonu bir GET isteği için kullanılacaksa, ilgili endpoint ve parametrelerle bir BaseRequest fonksiyonu oluşturulmalıdır.
• Bu oluşturulan fonksiyon, requestHandler fonksiyonuna parametre olarak verilerek kullanılır.
• Kullanım sonucunda, başarılı bir istek durumunda SuccessResponse tipinde bir nesne veya hata durumunda ErrorResponse tipinde bir nesne elde edilir.

import { AxiosError, AxiosResponse } from "axios";

type BaseRequest<T, V> = (params?: T) => Promise<AxiosResponse<V>>;

type SuccessResponse<V> = {
  code: "success";
  data: V;
};

  type ErrorResponse<E = AxiosError> = {
    code: "error";
    error: E;
  };

    type BaseResponse<V, E> = Promise<SuccessResponse<V> | ErrorResponse<E>>;

      export const requestHandler =
      <T, V, E = AxiosError>(request: BaseRequest<T, V>) =>
      async (params?: T): BaseResponse<V, E> => {
        try {
        const response = await request(params);
        return { code: "success", data: response.data };
      } catch (e) {
        return { code: "error", error: e as E };
      }
};

  import axios from "axios";
  import { requestHandler } from "./requestHandler";

  interface Posts {
  userId: number
  id: number
  title: string
  body: string
}

  interface GetPostsParams {
  limit?: number;
  page?: number;
}

  export const getPosts = requestHandler<GetPostsParams, Posts[]>((params) =>
  axios.get("/https://jsonplaceholder.typicode.com/posts", { params })
  );

import { getPosts } from "./getPosts";

export default async function Home() {
const postsResponse = await getUsers({ limit: 10, page: 1 });

if (postsResponse.code === "error") {
return <div>{postsResponse.error.message}</div>;
}

return (
<div>
{postsResponse.data.map((post) => (
  <div key={post.id}>{post.title}</div>
))}
</div>
);
}

Error Handling

Error Handling (Hata Yönetimi), bir programın çalışma sırasında ortaya çıkan hataları tespit etme, ele alma ve bu hatalarla başa çıkma sürecidir. Hatalar, genellikle beklenmeyen durumları veya uygulama akışını etkileyen problemleri temsil eder. Hata yönetimi, bir programın daha güvenilir, hata toleranslı ve anlaşılır olmasına yardımcı olur.

Hata Yönetimi, aşağıdaki temel adımları içerir:

1. Hata Tespiti (Error Detection): Programın çalışması sırasında oluşabilecek hataların tanımlanması ve algılanması. Bu, yanlış kullanım, geçersiz veri girişi veya sistemle ilgili sorunlar gibi çeşitli nedenlere dayanabilir.

2. Hata Bildirimi (Error Reporting): Tespit edilen hataların kullanıcıya veya geliştiriciye bildirilmesi. Bu bildirimler genellikle hata mesajları, log kayıtları veya kullanıcı arayüzü üzerinden hata ile ilgili bilgileri içerir.

3. Hata Ele Alma (Error Handling): Hataların uygun bir şekilde ele alınması ve programın kontrol akışının bu hatalara göre yönlendirilmesi. Bu, programın çökmesini önlemek, kullanıcıya anlaşılır mesajlar göstermek veya alternatif bir işlem yolu belirlemek gibi şeyleri içerebilir.

4. Hata Ayıklama (Debugging): Programın geliştirme sürecinde, hataların kaynağını bulma ve düzeltme süreci. Bu süreç genellikle geliştiricilerin kaynak kodunu inceleyerek, hata ayıklayıcı araçları kullanarak veya log kayıtlarını analiz ederek gerçekleştirilir.

Hata yönetimi, yazılım geliştirme sürecinde önemli bir yere sahiptir çünkü hataların etkili bir şekilde ele alınması, uygulamanın güvenilirliğini artırır, kullanıcı deneyimini iyileştirir ve genel sistem kararlılığını sağlar.

  /**
  * İki sayıyı toplayan fonksiyon.
  * @param {number} a - Toplanacak ilk sayı.
  * @param {number} b - Toplanacak ikinci sayı.
  * @returns {number} - Toplama işleminin sonucu.
  * @throws {Error} - Eğer bir parametre sayı değilse veya eksikse hata fırlatılır.
  */
  function addNumbers(a, b) {
  // Parametreleri kontrol et ve uygun değilse hata fırlat
  if (typeof a !== 'number' || typeof b !== 'number' || isNaN(a) || isNaN(b)) {
  throw new Error('Geçerli sayısal parametreler bekleniyor');
}

  return a + b;
}

  // Örnek kullanım
  try {
  const result = addNumbers(5, 'Merhaba'); // Hata oluşturacak bir örnek
  console.log('Sonuç:', result);
} catch (error) {
  console.error('Hata yakalandı:', error.message);
}