Axios Body詳解

一、發送表單數據

Axios是一個流行的HTTP客戶端，可以讓我們輕鬆地發送HTTP請求。在使用Axios時，我們需要將請求參數封裝在body中。下面，我們以發送表單數據為例進行講解。比如，我們要發送以下表單數據：

  姓名:
  <input type="text" id="name" name="name">


  年齡:
  <input type="text" id="age" name="age">

我們的表單數據格式為 key-value 的形式，Axios 會將數據轉成一個 URLSearchParams 對象，並以 application/x-www-form-urlencoded 的形式發送給伺服器。下面是發送表單數據的Axios示例代碼:

const axios = require('axios');

const formData = new FormData();
formData.append('name', '小明');
formData.append('age', 18);

axios.post('/user', formData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

二、發送JSON數據

除了發送表單數據外，我們還可以使用Axios發送JSON數據。JSON數據格式為key-value形式，其中value可以為string、Number、Array、Object等JS數據類型。下面是發送JSON數據的Axios示例代碼:

const axios = require('axios');

const jsonData = {
  "name": "小明",
  "age": 18
}

axios.post('/user', jsonData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

三、發送二進位數據

除了發送表單數據、JSON數據外，我們還可以使用Axios發送二進位數據，例如圖片、音頻、視頻等。下面是發送圖片數據的Axios示例代碼：

const axios = require('axios');

const image = document.querySelector('input[type="file"]').files[0];

const formData = new FormData();
formData.append('image', image);

axios.post('/user', formData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

四、自定義header

有時，我們需要在請求頭中添加特定的信息，如身份驗證、token等。Axios提供了HTTPHeader配置項，讓我們可以自定義header。下面是自定義header的Axios示例代碼：

const axios = require('axios');

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios.post('/user', {
    name: '小明',
    age: 18
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

五、設置超時時間

有時，伺服器可能會長時間沒有響應請求。在這種情況下，我們可以設置Axios的請求超時時間來解決問題。下面是設置超時的Axios示例代碼：

const axios = require('axios');

axios.post('/user', {
    name: '小明',
    age: 18
  }, {
    timeout: 5000 // 請求超時時間為5秒
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

六、設置代理

使用Axios的時候，我們可以使用第三方庫http-proxy-middleware來代理API請求，以解決跨域問題。下面是設置代理的Axios示例代碼：

const axios = require('axios');
const proxy = require('http-proxy-middleware');

const apiProxy = proxy('/api', {
  target: 'http://localhost:3000', // 代理服務的地址
  changeOrigin: true, // 控制伺服器端請求發起時host欄位的值
});

axios('/api/user')
  .then(response => console.log(response))
  .catch(error => console.log(error));

七、總結

Axios作為流行的HTTP客戶端，簡化了向伺服器發送HTTP請求的流程。在使用Axios時，我們需要將請求參數封裝在body中，包括表單數據、JSON數據和二進位數據等。同時，在特定情況下，我們也可以自定義header、設置超時時間、設置代理等。希望本文對讀者使用Axios時有所幫助。