Giới thiệu

Đối với các nhà phát triển frontend, việc xử lý phản hồi từ API là một nhiệm vụ thiết yếu để kết nối giữa logic của component và backend. Trong bài viết này, chúng ta sẽ cùng tìm hiểu cách sử dụng TypeScript để xử lý kết quả API một cách hiệu quả, bao gồm việc xử lý lỗi và thành công, cùng với một số tiện ích hữu ích trong TypeScript.

Vấn đề Thường Gặp

Khi xây dựng ứng dụng, thường có những lúc kiểu dữ liệu phản hồi từ API chỉ được mô tả bằng một loại duy nhất với các tham số tùy chọn. Dưới đây là một ví dụ:

export enum ApiStatus {
    OK = 'ok',
    ERROR = 'error',
    FORM_ERRORS = 'form_errors',
    REDIRECT = 'redirect'
}

export type ApiData = {
    status: ApiStatus
    error?: string
    errors?: Record<string, string>
    url?: string
}

Mặc dù phương pháp này mang lại sự đơn giản, nhưng nó có một nhược điểm lớn về tính minh bạch. Chúng ta không thể biết chính xác phản hồi cho một yêu cầu cụ thể sẽ có những gì.

Tách Biệt Các Tình Huống Phản Hồi

Để khắc phục những vấn đề trên, chúng ta có thể sử dụng các loại tiện ích có sẵn trong TypeScript để phân loại rõ ràng các trường hợp phản hồi, bao gồm:

• Thành công
• Lỗi từ máy chủ
• Lỗi xác thực
• Chuyển hướng

export type ApiSuccess<T> = T & { status: ApiStatus.OK }
export type ApiError<T = { error: string }> = T & { status: ApiStatus.ERROR }
export type ApiFormErrors<T = { errors: Record<string, string> }> = T & { status: ApiStatus.FORM_ERRORS }
export type ApiRedirect<T = { url: string }> = T & { status: ApiStatus.REDIRECT }

export type ApiResponse<T = unknown, K = { error: string }, R = { errors: Record<string, string> }> = ApiSuccess<T> | ApiError<K> | ApiFormErrors<R>

Với cách làm này, chúng ta có thể dễ dàng áp dụng các loại phản hồi khác nhau cho từng yêu cầu API mà không phải lo lắng về việc thiếu minh bạch.

Áp Dụng Thực Tế

Dưới đây là một ví dụ về việc gọi API để cập nhật thông tin người dùng:

const updateProfile = async (): Promise<void> => {
    try {
        const data = await updateProfileAPI({ name: 'New name' })

        if (data.status === ApiStatus.OK) {
            updatedProfileState(data.user)
            return;
        }

        if (data.status === ApiStatus.ERROR) {
            showNotification('danger', data.error);
            return;
        }

        if (data.status === ApiStatus.FORM_ERRORS) {
            showValidationErrors(data.errors);
            return;
        }

        if (data.status === ApiStatus.REDIRECT) {
            redirect(data.url);
            return;
        }

        throw new Error('Something went wrong...');
    } catch (err) {
        console.error('User: updateProfile - ', err);
    }
}

Kết Luận

Sử dụng các loại tiện ích trong TypeScript không chỉ giúp cải thiện quy trình phát triển mà còn giảm thiểu lỗi sai nhờ vào việc xác định rõ hơn các trạng thái phản hồi từ API. Bằng cách này, nhà phát triển sẽ có thể thao tác với dữ liệu một cách an toàn và hiệu quả hơn.

Hy vọng bài viết này đã giúp bạn hiểu rõ hơn về cách xử lý kết quả API cùng với TypeScript. Nếu bạn có bất kỳ câu hỏi nào, đừng ngần ngại để lại ý kiến nhé!
source: viblo