一、发送表单数据
Axios是一个流行的HTTP客户端,可以让我们轻松地发送HTTP请求。在使用Axios时,我们需要将请求参数封装在body中。下面,我们以发送表单数据为例进行讲解。比如,我们要发送以下表单数据:
我们的表单数据格式为 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时有所帮助。