Axios进阶技巧：实时监听上传和下载进度、终止请求

2022-12-12 15:48:45

优化网络请求：实时监控进度、终止请求的指南

在现代网络应用中，流畅的网络请求处理至关重要。本文将探讨如何利用Axios库增强网络请求的功能，包括实时监控上传和下载进度 以及终止请求 。

1. 实时监听上传数据进度

在上传文件时，实时跟踪上传进度至关重要。Axios提供了onUploadProgress方法，该方法接收一个回调函数，每当文件上传时，都会调用该函数，并提供上传进度的详细信息，如已上传字节数和总字节数。

代码示例：

const uploadFile = () => {
  const formData = new FormData();
  formData.append('file', document.getElementById('file-input').files[0]);

  axios.post('/upload', formData, {
    onUploadProgress: (progressEvent) => {
      const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`上传进度：${progress}%`);
    }
  });
};

2. 实时监听接口返回数据进度

与上传类似，您还可以实时监控HTTP请求的下载进度。Axios提供了onDownloadProgress方法，该方法接收一个回调函数，每当收到响应数据时，都会调用该函数，并提供下载进度的详细信息。

代码示例：

const fetchUserData = () => {
  axios.get('/user/data', {
    onDownloadProgress: (progressEvent) => {
      const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
      console.log(`下载进度：${progress}%`);
    }
  });
};

3. 如何终止网络请求

有时候，您可能需要终止正在进行的网络请求。例如，当用户取消操作或请求执行时间过长时。Axios提供了cancelToken，可让您轻松取消请求。

代码示例：

const cancelToken = axios.CancelToken;
const source = cancelToken.source();

const fetchUserData = () => {
  axios.get('/user/data', {
    cancelToken: source.token
  }).then((response) => {
    // 请求成功
  }).catch((error) => {
    if (axios.isCancel(error)) {
      console.log('请求已取消');
    }
  });

  // 取消请求
  source.cancel('请求已取消');
};