Axios Multipart 实体请求

在处理文件上传等需要发送复杂数据结构的场景时，Axios 提供了强大的支持。Multipart 请求是这类场景中的常用方式，它允许你将不同类型的文件和文本数据一起发送到服务器。本章将详细介绍如何使用 Axios 发送 Multipart 实体请求。

使用 FormData 对象

为了构建一个 Multipart 请求，首先需要创建一个 FormData 对象。FormData 对象可以用来存储键值对，其中值可以是 Blob 或者其他可序列化的值。这对于文件上传非常有用。

const formData = new FormData();
formData.append('username', 'JohnDoe');
formData.append('avatar', fileInput.files[0]);

上面的代码片段展示了如何向 FormData 对象中添加键值对。第一个参数是键名，第二个参数是对应的值。在这个例子中，我们添加了一个用户名和一个文件。

配置 Axios 请求

接下来，我们需要配置 Axios 请求来发送这个 FormData 对象。这可以通过在 Axios 请求配置中设置 headers 和 data 来完成。

// www.javascriptcn.com code example
axios.post('/upload', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
})
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error uploading file:', error);
});

需要注意的是，通常情况下，Content-Type 头会由 Axios 自动处理，所以这里显式设置 Content-Type 可能不是必需的。但是，在某些情况下，比如你需要控制特定的 MIME 类型时，这一步就显得尤为重要。

监听进度事件

在处理大文件上传时，了解上传进度是非常重要的。Axios 允许你在发送请求时监听进度事件，这样你可以实时更新用户界面或显示上传进度。

// www.javascriptcn.com code example
const config = {
    onUploadProgress: function(progressEvent) {
        const percentCompleted = Math.round((progressEvent.loaded * 100) / progressEvent.total);
        console.log(percentCompleted);
    }
};

axios.post('/upload', formData, config)
.then(response => {
    console.log(response.data);
})
.catch(error => {
    console.error('Error uploading file:', error);
});

通过传递一个带有 onUploadProgress 回调函数的配置对象，你可以在上传过程中接收到进度信息，并根据这些信息执行相应的操作。

使用 Axios 的拦截器

有时候，你可能希望在整个应用范围内统一处理一些通用逻辑，比如错误处理或者在每个请求前添加认证信息。Axios 提供了拦截器机制来实现这一点。

// www.javascriptcn.com code example
// 添加请求拦截器
axios.interceptors.request.use(function (config) {
    // 在发送请求之前做些什么
    config.headers.Authorization = `Bearer ${token}`;
    return config;
}, function (error) {
    // 对请求错误做些什么
    return Promise.reject(error);
});

// 添加响应拦截器
axios.interceptors.response.use(function (response) {
    // 对响应数据做点什么
    return response;
}, function (error) {
    // 对响应错误做点什么
    return Promise.reject(error);
});

通过添加拦截器，你可以在请求发送前后执行自定义逻辑，从而简化代码并提高可维护性。

总结

通过以上步骤，我们可以看到如何利用 Axios 发送 Multipart 实体请求，以及如何处理文件上传、监听进度和使用拦截器等功能。掌握这些技巧将使你在处理复杂的前端数据交互时更加得心应手。