Giới thiệu

Axios là thư viện máy khách HTTP được sử dụng để gửi các yêu cầu HTTP không đồng bộ như POST, GETvà DELETE đến điểm cuối REST (chủ yếu là API). Một số yêu cầu này, chẳng hạn như GET và POST, có thể bao gồm các tiêu đề cung cấp nguồn thông tin bổ sung cho mỗi lệnh gọi API.

Trong bài viết này, chúng ta sẽ tìm hiểu cách gửi tiêu đề cùng với yêu cầu POST trong Axios.

Tiêu đề rất quan trọng khi thực hiện yêu cầu API và là một trong những nơi đầu tiên chúng tôi xem xét khi gặp sự cố với API vì chúng giúp chúng tôi theo dõi mọi sự cố tiềm ẩn.

Cấu trúc yêu cầu POST trong Axios

Yêu cầu POST của Axios có thể chấp nhận ba tham số: URL, dữ liệu của điểm cuối và đối tượng cấu hình chấp nhận các tiêu đề:

const res = await axios.post(URL, data, config);

Khi chuyển các tiêu đề vào Axios, chúng tôi cung cấp một đối tượng chứa các tiêu đề mà chúng tôi muốn chuyển làm config tham số. Ví dụ: giả sử chúng tôi muốn gửi yêu cầu POST tới máy chủ chỉ chấp nhận text/json loại nội dung (thay vì thông thường application/json). Trong trường hợp đó, chúng ta có thể tùy chỉnh loại nội dung muốn gửi trong header:

const result = await axios.post('https://testapi.org/post', { name: 'John Doe' }, {
    headers: {
    'content-type': 'text/json'
    }
});

Ngoài ra, chúng ta có thể sử dụng các biến thay vì truyền trực tiếp các đối tượng này vào axios.post() phương pháp. Điều này chắc chắn cải thiện khả năng đọc mã của chúng tôi:

const headers = {
    "Content-Type": "text/json"
};

const data = {
    name: "John Doe"
};

const result = await axios.post("https://testapi.org/post", data, {
    headers: headers
});

Hãy nhanh chóng xác nhận điều này hoạt động như mong đợi:

console.log(result.data.headers['Content-Type']);

Kết luận

Trong bài viết này, chúng ta đã tìm hiểu cách gửi tiêu đề với các yêu cầu POST trong Axios, cũng như cấu trúc của yêu cầu Axios, để chúng ta không nhầm lẫn config đối tượng cho data đối tượng, như nhiều người làm.