使用axios post發送formdata請求

axios 是一個基於 Promise 的 HTTP 客戶端，可以用在瀏覽器和 node.js 中。axios最常用的是進行get和post請求，本文將重點介紹axios發送post請求時如何使用formData作為請求體，並附上相應的代碼示例。

一、axios介紹

axios 是一個基於 Promise 的 HTTP 客戶端，可以用在瀏覽器和 node.js 中。axios是一個很好用的http請求庫，支持請求和響應的攔截器、自定義請求頭等功能，而且功能完善，用法簡單。axios是一款基於Promise的異步AJAX庫。

二、使用axios發送post請求

發送post請求前，我們先介紹如何使用axios發送post請求。axois發送post請求的格式如下：

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

其中url是請求地址，data是請求參數，config是配置項，例如headers等。以下是一個實現post請求的示例：

import axios from 'axios';

axios.post('/user', {
  firstName: 'John',
  lastName: 'Doe'
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

上面的代碼發送了一個post請求，請求的地址是/user，請求參數是firstName和lastName。

三、使用formData作為post請求體

接下來介紹如何使用FormData作為post請求體。在實際項目中，上傳文件時常常需要使用form-data格式，這種格式在使用axios封裝進行上傳時十分關鍵。

FormData的API介紹：

• FormData.append(name, value [, filename])：向formData對象中添加一個鍵值對。如果某個鍵對應的值是一個Blob或者File對象，那麼需要通過第三個參數fileName指定文件名；
• FormData.delete(name)：刪除formData對象中某個鍵的值；
• FormData.entries()：返回一個由所有鍵值對組成的迭代器；
• FormData.get(name)：返回formData對象中某個鍵的值；
• FormData.getAll(name)：返回formData對象中某個鍵的所有值；
• FormData.has(name)：判斷formData對象中是否存在某個鍵；
• FormData.keys()：返回一個由所有鍵組成的迭代器；
• FormData.set(name, value [, filename])：設置formData對象中某個鍵的值。

下面是一個使用formData作為請求體的示例：

import axios from 'axios';

const formData = new FormData();
formData.append('username', 'johndoe');
formData.append('password', '123456');
formData.append('avatar', file, 'avatar.jpg');

axios.post('/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上示例中，請求參數包含了一個username和password，另外還有一個上傳的文件avatar。

四、完整示例代碼：

import axios from 'axios';

const formData = new FormData();
formData.append('username', 'johndoe');
formData.append('password', '123456');
formData.append('avatar', file, 'avatar.jpg');

axios.post('/user', formData, {
  headers: {
    'Content-Type': 'multipart/form-data'
  }
})
.then(function (response) {
  console.log(response);
})
.catch(function (error) {
  console.log(error);
});

以上代碼可以用於在axios中使用FormData作為請求體進行post請求。