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