[ New ] Xây dựng 1 BaseService với Xử lý Lỗi Hiệu quả của bạn

Các bước sau đây có thể được sử dụng để tạo một BaseService sử dụng JavaScript thuần, tập trung vào việc xử lý lỗi khi gọi API. Cấu trúc này sẽ giúp bạn quản lý các yêu cầu API và xử lý lỗi một cách có hệ thống, đồng thời cung cấp cho người dùng thông báo lỗi và ghi log lỗi.

via GIPHY

Tạo cho kết hợp xử lý lỗi request

Để tạo một trang web thương mại điện tử tương tác với API của Flask bằng JavaScript thuần, bạn phải tạo thư mục dự án rõ ràng và phân chia các chức năng thích hợp.

Xây dựng BaseService với Xử lý Lỗi Hiệu quả trong JavaScript Thuần — Xây dựng với Xử lý Lỗi Hiệu quả trong JavaScript Thuần

Đây là một hướng dẫn về cách xây dựng cấu trúc thư mục, cũng như một ví dụ về cách tương tác với API Flask bằng JavaScript thuần.

class BaseService {
    constructor(baseURL) {
        this.baseURL = baseURL;
    }

    async request(endpoint, method = 'GET', body = null) {
        const url = `${this.baseURL}${endpoint}`;
        const options = {
            method,
            headers: {
                'Content-Type': 'application/json'
            }
        };

        if (body) {
            options.body = JSON.stringify(body);
        }

        try {
            const response = await fetch(url, options);
            if (!response.ok) {
                const errorData = await response.json();
                this.handleError(errorData.message || 'Unknown error occurred');
                return null;
            }
            return await response.json();
        } catch (error) {
            this.handleError(error.message || 'Network error');
            return null;
        }
    }

    handleError(errorMessage) {
        console.error('API Error:', errorMessage);
        this.showErrorNotification(errorMessage);
        this.logError(errorMessage);
    }

    showErrorNotification(errorMessage) {
        const errorContainer = document.getElementById('error-container');
        if (errorContainer) {
            errorContainer.innerText = errorMessage;
            errorContainer.style.display = 'block';
        } else {
            alert(errorMessage);
        }
    }

    logError(errorMessage) {
        // Implement your logging mechanism here, e.g., send to a logging server
        console.log('Logging error:', errorMessage);
    }
}

Ta bắt đầu kiểm tra từ !response.ok

Sau đó sẽ tiến hành bắt status và các mã code xử lý chung một flow

Và hiển thị lỗi lên web cho user

Xây dựng 1 BaseService với Xử lý Lỗi Hiệu quả — Xây dựng với Xử lý Lỗi Hiệu quả

Thay vì bạn tự tạo 1 request và tự bắt lỗi thì nên làm thế để gôm chung vừa nhanh, dễ bảo trì, và xây dựng chức năng.

Tạo các dịch vụ cụ thể kế thừa từ `BaseService`

class UserService extends BaseService {
    constructor(baseURL) {
        super(baseURL);
    }

    createUser(data) {
        return this.request('/users', 'POST', data);
    }

    getUser(userId) {
        return this.request(`/users/${userId}`);
    }
}

// Example usage:
const userService = new UserService('http://localhost:5000/api');

Sau đó chúng ta chỉ cần sử dụng OOP và kế thừa từ BaseService để gọi đến lớp cha.

Sử dụng dịch vụ trong giao diện người dùng

document.addEventListener('DOMContentLoaded', function () {
    const userService = new UserService('http://localhost:5000/api');

    document.getElementById('createUserForm').addEventListener('submit', async function (e) {
        e.preventDefault();
        const username = document.getElementById('username').value;
        const email = document.getElementById('email').value;
        const password = document.getElementById('password').value;

        const userData = {
            username,
            email,
            password_hash: password
        };

        const result = await userService.createUser(userData);
        if (result) {
            console.log('User created:', result);
            // Handle success (e.g., display a message or redirect)
        }
    });
});

Sau đó là tạo form để test thử việc gọi đến server

Bài kết tiếp là về phần Logger và Tracking

Giải thích về dịch vụ HandleError:

– Phương thức yêu cầu: Thực hiện yêu cầu HTTP và xử lý lỗi. Trong trường hợp phản hồi không thành công (!response).Được rồi, nó sẽ xử lý lỗi bằng cách gọi “gánh lỗi”.
– Phương thức handleError: hiển thị lỗi trên console, gọi showErrorNotification để thông báo cho người dùng và gọi logError để ghi log lỗi.
– Phương thức thông báo sai sót: Cập nhật container lỗi hoặc sử dụng thông báo nếu không có thể hiển thị thông báo lỗi cho người dùng.
– Phương thức logError: Ghi lại lỗi.
– Hỗ trợ khách hàng: kế thừa BaseService và thiết lập các chiến lược để tạo và thu thập dữ liệu người dùng.
– Trang trước:

– Để tạo người dùng và xử lý kết quả, tương tác với form và gọi các phương thức của UserService.
Cấu trúc này cho phép xử lý lỗi và quản lý nhiều dịch vụ một cách dễ dàng.

Cấu trúc này giúp dễ dàng mở rộng và quản lý các dịch vụ khác nhau cũng như xử lý lỗi một cách hiệu quả.

#Mtips5s #Contact

Fanpage: https://www.facebook.com/mtipscoder

Group trao đổi, chia sẻ: https://www.facebook.com/groups/mtipscoder

Website: https://mtips5s.com

Youtube: https://mtips5s.com

Twitter(X): @takagiks99

Instagram: @khuongkara

Threads: @khuongkara

Chúc các bạn thành công!

Comments

admin,

15 Jun 2024

khuong