如何使用axios發送POST請求來獲取數據

一、了解axios

axios是一個流行的基於Promise的HTTP客戶端，可以在瀏覽器中發出HTTP請求，並支持Promise API。

安裝axios：

npm install axios

在需要使用axios的文件中引入axios：

import axios from 'axios';

二、發送POST請求

發送POST請求需要至少兩個參數：一個URL，一個數據對象。

示例代碼：

axios.post('http://example.com/api/data', {
  name: 'John Doe',
  age: 30
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

三、發送POST請求中設置headers

有些情況下需要在請求頭中設置headers，這可以通過在配置對象中添加headers對象來實現。

示例代碼：

axios.post('http://example.com/api/data', {
  name: 'John Doe',
  age: 30
}, {
  headers: {
    'Content-Type': 'application/json'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

四、發送POST請求中設置超時時間

可以在配置對象中添加timeout屬性來設置請求的超時時間，超過這個時間沒有得到響應，就會拋出錯誤。

示例代碼：

axios.post('http://example.com/api/data', {
  name: 'John Doe',
  age: 30
}, {
  timeout: 10000
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

五、發送POST請求中非同步上傳文件

在數據對象中設置file屬性，並將其設置為一個File對象，即可非同步上傳文件。

示例代碼：

const fileInput = document.querySelector('#file-input');
const formData = new FormData();
formData.append('file', fileInput.files[0]);
axios.post('http://example.com/api/upload', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function(response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

六、小結

本文介紹了如何使用axios發送POST請求來獲取數據，從了解axios、發送POST請求、設置headers、設置超時時間、非同步上傳文件等多個方面進行了闡述。