1. 介绍

fetch 并没有提供进度事件 umi-request 基于 fetch 也没有提供进度事件 umi-request-progress-middleware umi-request 的中间件 用于获取下载进度

onDownloadProgress 采用 stream 的方式实现获取下载进度

onUploadProgress 待实现

2. 安装方式

目前，安装方式有以下几种：

1npm install umi-request-progress-middleware
2yarn add umi-request-progress-middleware

3. 例子

umi-request-progress-middleware 扩展了 RequestOptionsInit

新增 onDownloadProgress 事件 获取下载进度

1type StreamProgressEvent = {
2  lengthComputable: boolean;
3  loaded: number;
4  total: number;
5};
6
7interface RequestOptionsInit {
8  /**
9   * 下载进度事件的回调函数
10   */
11  onDownloadProgress?: (progressEvent: StreamProgressEvent) => void;
12
13  // todo 上传进度事件待定
14}
15
16import request from 'umi-request';
17import progressMiddleware from 'umi-request-progress-middleware';
18
19// 注册内核中间件
20request.use(progressMiddleware, { core: true });
21
22// 请求
23request(path, {
24  // 获取下载进度
25  onDownloadProgress: (progressEvent) => {
26    console.log(((process.loaded / process.total) * 100).toFixed(2) + '%');
27  },
28});