深入剖析axiosformdata

一、安裝和使用

axiosformdata是一個基於axios的封裝工具，用於處理表單數據。安裝非常簡單，只需要在終端輸入以下命令即可：

npm install axiosformdata

使用也非常方便，只需要在引入axios後將其作為axios.create()的參數傳入即可：

import axios from 'axios';
import axiosFormData from 'axiosformdata';

const instance = axios.create({
  adapter: axiosFormData
});

之後就可以使用instance來發送關於表單數據的請求了。

二、普通表單和FormData

axiosformdata可以處理兩種類型的表單數據：普通表單和FormData。

1. 普通表單

發送普通表單數據與使用axios的post方法非常相似，只是需要將數據格式化成一個對象。不同的是，需要將content-type設置成’application/x-www-form-urlencoded’。

instance.post('/api/user', {
  name: 'Alice',
  age: 18
}, {
  headers: {
    'content-type': 'application/x-www-form-urlencoded'
  }
})

2. FormData

如果需要上傳文件等二進位數據，就需要使用FormData。axiosformdata會自動處理FormData，不需要手動設置content-type。

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

instance.post('/api/upload', formData, {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  }
})

三、上傳進度監控

在上傳大文件時，經常需要顯示上傳進度，以便用戶可以了解上傳情況。axiosformdata支持上傳進度監控，只需要在請求配置中添加一個onUploadProgress回調函數即可：

instance.post('/api/upload', formData, {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  onUploadProgress: function(progressEvent) {
    const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
    console.log(percentCompleted);
  }
})

四、取消請求

有時候需要取消正在進行的請求，axiosformdata也提供了取消請求的方法。首先，需要在發送請求時記錄下其cancelToken：

const source = axios.CancelToken.source();

instance.post('/api/upload', formData, {
  headers: {
    'Authorization': 'Bearer ' + localStorage.getItem('token')
  },
  cancelToken: source.token
});

// 取消請求
source.cancel('Canceled by user.')

五、錯誤處理

在進行網路請求時，總是存在請求失敗的可能。axiosformdata提供了專門的錯誤處理機制，可以輕鬆地捕獲和處理錯誤。

instance.post('/api/upload', formData)
  .then(function(response) {
    console.log(response.data);
  })
  .catch(function(error) {
    if (axios.isCancel(error)) {
      console.log('Request canceled', error.message);
    } else {
      console.log(error);
    }
  });

在catch中，可以判斷錯誤類型並進行相應的處理。如果是被取消的請求，就可以列印出取消原因。

六、結語

axiosformdata是一個非常實用的工具，可以讓處理表單數據的過程變得更加簡單和便捷。希望這篇文章能夠幫助您更好地了解axiosformdata的使用方法和注意事項。