programming

Làm cách nào để gửi dữ liệu bằng Axios?

Dưới đây là một tập hợp nhanh các ví dụ để chỉ ra cách gửi yêu cầu HTTP POST tới API bằng ứng dụng khách HTTP

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

3 có sẵn trên npm

Các ví dụ HTTP khác có sẵn

Cài đặt axios từ npm

Với CLI npm.

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

Với sợi CLI.

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

Yêu cầu POST đơn giản với nội dung JSON sử dụng axios

Thao tác này sẽ gửi một yêu cầu HTTP POST tới api Reqres, một api REST trực tuyến giả mạo được sử dụng để thử nghiệm, nó bao gồm một tuyến đường

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

6 chung hỗ trợ các yêu cầu

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

7 tới bất kỳ

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

8 nào và phản hồi với nội dung của nội dung bài đăng và thuộc tính id động. Ví dụ này gửi một đối tượng

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

0 đến tuyến đường

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

1 và sau đó ghi id từ phản hồi vào phần tử

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

2 để nó được hiển thị trên trang

// Simple POST request with a JSON body using axios
const element = document.querySelector['#post-request .article-id'];
const article = { title: 'Axios POST Request Example' };
axios.post['//reqres.in/api/articles', article]
    .then[response => element.innerHTML = response.data.id];

Ví dụ về yêu cầu POST của Axios tại https. // stackblitz. com/edit/axios-http-post-request-examples?file=post-request. js

POST yêu cầu sử dụng axios với async/await

Điều này sẽ gửi cùng một yêu cầu POST với axios, nhưng phiên bản này sử dụng hàm

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

3 và biểu thức javascript

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

4 để chờ lời hứa trả về [thay vì sử dụng phương thức lời hứa

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

5 như trên]

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

Ví dụ về yêu cầu POST của Axios tại https. // stackblitz. com/edit/axios-http-post-request-examples?file=post-request-async-await. js

POST yêu cầu sử dụng axios với xử lý lỗi

Điều này sẽ gửi một yêu cầu POST với các axios tới một url không hợp lệ trên api, sau đó viết thông báo lỗi cho phần tử gốc của phần tử

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

6 và ghi lỗi vào bảng điều khiển

// POST request using axios with error handling
const element = document.querySelector['#post-request-error-handling .article-id'];
const article = { title: 'Axios POST Request Example' };
axios.post['//reqres.in/invalid-url', article]
    .then[response => element.innerHTML = response.data.id ]
    .catch[error => {
        element.parentElement.innerHTML = `Error: ${error.message}`;
        console.error['There was an error!', error];
    }];

Ví dụ về yêu cầu POST của Axios tại https. // stackblitz. com/edit/axios-http-post-request-examples?file=post-request-error-handling. js

Yêu cầu POST sử dụng axios với các tiêu đề HTTP đã đặt

Điều này sẽ gửi lại cùng một yêu cầu POST bằng cách sử dụng axios với một vài tiêu đề được đặt, tiêu đề HTTP

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

7 và tiêu đề tùy chỉnh

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

[async [] => {
    // POST request using axios with async/await
    const element = document.querySelector['#post-request-async-await .article-id'];
    const article = { title: 'Axios POST Request Example' };
    const response = await axios.post['//reqres.in/api/articles', article];
    element.innerHTML = response.data.id;
}][];

Ví dụ về yêu cầu POST của Axios tại https. // stackblitz. com/edit/axios-http-post-request-examples?file=post-request-set-headers. js

Đăng ký hoặc theo dõi tôi để cập nhật

Đăng ký kênh YouTube của tôi hoặc theo dõi tôi trên Twitter, Facebook hoặc GitHub để được thông báo khi tôi đăng nội dung mới

Khác với mã hóa

Tôi hiện đang cố gắng đi du lịch vòng quanh nước Úc bằng xe máy với vợ tôi Tina trên một cặp Royal Enfield Himalayan. Bạn có thể theo dõi cuộc phiêu lưu của chúng tôi trên YouTube, Instagram và Facebook

Làm cách nào để gửi dữ liệu JSON trong Axios?

Cách gửi các yêu cầu POST JSON bằng Axios. Yêu cầu POST được sử dụng để gửi dữ liệu đến đ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.

Làm cách nào để gọi API bằng Axios?

Gửi yêu cầu bằng Phiên bản Axios . http. //máy chủ cục bộ. 3002/sản phẩm . Trong ví dụ này, trước tiên chúng tôi gọi yêu cầu ['axios'] để nhận một phiên bản. axios được thiết lập với cấu hình mặc định.

Làm cách nào để gửi dữ liệu từ frontend đến backend bằng Axios?

css'; . bài đăng ["http. //máy chủ cục bộ. 8000"]. sau đó [res => { console. log[res] }] }] } } // const [results, setResults] = useState[{}] // console. .

phản ứng

các hình thức

trục

Làm cách nào để gửi dữ liệu biểu mẫu trong yêu cầu đặt Axios?

Gửi yêu cầu PUT với Axios . const res = đang chờ axios. đặt ['/api/article/123', { tiêu đề. 'Thực hiện yêu cầu PUT với Axios', trạng thái. 'đã xuất bản' }];use the put[] function of the axios instance, and supply the body of that request in the form of a JavaScript object: const res = await axios. put['/api/article/123', { title: 'Making PUT Requests with Axios', status: 'published' }];