Giới thiệu

Axios là một thư viện máy khách HTTP dựa trên lời hứa giúp việc gửi các yêu cầu HTTP không đồng bộ trở nên đơn giản (chẳng hạn như POST, GETvà DELETE) đến các điểm cuối REST, chủ yếu là các API.

Trong bài viết này, chúng ta sẽ tìm hiểu cách gửi các yêu cầu POST JSON với Axios và cách xử lý cả dữ liệu đã được tuần tự hóa và chưa được doanh nghiệp hóa trước đó.

Cách gửi yêu cầu JSON POST bằng Axios

Yêu cầu ĐĂNG được sử dụng để gửi dữ liệu đến một điểm cuối. Ví dụ: nếu chúng tôi có trang đăng ký nơi người dùng gửi thông tin của họ, thông tin này có thể được gửi dưới dạng JSON đến điểm cuối mà chúng tôi chỉ định bằng cách sử dụng yêu cầu POST JSON.

Chúng tôi sử dụng axios.post() để gửi một yêu cầu POST với Axios, phương thức này nhận hai tham số chính - URL của điểm cuối (url), và đối tượng đại diện cho dữ liệu mà chúng tôi muốn đăng (data):

axios.post(url[, data[, config]])

Bên cạnh hai tham số đó, còn có một tham số thứ ba - config. Nó được sử dụng để định cấu hình yêu cầu POST mà chúng tôi đang gửi, chủ yếu để đặt tiêu đề.

Gửi dữ liệu chưa được số liệu hóa

Điều quan trọng cần lưu ý là Axios sử dụng JSON để đăng dữ liệu theo mặc định, có nghĩa là bất kỳ đối tượng nào chúng tôi chuyển vào Axios sẽ tự động tuần tự hóa đối tượng thành JSON và đặt Content-Type tiêu đề tới application/json. Hãy minh họa điều đó trong ví dụ - giả sử chúng ta đang đăng đối tượng { name: 'John Doe' }:

const result = await axios.post('https://testapi.org/post', { name: 'John Doe' });

Axios sẽ tự động tuần tự hóa đối tượng thành định dạng JSON:

console.log(result.data.data);

Và như chúng tôi đã nói, nó cũng sẽ thiết lập Content-Type tiêu đề tới application/json:

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

Gửi chuỗi JSON được tuần tự hóa

Cho đến nay, chúng tôi đã thấy rằng Axios sẽ tự động tuần tự hóa bất kỳ dữ liệu nào chúng tôi gửi nó, nhưng trong trường hợp này, chúng tôi sẽ gửi một chuỗi JSON được tuần tự hóa làm tham số thứ hai của axios.post() phương pháp:

const usersName = JSON.stringify({ name: 'John Doe' });

Axios sẽ đơn giản coi dữ liệu này như một nội dung yêu cầu được mã hóa biểu mẫu thay vì đặt tiêu đề loại nội dung thành application/json, như hình dưới đây:

const usersName = JSON.stringify({ name: 'John Doe' });
const result = await axios.post('https://testapi.org/post', usersName);

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

Để giải quyết vấn đề này, chúng tôi cần đặt Content-Type tiêu đề tới application/json. Chúng ta có thể làm điều đó bằng cách vượt qua config đối số khi gọi axios.post() phương pháp:

const usersName = JSON.stringify({ name: 'John Doe' });
customConfig = {
    headers: {
    'Content-Type': 'application/json'
    }
};
const result = await axios.post('https://testapi.org/post', usersName, customConfig);

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

Kết luận

Trong bài viết này, chúng tôi đã học cách gửi các yêu cầu POST JSON với Axios, hoàn toàn biết rằng những dữ liệu này có thể được tuần tự hóa hoặc không được tuần tự hóa và chúng tôi đã xử lý cả hai trường hợp.