Cách gửi yêu cầu POST Fetch bằng JavaScript

"Fetch POST Requests" có hai thuật ngữ mà bạn thường nghe khi thảo luận về phát triển web. Thường được sử dụng trong các tình huống để tạo bản ghi hoặc dữ liệu mới trên máy chủ, chúng rất quan trọng cho các hệ thống hoặc ứng dụng để giao tiếp với nhau. Mặc dù nghe có vẻ phức tạp, bài viết này sẽ phân tích các yêu cầu Fetch POST cho bạn!

💡

Apidog là một nền tảng phát triển API theo thiết kế đầu tiên giúp đơn giản hóa việc tạo và xây dựng các yêu cầu POST. Giao diện người dùng trực quan của nó giúp cho cả người mới bắt đầu và các chuyên gia dễ dàng thiết kế và khởi chạy các API một cách hiệu quả. Trải nghiệm sức mạnh của Apidog ngay hôm nay. Thử ngay 👇 👇

button

Fetch API là gì?

Fetch API là một giao diện JavaScript hiện đại được cung cấp bởi các trình duyệt web để thực hiện các yêu cầu HTTP và xử lý các phản hồi. Nó là một bản thay thế linh hoạt và mạnh mẽ hơn cho API XMLHttpRequest cũ, mà truyền thống được sử dụng để thực hiện các yêu cầu không đồng bộ trong JavaScript.

Mặc dù Fetch API có thể xử lý các loại yêu cầu HTTP khác nhau, bao gồm GET, POST, PUT, DELETE, vv, nó đặc biệt hữu ích cho việc thực hiện các yêu cầu POST, thường được sử dụng để gửi dữ liệu đến máy chủ.

Khi thực hiện một yêu cầu POST sử dụng Fetch API, bạn có thể bao gồm thân yêu cầu, chứa dữ liệu bạn muốn gửi đến máy chủ. Thân yêu cầu có thể ở nhiều định dạng khác nhau, chẳng hạn như JSON, FormData, hoặc văn bản thuần túy.

Cách gửi yêu cầu Fetch POST với JavaScript?

Bước 1: Thiết lập yêu cầu

Xác định URL điểm cuối của máy chủ để gửi dữ liệu tới. Các điểm cuối sẽ xử lý các yêu cầu POST và dữ liệu đi kèm.
Đặt phương thức HTTP thành POST sử dụng thuộc tính method trong tùy chọn yêu cầu của fetch().
Bao gồm thông tin bổ sung như loại nội dung trong tiêu đề yêu cầu sử dụng thuộc tính headers dưới dạng một đối tượng.
Thân yêu cầu chứa dữ liệu để gửi đến máy chủ. Sử dụng định dạng JSON (JavaScript Object Notation) bằng cách chuyển đổi một đối tượng JavaScript thành chuỗi JSON với JSON.stringify().

Bước 2: Khởi động Yêu cầu

Sử dụng hàm fetch() để khởi động yêu cầu POST.

Bước 3: Xử lý Phản hồi

Hứa hẹn fetch() sẽ trả về một đối tượng Response khi thành công. Xử lý nó với .then().
Kiểm tra response.ok để tìm mã trạng thái lỗi như 400 hoặc 500. Ném ra một lỗi để xử lý các trường hợp thất bại.
Phân tích thân trả về JSON thành đối tượng JavaScript sử dụng response.json().

Bước 4: Xử lý Lỗi

Sử dụng .catch() để xử lý các lỗi trong quá trình yêu cầu như vấn đề mạng hoặc máy chủ.

Ví dụ đầy đủ: Tạo một mục Todo

const url = 'https://api.example.com/todos';
const data = { 
  title: 'Mua sắm',
  completed: false
};

const jsonData = JSON.stringify(data);

const headers = new Headers();
headers.append('Content-Type', 'application/json');

fetch(url, {
  method: 'POST', 
  headers: headers,
  body: jsonData
})
.then(response => {
  if (!response.ok) {
    throw new Error(`Lỗi HTTP! trạng thái: ${response.status}`);
  }
  return response.json();
})
.then(responseData => {
  console.log('Todo đã được tạo thành công:', responseData);  
})
.catch(error => {
  console.error('Lỗi:', error);
});

Mã JavaScript này gửi một yêu cầu POST để tạo một mục todo mới với tiêu đề và trạng thái hoàn thành. Nó minh họa việc thiết lập yêu cầu, gửi yêu cầu với fetch(), xử lý phản hồi và lỗi.

Apidog - Một công cụ API mạnh mẽ để tạo các yêu cầu Fetch POST

