axios监听进度封装

原创

mob64ca12dcc794 2024-05-10 04:30:42 ©著作权

©著作权归作者所有：来自51CTO博客作者mob64ca12dcc794的原创作品，请联系作者获取转载授权，否则将追究法律责任

使用axios监听进度封装

在进行前后端数据交互时，我们通常会使用axios这个强大的HTTP库来发送请求和接收响应。在某些情况下，我们可能需要监听请求的进度，以便实时获取数据传输的进展和状态。本文将介绍如何通过封装axios来实现监听进度的功能，并提供一个简单的示例代码。

axios监听进度封装流程

下面是使用mermaid语法绘制的流程图，展示了axios监听进度封装的整体流程：

flowchart TD
    A(发送请求) --> B(创建axios实例)
    B --> C(添加进度监听器)
    C --> D(发送请求并监听进度)
    D --> E(接收响应)

代码示例

接下来，我们将通过一个简单的代码示例来演示如何封装axios并监听请求的进度。

首先，我们需要创建一个axios实例，并为其添加进度监听器：

// 导入axios
import axios from 'axios';

// 创建axios实例
const instance = axios.create();

// 添加进度监听器
instance.interceptors.request.use(config => {
    config.onUploadProgress = progressEvent => {
        console.log('Upload Progress: ' + Math.round((progressEvent.loaded / progressEvent.total) * 100) + '%');
    };

    return config;
}, error => {
    return Promise.reject(error);
});

以上代码中，我们通过instance.interceptors.request.use方法为axios实例添加了一个请求拦截器，在这个拦截器中监听了上传进度，并在控制台输出了上传进度的百分比。

接下来，我们可以发送一个带有文件的POST请求，并触发进度监听：

// 发送POST请求
instance.post('https://your-api-endpoint', formData, {
    headers: {
        'Content-Type': 'multipart/form-data'
    }
}).then(response => {
    console.log('Response: ', response.data);
}).catch(error => {
    console.error('Error: ', error);
});

在这个请求中，我们发送了一个POST请求，并传入了一个FormData对象formData，同时指定了请求头为multipart/form-data。当请求发送时，我们可以在控制台看到上传进度的实时输出。