目录

• 1. 背景
• 2. 简介
• 3. 安装方式
  • 3.1. 方式1：通过 npm 安装
  • 3.2. 方式3：通过<script>标签引入
• 4. 教程
• 5. API接口文档

1. 背景

umi-request 是基于 fetch 的，且有比 axios 更强的功能，唯一美中不足的是：umi-request 不支持进度事件，这在一些 上传 和 下载业务中是常见的需求，所以我就专门封装一个 umi-request 的内核中间件 umi-request-progress，专门用于解决进度的问题。

2. 简介

umi-request-progress 是 网络请求库 umi-request 的一个内核中间件，扩展了 umi-request 使其支持 上传进度 和 下载进度。

详情请看：

• 主页：https://github.com/GuoBinyong/umi-request-progress
• GitHub仓库
• 码云仓库
• [教程][]
• API接口文档

如果您在使用的过程中遇到了问题，或者有好的建议和想法，您都可以通过以下方式联系我，期待与您的交流：

• 给该仓库提交 issues
• 给我 Pull requests
• 邮箱：guobinyong@qq.com
• QQ：guobinyong@qq.com
• 微信：keyanzhe

3. 安装方式

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

3.1. 方式1：通过 npm 安装

npm install umi-request-progress

3.2. 方式3：通过<script>标签引入

您可直接从项目的 发行地址 中下载以 .iife.js 作为缀的文件，然后使用如下代码引用 和 使用 umi-request-progress：

1. 引用 umi-request-progress

   <script src="path/to/package/umi-request-progress.iife.js"></script>
   

2. 使用全局的 UmiRequestProgress

   <script>
   // 使用全局的 UmiRequestProgress
   </script>
   

4. 教程

umi-request-progress 给 umi-request 的请求选项 RequestOptionsInit 增加了以下两个选项

1interface RequestOptionsInit {
2    /**
3     * 上传进度事件的回调函数
4     */
5    onReqProgress?: ProgressHandler | null;
6    /**
7     * 下载进度事件的回调函数
8     */
9    onResProgress?: ProgressHandler | null;
10}

具体使用示例如下：

1//导入 umi-request
2import request from 'umi-request';
3//导入 umi-request-progress
4import progressMiddleware from 'umi-request-progress';
5
6// 注册内核中间件
7request.use(progressMiddleware, { core: true });
8
9// 上传文件
10request("/file/upload",{
11   ...otherOptions,
12   //上传进度事件的回调函数
13   onReqProgress:function( ev: ProgressEvent){
14     console.log(ev)
15   },
16   //下载进度事件的回调函数
17   onResProgress:function( ev: ProgressEvent){
18     console.log(ev)
19   },
20});

5. API接口文档

详情跳转至API接口文档

---

有您的支持，我会在开源的道路上，越走越远