Umi-request-progress NPM

目录

1. 背景

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

2. 简介

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

详情请看：

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

给该仓库提交 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：

引用 umi-request-progress

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

使用全局的 UmiRequestProgress

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

4. 教程

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

interface RequestOptionsInit {
    /**
     * 上传进度事件的回调函数
     */
    onReqProgress?: ProgressHandler | null;
    /**
     * 下载进度事件的回调函数
     */
    onResProgress?: ProgressHandler | null;
}

具体使用示例如下：

//导入 umi-request
import request from 'umi-request';
//导入 umi-request-progress
import progressMiddleware from 'umi-request-progress';

// 注册内核中间件
request.use(progressMiddleware, { core: true });

// 上传文件
request("/file/upload",{
   ...otherOptions,
   //上传进度事件的回调函数
   onReqProgress:function( ev: ProgressEvent){
     console.log(ev)
   },
   //下载进度事件的回调函数
   onResProgress:function( ev: ProgressEvent){
     console.log(ev)
   },
});