Axios Body详解

QJGIE • 2025-01-27 13:35 • 编程

一、发送表单数据

Axios是一个流行的HTTP客户端，可以让我们轻松地发送HTTP请求。在使用Axios时，我们需要将请求参数封装在body中。下面，我们以发送表单数据为例进行讲解。比如，我们要发送以下表单数据：


  姓名:
  <input type="text" id="name" name="name">


  年龄:
  <input type="text" id="age" name="age">

我们的表单数据格式为 key-value 的形式，Axios 会将数据转成一个 URLSearchParams 对象，并以 application/x-www-form-urlencoded 的形式发送给服务器。下面是发送表单数据的Axios示例代码:

const axios = require('axios');

const formData = new FormData();
formData.append('name', '小明');
formData.append('age', 18);

axios.post('/user', formData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

二、发送JSON数据

除了发送表单数据外，我们还可以使用Axios发送JSON数据。JSON数据格式为key-value形式，其中value可以为string、Number、Array、Object等JS数据类型。下面是发送JSON数据的Axios示例代码:

const axios = require('axios');

const jsonData = {
  "name": "小明",
  "age": 18
}

axios.post('/user', jsonData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

三、发送二进制数据

除了发送表单数据、JSON数据外，我们还可以使用Axios发送二进制数据，例如图片、音频、视频等。下面是发送图片数据的Axios示例代码：

const axios = require('axios');

const image = document.querySelector('input[type="file"]').files[0];

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

axios.post('/user', formData)
  .then(response => console.log(response))
  .catch(error => console.log(error));

四、自定义header

有时，我们需要在请求头中添加特定的信息，如身份验证、token等。Axios提供了HTTPHeader配置项，让我们可以自定义header。下面是自定义header的Axios示例代码：

const axios = require('axios');

axios.defaults.headers.common['Authorization'] = AUTH_TOKEN;

axios.post('/user', {
    name: '小明',
    age: 18
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

五、设置超时时间

有时，服务器可能会长时间没有响应请求。在这种情况下，我们可以设置Axios的请求超时时间来解决问题。下面是设置超时的Axios示例代码：

const axios = require('axios');

axios.post('/user', {
    name: '小明',
    age: 18
  }, {
    timeout: 5000 // 请求超时时间为5秒
  })
  .then(response => console.log(response))
  .catch(error => console.log(error));

六、设置代理

使用Axios的时候，我们可以使用第三方库http-proxy-middleware来代理API请求，以解决跨域问题。下面是设置代理的Axios示例代码：

const axios = require('axios');
const proxy = require('http-proxy-middleware');

const apiProxy = proxy('/api', {
  target: 'http://localhost:3000', // 代理服务的地址
  changeOrigin: true, // 控制服务器端请求发起时host字段的值
});

axios('/api/user')
  .then(response => console.log(response))
  .catch(error => console.log(error));

七、总结

Axios作为流行的HTTP客户端，简化了向服务器发送HTTP请求的流程。在使用Axios时，我们需要将请求参数封装在body中，包括表单数据、JSON数据和二进制数据等。同时，在特定情况下，我们也可以自定义header、设置超时时间、设置代理等。希望本文对读者使用Axios时有所帮助。

原创文章，作者：QJGIE，如若转载，请注明出处：https://www.506064.com/n/333220.html