使用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请求。