Mục đích:
- Truy cập tài nguyên một cách độc lập, chỉ xử lý lấy dữ liệu, không chứa bất kì code logic nghiệp vụ nào.
- Tách biệt việc lấy dữ liệu và xử lý logic nghiệp vụ.
Cách thức: Áp dụng cho việc dựng code base Frontend để xử lý call API.
Để giúp anh em nắm rõ hơn về Design Pattern này, mình sẽ tạo mẫu code base Frontend xử lý việc call API.
Xây dựng base xử lý call API.
B1: Tạo file APIConfig.js chứa các thiết lập axios mặc định
import axios from 'axios';
const baseURL = 'https://test/api'; let api = axios.create({ baseURL: baseURL, headers: { 'Content-Type': 'application/json', 'Access-Control-Allow-Origin': '*' }
}) // Xử lý call API gặp lỗi 401 hoặc 403
api.interceptors.response.use((response) => response, (error) => { if (error && error.response && [401, 403].includes(error.response.status)) { // handle error } return Promise.reject(error);
}); export default api;
B2: Tạo file BaseAPI.js để xử lý các endpoint dùng chung
import APIConfig from "./APIConfig.js"; export default class BaseAPI { // Biến khởi tạo controller API controller = null; /** * Hàm get by ID * @param {*} payload * @returns */ getByID(id) { return APIConfig.get(`${this.controller}?id=${id}`); } /** * Hàm paging * @param {*} payload * @returns */ paging(payload) { return APIConfig.post(`${this.controller}/paging`, payload); } /** * Hàm save * @param {*} payload * @returns */ save(payload) { return APIConfig.post(`${this.controller}/save`, payload); }
}
B3: Giả xử chúng ta cần tạo API cho màn nhân viên, ta tạo file EmployeeAPI.js để xử lý các endpoint cho nhân viên.
EmployeeAPI sẽ kế thừa các endpoint dùng chung từ BaseAPI và được bổ sung một số endpoint khác theo nghiệp vụ riêng (vd: checkDuplicateEmployee).
import BaseAPI from "./BaseAPI.js";
import APIConfig from "./APIConfig.js"; class EmployeeAPI extends BaseAPI { constructor() { super() this.controller = "employee"; } /** * Hàm kiểm tra trùng lặp nhân viên theo nghiệp vụ riêng của Employee * @param {*} payload * @returns */ checkDuplicateEmployee(payload) { return APIConfig.post(`${this.controller}/check-duplicate`, payload); }
} export default new EmployeeAPI();
B4: Tạo file main.js để thực hiện gọi api EmployeeAPI
import EmployeeAPI from "./EmployeeAPI.js"; let payload = { pageIndex: 1, pageSize: 50
} EmployeeAPI.paging(payload).then(res => { // handle result
}).catch(err => { // handle error
}) EmployeeAPI.checkDuplicateEmployee(payload2).then(res => { // handle result
}).catch(err => { // handle error
})
Kết
Qua source mẫu trên, anh em có thấy thấy rằng việc áp dụng Respository đã giúp chúng ta tách biệt hoàn toàn được việc xử lý lấy dữ liệu một cách độc lập, giúp dễ dàng kiểm soát, tái sử dụng được các endpoint API.