Giới thiệu

Trong quá trình phát triển ứng dụng web, việc xác thực dữ liệu từ người dùng gửi lên server là rất quan trọng. Tuy nhiên, chúng ta thường bỏ qua việc kiểm tra xem dữ liệu nhận được có phù hợp với yêu cầu hay không. Để giải quyết vấn đề này, chúng ta có thể sử dụng thư viện Yup để xác thực các phản hồi từ API một cách hiệu quả.

Yup là gì?

Theo tài liệu của Yup:

Yup là một trình xây dựng schema cho việc phân tích và xác thực giá trị tại thời điểm chạy. Định nghĩa một schema, biến đổi một giá trị để phù hợp, kiểm tra hình dạng của một giá trị hiện có, hoặc cả hai. Schema Yup rất dễ hiểu và cho phép mô hình hóa các xác thực phức tạp, có sự phụ thuộc lẫn nhau, hoặc biến đổi giá trị.

Điều này có nghĩa là với Yup, chúng ta có thể định nghĩa cách mà một đối tượng nên có hình dạng, thay đổi giá trị để phù hợp với đối tượng đó và xác thực xem một đối tượng có giống như mong đợi hay không.

Một điểm quan trọng cần lưu ý là Yup hoạt động tại thời điểm chạy.

Tại sao xác thực phản hồi API lại quan trọng?

Dưới đây là một số lý do cho thấy việc xác thực phản hồi từ server là rất cần thiết:

• Bảo vệ khỏi các thay đổi không tương thích: Giúp bảo vệ client khỏi các thay đổi không tương thích từ backend.
• An toàn kiểu dữ liệu: Trong khi Typescript giúp chúng ta sử dụng các kiểu dữ liệu đúng trước khi thực thi mã, xác thực tại thời điểm chạy giúp đảm bảo rằng dữ liệu thực tế khớp với kỳ vọng.
• Quản lý lỗi tốt hơn: Việc xác thực giúp phát hiện bất kỳ sự không nhất quán nào trong dữ liệu và xử lý tình huống một cách hợp lý, thay vì để lại cho người dùng những lỗi không mong muốn trong quá trình chạy.
• Tài liệu sống: Các định nghĩa schema phục vụ như tài liệu sống trong mã nguồn front-end của chúng ta.

Cách sử dụng Yup để xác thực phản hồi API

Chúng ta có thể định nghĩa một schema phản hồi cơ bản cho nhiều endpoint, sau đó mở rộng schema của mình cho mỗi endpoint theo cách phù hợp:

const generalResponseSchema = Yup.object().shape({
    status: Yup.string().oneOf(['success', 'error']).required(),
    message: Yup.string(),
    data: Yup.mixed() // Sẽ được tinh chỉnh cho các endpoint cụ thể
})

Tạo các schema cụ thể cho từng endpoint:

const userResponseSchema = generalResponseSchema.shape({
    data: Yup.object().shape({
        id: Yup.string().required(),
        username: Yup.string().required(),
        profile: Yup.object().shape({
            firstName: Yup.string(),
            lastName: Yup.string(),
        })
    })
})

Tạo hàm bọc để xác thực phản hồi:

export async function validateAPIResponse(schema, response) {
    try {
        const validatedResponse = await schema.validate(response, {
            // Bỏ qua các nỗ lực ép kiểu và biến đổi
            strict: true,
            // Thu thập tất cả lỗi thay vì dừng lại ở lỗi đầu tiên
            abortEarly: false,
        });

        return {
            isValid: true,
            data: validatedResponse,
            errors: null,
        };
    } catch (error) {
        return {
            isValid: false,
            data: null,
            errors: error.errors,
        };
    }
}

Sử dụng hàm xác thực và schema mẫu:

async function fetchUserData(userId) {
    try {
        const response = await fetch(`api/users/${userId}`);
        const data = await response.json(); 

        const validation = await validateAPIResponse(userResponseSchema, data);

        return validation.data;
    } catch (error) {
        // Xử lý lỗi một cách thích hợp
        throw error;
    }
}

Tổ chức và an toàn kiểu dữ liệu

Một cách tiếp cận tốt là tạo một tệp sample.schema.ts và đặt định nghĩa schema ở đó. Chúng ta cũng có thể suy diễn kiểu schema và sử dụng nó trong ứng dụng của mình, bằng cách nhập InferType:

const userResponseSchema = Yup.object().shape({
    id: Yup.string().required(),
    username: Yup.string().required(),
    profile: Yup.object().shape({
        firstName: Yup.string(),
        lastName: Yup.string(),
    })
});

export type User = InferType<typeof userResponseSchema>;

Kết luận

Việc xác thực phản hồi từ dịch vụ backend không chỉ giúp đảm bảo rằng dữ liệu nhận được là chính xác mà còn giúp cải thiện độ tin cậy và khả năng bảo trì của ứng dụng. Hãy bắt đầu áp dụng Yup vào dự án của bạn ngay hôm nay để bảo vệ ứng dụng khỏi các lỗi tiềm ẩn và nâng cao trải nghiệm người dùng!

Thực hành tốt nhất

• Định nghĩa rõ ràng schema: Đảm bảo rằng các schema được định nghĩa rõ ràng và dễ hiểu.
• Xử lý lỗi hợp lý: Cần có cách xử lý lỗi tốt để người dùng không phải đối mặt với những lỗi không mong muốn.

Những cạm bẫy thường gặp

• Bỏ qua xác thực: Nhiều lập trình viên thường bỏ qua việc xác thực phản hồi, dẫn đến lỗi trong ứng dụng.
• Sử dụng schema không chính xác: Đảm bảo rằng schema được sử dụng đúng cách cho từng endpoint.

Mẹo hiệu suất

• Tối ưu hóa schema: Tối ưu hóa cách định nghĩa schema để giảm thiểu thời gian xác thực.

Câu hỏi thường gặp (FAQ)

1. Yup có miễn phí không?

• Yup là một thư viện mã nguồn mở và hoàn toàn miễn phí.

2. Tôi có thể sử dụng Yup với các framework nào?

• Yup có thể được sử dụng với bất kỳ framework JavaScript nào như React, Vue, Angular, v.v.

3. Làm thế nào để xử lý lỗi xác thực?

• Bạn có thể sử dụng cấu trúc try-catch để xử lý lỗi khi xác thực các phản hồi API.

Tài liệu tham khảo

• Validating API Response with Yup
• Yup repo
• Response validation with Yup