您的位置:

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