axios进度请求

原创

mob64ca12e7b5cf 2023-10-11 08:11:09 ©著作权

文章标签 ios 上传 Data 文章分类 iOS 移动开发

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

axios进度请求

引言

在前后端分离的开发模式中，前端与后端通过HTTP协议进行通信是常见的做法。前端向后端发送请求并等待后端响应，这个过程中有时候需要了解请求的进度，例如上传大文件时需要知道上传的进度，以便提供用户友好的界面。

axios是一个流行的基于Promise的HTTP客户端库，在实现了基本的请求和响应功能的同时，也支持请求进度的监控和展示。本文将介绍如何使用axios进行进度请求，并提供代码示例。

axios简介

axios是一个基于Promise的HTTP客户端库，可以在浏览器和Node.js环境中使用。它有以下特点：

支持浏览器和Node.js环境
支持Promise API
可以拦截请求和响应
可以转换请求和响应数据
可以取消请求
支持请求进度监控

axios的使用非常简单，可以通过npm安装后直接引入使用。以下是一个简单的示例：

// 引入axios库
const axios = require('axios');

// 发送GET请求
axios.get('
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码通过axios发送了一个GET请求，并在请求成功后打印了响应的数据。

axios进度请求

axios提供了一个onUploadProgress方法和一个onDownloadProgress方法，用于监控上传和下载的进度。

上传进度

在发送POST请求时，可以通过onUploadProgress方法监控上传的进度。以下是一个上传文件的示例：

// 引入axios库
const axios = require('axios');

// 创建一个FormData对象
const formData = new FormData();
formData.append('file', file);

// 发送POST请求
axios.post(' formData, {
  onUploadProgress: progressEvent => {
    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(`上传进度：${progress}%`);
  },
})
  .then(response => {
    console.log(response.data);
  })
  .catch(error => {
    console.error(error);
  });

上述代码通过axios发送了一个POST请求，并在请求过程中通过onUploadProgress方法监控上传的进度。progressEvent.loaded表示已上传的字节数，progressEvent.total表示总字节数，通过计算可以得到上传的进度。

下载进度

在接收到响应时，可以通过onDownloadProgress方法监控下载的进度。以下是一个下载文件的示例：

// 引入axios库
const axios = require('axios');

// 发送GET请求
axios.get(' {
  responseType: 'blob',
  onDownloadProgress: progressEvent => {
    const progress = Math.round((progressEvent.loaded / progressEvent.total) * 100);
    console.log(`下载进度：${progress}%`);
  },
})
  .then(response => {
    // 创建一个URL对象
    const url = URL.createObjectURL(response.data);

    // 创建一个a标签
    const link = document.createElement('a');
    link.href = url;
    link.download = 'file.txt';

    // 模拟点击下载
    link.click();

    // 释放URL对象
    URL.revokeObjectURL(url);
  })
  .catch(error => {
    console.error(error);
  });

上述代码通过axios发送了一个GET请求，并在接收到响应时通过onDownloadProgress方法监控下载的进度。progressEvent.loaded表示已下载的字节数，progressEvent.total表示总字节数，通过计算可以得到下载的进度。