这是一个创建于 800 天前的主题，其中的信息可能已经有所发展或是发生改变。
axios-multi-down
Axios 插件，通过 Range 特性， 将 大文件 分割，并发多个 Axios 请求加快大文件下载速度。
起因
最近在面试，聊到个人项目 Shmily (https://v2ex.com/t/944851)， 这个项目是将 QQ 、微信、短信等各种数据汇总并时间线展示的一个项目，其中子项目 Shmily-Show 一个难点就是纯前端处理大量的聊天记录（总计 1.41G ，最大单文件 240M ）。
面试官基于此引申出一个问题：如果前端单一请求大小有 1G,，可以和后端采取哪些方案加速？ Shmily 是一个本地的 Web 应用，所以并不存在这个传输问题。生产中这是一个不合理的需求，应该从为什么有 1G 的角度去考虑。面试官也一再强调这只是假设情况，但不妨碍这是一个有趣的问题，就像刮刮乐还没刮开，就已经在想 500 万怎么花。 more...
其中一个措施是分块传输，然后就写了这个库 axios-multi-down
Demo
感觉也没啥说的，直接上 Demo 吧，Demo 的呈现想法来自于 FlashGet-网际快车
https://lqzhgood.github.io/axios-multi-down
优点
- 自动探测服务器是否支持分块，不支持自动回退单一请求
- 支持控制并发数量
- 支持 Block 下载失败自动重试
ERROR_MODE.WAIT模式支持全部下载完成后等待，可以手动对失败 Block 重试和操作，等待直到全部成功后返回
有啥用
好像没啥用，大文件去用 迅雷、Aria2 等更专业~
如果是需要请求 1 个 G 的 Api ，先让 PM 祭天吧~
就当锻炼锻炼各种条件下的 Promise 使用，面试考这个真是超级多呀~
是不是还能骗个 star? 听说对找工作有用啊！ Github
 | 1 subframe75361 2023-10-07 10:49:30 +08:00 单纯好奇，不用 await 的原因是？ |
 | 2 abigmiu 2023-10-07 11:06:08 +08:00 下载的分段数据与放内存里面了吗 |
 | 3 cheetah 2023-10-07 11:29:31 +08:00 小建议：代码可读性有提升空间 举例： ``` let r; if (downConfigUse.max === 1) { r = await downByOne<T, D>(axios, axiosConfig, downConfigUse); } else { r = await downByMulti<T, D>(axios, axiosConfig, downConfigUse, queue, contentLength); } return r; ``` 是否这样更好呢？ ``` if (downConfigUse.max === 1) { return downByOne<T, D>(axios, axiosConfig, downConfigUse); } return downByMulti<T, D>(axios, axiosConfig, downConfigUse, queue, contentLength); ``` |
| 4 cheetah 2023-10-07 11:30:37 +08:00 然后代码里有很多嵌套的 if-else ，其实可以通过 early return 等方法消除掉 |
 | 5 lqzhgood OP @cheetah #3 谢谢建议 不写成 return await 有两个原因 1. 个人原因，为了调试方便 我一般 return value ，不 return fn 2. return await Eslint 也不建议，详见 https://eslint.org/docs/latest/rules/no-return-await 对于 early return ， 代码中复杂的逻辑（超过 3 层 if ）已有 early return 处理。 剩下的都不是复杂逻辑而且后面还有代码，个人觉得还能接受。 不过确实完全修改后会更好 谢谢建议~ 给一朵 |
| 6 lqzhgood OP @subframe75361 不太清楚你说的不用 await 是指的哪方面？ |
| 7 lqzhgood OP @abigmiu #2 目前都是放内存，因为 axios 目前浏览器还不支持 respOnseType= 'staem' 需要等到 axios 使用 fetch 作为 adapter 后才支持。 到时候可以用使用 steam 结合 FileSystem 直接存文件。 |
| 8 subframe75361 2023-10-07 14:03:30 +08:00 @lqzhgood #6 回调层数多了些。而且你发的 eslint 链接里的规则也已经弃用了 |
| 9 subframe75361 2023-10-07 14:04:50 +08:00 另外我个人更偏好于 三元运算符 |
| 10 lqzhgood OP @subframe75361 #8 多层异步用 await 没法写吧~ 第一层 全部下载完成的 resolveAll 要放到最下层，最后一个下载完的 Promise 里面去。 并且队列最后一个并不等于最后下载完的。 中间都是并发的，并不是 one by one 呀~ 只能回调吧~ |
Select Language