Giới thiệu

Trong phát triển API hàng ngày, mocking gần như là không thể tránh khỏi. Dù là trong giai đoạn phát triển nhanh chóng của một dự án hay khi một endpoint chưa sẵn sàng, mocking đảm bảo rằng phát triển front-end diễn ra suôn sẻ—ngay cả khi không có dữ liệu backend thực sự.

1. Những vấn đề thực tế

Hãy tưởng tượng bạn đang xây dựng một giao diện front-end cho một trang thương mại điện tử. Khi người dùng nhấp vào "Thanh toán ngay", front-end của bạn sẽ gọi đến endpoint /pay của backend, với phản hồi như sau:

{
    "data": {
        "code": 0,
        "message": "thành công",
        "pay_dtime":"2025-08-10 10:00:00",
        "order_id":"sn12345678"
    }
}

Nhưng những vấn đề xảy ra là:

• Backend chưa sẵn sàng, vì vậy bạn không thể kiểm tra quy trình thanh toán.
• API thanh toán phụ thuộc vào một cổng thanh toán bên ngoài, không được cấu hình trong môi trường thử nghiệm.
• Một số endpoint yêu cầu xác thực phức tạp hoặc chuẩn bị dữ liệu, khiến chúng không thể sử dụng sớm.

Chờ đợi phát triển backend sẽ cản trở tiến trình front-end—đây là lúc mocking trở nên quan trọng.

2. Các phương pháp mocking phổ biến và hạn chế

2.1 Tệp JSON cục bộ

Cách đơn giản nhất: tạo mock/data.json và lấy nó:

fetch('/mock/pay.json')

Nhược điểm:

• Dữ liệu là tĩnh; không thể mô phỏng nhiều kịch bản.
• Không thể xử lý logic phức tạp như phân trang hay truy vấn có điều kiện.

2.2 Chặn yêu cầu front-end (axios-mock-adapter, Mock.js)

Chặn yêu cầu trong trình duyệt:

mock.onPost('/api/pay/confirm').reply(200, {
  "data": {
    "code": 0,
    "message": "thành công",
    "pay_dtime":"2025-08-10 10:00:00",
    "order_id":"sn12345678"
  }
});

Nhược điểm:

• Chỉ có thể sử dụng trong dự án front-end.
• Dữ liệu được mã hóa cứng trong mã; khó duy trì.

2.3 Máy chủ mock tự lưu trữ (json-server, Easy Mock)

Chạy một dịch vụ mock riêng biệt:

Nhược điểm:

• Chi phí thiết lập và bảo trì cao.
• Logic phức tạp yêu cầu lập trình bổ sung; tính linh hoạt bị giới hạn.

Những phương pháp này hoạt động cho nhu cầu cơ bản nhưng thiếu tính linh hoạt và tạo dữ liệu động khi độ phức tạp của dự án tăng lên.

3. Mocking với EchoAPI trong thực tế

EchoAPI cung cấp một giải pháp linh hoạt và hiện đại, hỗ trợ cả phát triển nhanh chóng và các kịch bản phức tạp. Hãy cùng xem xét /pay như một ví dụ.

3.1 Mock giá trị cố định

Mô phỏng một phản hồi cố định:

{
  "data": {
    "code": 0,
    "message": "thành công"
  }
}

Trong EchoAPI, bạn tạo một API POST /pay, xác định phản hồi trực quan:

Sau đó chuyển sang tab Mock để có URL mock đã được tạo ra:

Gọi URL này sẽ trả về phản hồi đã được định nghĩa.

3.2 Giá trị ngẫu nhiên

Thêm các trường động như pay_dtime. EchoAPI có các biến tích hợp để tạo ra các giá trị ngẫu nhiên hoặc theo thời gian:

{
  "data": {
    "code": 0,
    "message": "thành công",
    "pay_dtime":"2025-08-10 10:00:00"
  }
}

Chỉ cần chèn một biến ngày tích hợp:

Phản hồi ví dụ:

Giờ đây, mỗi yêu cầu trả về dữ liệu mới, tránh được hạn chế của JSON tĩnh.

3.3 Hàm tùy chỉnh

Đối với các trường rất tùy chỉnh, như order_id bắt đầu bằng sn theo sau là 8 chữ số:

{
  "data": {
    "code": 0,
    "message": "thành công",
    "pay_dtime":"2025-08-10 10:00:00",
    "order_id":"sn12345678"
  }
}

Sử dụng hàm tùy chỉnh của EchoAPI:

Tạo fn_orderno sử dụng AI hoặc logic thủ công:

Ví dụ về phản hồi:

3.4 Phản hồi điều kiện

Xử lý nhiều kịch bản: thành công, số dư không đủ, tài khoản bị khóa. Đặt kỳ vọng cho "số dư không đủ":

Phản hồi được trả về:

Cách tiếp cận này gần gũi hơn với hành vi thực tế so với JSON tĩnh.

4. Tổng kết

Mocking là cần thiết cho hiệu quả front-end:

• Front-end có thể phát triển độc lập với sự sẵn sàng của backend.
• QA có thể tái sử dụng các liên kết mock để kiểm tra sớm.

Lợi thế của EchoAPI:

• Biến tích hợp: tạo dữ liệu đa dạng nhanh chóng.
• Hàm tùy chỉnh: thực hiện logic kinh doanh phức tạp, hỗ trợ AI nếu cần.

Dù bạn cần phát triển nhanh, phát triển độc lập hay mô phỏng kịch bản thực tế, EchoAPI cung cấp giải pháp linh hoạt, chuyên nghiệp và tiết kiệm thời gian, giúp dự án của bạn tiếp tục tiến lên một cách trơn tru.