Gửi dữ liệu JSON bằng phương thức POST đến API trong JavaScript
Hướng dẫn cách gửi dữ liệu JSON đến một API bằng phương thức POST trong JavaScript. Đoạn mã sử dụng phương thức fetch để thực hiện yêu cầu POST và bao gồm giải thích chi tiết từng bước.
Dưới đây là đoạn mã JavaScript sử dụng fetch để gửi dữ liệu JSON đến một API bằng phương thức POST:
const url = 'https://example.com/api'; // Địa chỉ API
const data = {
name: 'Nguyen Van A',
email: '[email protected]',
age: 30
};
// Gửi yêu cầu POST
fetch(url, {
method: 'POST', // Sử dụng phương thức POST
headers: {
'Content-Type': 'application/json' // Định dạng dữ liệu gửi đi là JSON
},
body: JSON.stringify(data) // Chuyển đổi đối tượng JavaScript thành chuỗi JSON
})
.then(response => response.json()) // Chuyển đổi phản hồi từ API thành JSON
.then(data => {
console.log('Success:', data); // Xử lý kết quả thành công
})
.catch((error) => {
console.error('Error:', error); // Xử lý lỗi nếu có
});Giải thích chi tiết:
-
URL API:
const url = 'https://example.com/api';: Đây là URL của API mà bạn sẽ gửi yêu cầu POST.
-
Dữ liệu JSON:
const data = {...};: Đối tượng JavaScript chứa dữ liệu cần gửi đi, ví dụ như tên, email và tuổi.
-
fetch API:
fetch(url, { method: 'POST', headers: {...}, body: ... }): Hàmfetchđược sử dụng để gửi yêu cầu HTTP. Trong trường hợp này, nó được sử dụng để thực hiện yêu cầu POST đến URL API.
-
Headers:
'Content-Type': 'application/json': Đây là header định nghĩa rằng dữ liệu được gửi là dạng JSON.
-
body:
body: JSON.stringify(data): Chuyển đổi đối tượng JavaScript thành chuỗi JSON để gửi đi.
-
Xử lý kết quả:
.then(response => response.json()): Phản hồi từ API sẽ được chuyển đổi thành định dạng JSON..then(data => ...): Xử lý dữ liệu phản hồi thành công..catch(error => ...): Xử lý các lỗi xảy ra trong quá trình gửi yêu cầu.
Phiên bản JavaScript:
Đoạn mã này tương thích với JavaScript phiên bản ES6 trở lên. Phương thức fetch được hỗ trợ trên hầu hết các trình duyệt hiện đại như Chrome, Firefox, Edge, và Safari.