Apidog, một nền tảng phát triển API theo thiết kế đầu tiên, có thể trở thành người bạn tốt nhất của các nhà phát triển API. Bạn có thể xây dựng các yêu cầu Fetch POST với Apidog - và kiểm tra, mô phỏng, và tài liệu cho chúng sau khi thiết kế!

button

Tạo mã Fetch sử dụng Apidog

Bạn có thể sử dụng tính năng tạo mã của Apidog để cung cấp cho bạn các mã shell của Fetch API.

Trên bất kỳ API hoặc yêu cầu nào, bạn có thể tìm thấy và nhấn nút </> , sau đó nhấn nút Generate Client Code, như đã chỉ ra trong hình trên.

Với Apidog, bạn có thể tạo mã client Fetch. Tất cả những gì bạn cần làm tiếp theo là sao chép và dán mã vào nền tảng lập trình của bạn.

Tạo và kiểm tra một yêu cầu Fetch POST bằng Apidog

Bắt đầu xây dựng yêu cầu Fetch POST của riêng bạn với Apidog bằng cách làm theo các bước dưới đây. Trong Apidog, các tham số trong thân yêu cầu POST bao gồm dữ liệu JSON, dữ liệu biểu mẫu, XML, vv.

Bắt đầu bằng cách tạo một yêu cầu HTTP POST mới trên Apidog. Nhập một URL REST API phù hợp. Bạn có thể sử dụng sự kết hợp của các tham số đường dẫn và truy vấn, cùng với nhiều ID để tạo một URL API cụ thể hơn.

Gửi dữ liệu JSON trong yêu cầu POST

Mặc dù bạn nhập liệu dữ liệu JSON của mình bằng tay, Apidog cũng hỗ trợ tự động tạo các thân yêu cầu JSON từ các mẫu, tiết kiệm thời gian và đảm bảo cấu trúc JSON nhất quán.

Đây là một hướng dẫn chi tiết về dữ liệu JSON POST cho bạn, hãy kiểm tra ngay.

Gửi dữ liệu biểu mẫu trong yêu cầu POST

Trong một số trường hợp, việc gửi dữ liệu với loại nội dung của các tham số form-data là cần thiết. Apidog đơn giản hóa quá trình này. Là một khách hàng API thân thiện với người sử dụng, Apidog cho phép bạn dễ dàng bao gồm dữ liệu biểu mẫu trong thân yêu cầu khi thử nghiệm các API. Bạn có thể chỉ định loại nội dung cho từng tham số, làm cho việc gửi yêu cầu form-data trở nên thuận tiện.

Tải lên tệp trong yêu cầu POST

Khi kiểm tra API, thường cần phải tải lên tệp như một phần của yêu cầu. Trong Apidog, bạn có thể dễ dàng tải lên tệp để thử nghiệm bằng cách tạo một yêu cầu mới và điều hướng đến tab "Body". Bạn có thể nhấn nút "Tải lên" để chọn tệp mà bạn muốn tải lên trong Apidog.

Khi bạn đã hoàn thành việc bao gồm tất cả các tham số yêu cầu, bạn có thể lưu API POST bằng cách nhấn nút Lưu.

Để đảm bảo rằng yêu cầu POST của bạn phản hồi, hãy nhấn nút Gửi để thử nghiệm một yêu cầu.

Nếu yêu cầu của bạn được gửi thành công, bạn sẽ nhận được phản hồi, như đã hiển thị trong phần dưới của hình trên.

Kết luận

Các yêu cầu Fetch POST là sự kết hợp giữa những lợi ích của Fetch API với các yêu cầu POST, cho phép các nhà phát triển API gửi dữ liệu một cách hiệu quả đến các máy chủ theo một cách hiện đại và sạch sẽ. Chúng mang lại những lợi ích như:

Cú pháp đơn giản hơn so với các phương pháp cũ hơn (XHR).
Cải thiện tính khả đọc với sự phân chia rõ ràng về các vấn đề cần giải quyết.
Các tính năng tích hợp để xử lý phản hồi và lỗi dễ dàng hơn.

Nếu bạn đang làm việc với JavaScript, việc sử dụng Fetch API cho các yêu cầu POST thường được khuyến nghị do phương pháp hiện đại và các tính năng thân thiện với người phát triển của nó.

Khi tìm kiếm một công cụ API phù hợp để thiết kế yêu cầu Fetch POST, bạn có thể xem xét việc sử dụng Apidog. Ngoài các chức năng xây dựng chung, Apidog giúp thử nghiệm, mô phỏng và tài liệu các API - tất cả đều miễn phí! Bạn cũng có thể dựa vào Apidog để giúp bạn với lập trình Fetch API nếu bạn không tự tin.

button