离职前同事将下载大文件功能封装成了npm包，赚了145块钱
【摘要】 作者：经海路大白狗 链接：juejin.cn/post/7379524605104848946这几天有个同事离职了，本来那是last day，还有半个小时，但他还在那里勤勤恳恳的写着代码。我很好奇，就问：老张，你咋还不做好准备，都要撤了，还奋笔疾书呐。他说：等会儿和你说。等了半个小时，他说：走，一起下班。我跟你说个好东西。我说：好的。老张一边走一边跟我说：公司的下载大文件代码不好。我说哪里不...
作者：经海路大白狗
链接：juejin.cn/post/7379524605104848946
这几天有个同事离职了，本来那是last day，还有半个小时，但他还在那里勤勤恳恳的写着代码。我很好奇，就问：老张，你咋还不做好准备，都要撤了，还奋笔疾书呐。他说：等会儿和你说。
等了半个小时，他说：走，一起下班。我跟你说个好东西。我说：好的。老张一边走一边跟我说：公司的下载大文件代码不好。我说哪里不好了，不是都用了很久了。他说，那些代码，每次项目需要的时候，还得拷过来拷过去的，有时候拷着拷着就拷丢了，还得去网上现找代码，很不好。我问：那然后呢？他说：我这两天把这段代码封装了一下，封装成了npm包。以后，大家就直接调用就可以了，不用重复造轮子，或者担心轮子走丢了。我说那太好了。他说：我把这个npm包给你，以后你就说自己写的，下个季度晋升的时候，你就说，为公司解决了代码冗余，重复造轮子的问题，而且让下载大文件功能更加便捷，节省开发时间，提升了开发效率。我说：那怎么好啊，得请你吃个饭啊，你都要走了。不过，你先跟我说说，怎么用这个npm包啊。
下载大文件版
比如我们现有的成形的项目，大家使用axios或者fetch，一定在项目里已经封装好了请求，所以直接调用服务端给的请求地址，获取到blob数据流信息就可以了。但是拿到blob数据流以后，这段代码得四处拷贝，重复造轮子，很不好。所以可以这样使用，高效、便捷。
下载js-tool-big-box工具包 执行安装命令
npm install js-tool-big-box
项目中引入ajaxBox对象，下载文件的公共方法，downFile 在这个对象下面。
import { ajaxBox } from 'js-tool-big-box';
调用实现下载 比如你在项目中已经封装好了axios或者fetch的实现，那么只需要正常发送请求，然后调用方法即可，使用非常方便。
fetch('https://test.aaa.com/getPDF').then(res => res.blob()).then((blob) => { ajaxBox.downFile(blob, '优乐的美.pdf'); });
在这个方法中，你只要将接口返回的信息流转为blob流，然后传入 downFile 方法中，然后再传入一个参数做为下载后的文件名即可。
fetch请求 + 下载实现版本
我又问他，的确是很多项目里，请求都已经封装好了。但我之前做过一个项目，功能很简单，大部分都是展示类的。但产品在一个详情页，让我加下载功能，我的请求并没有做封装。 然后呢，服务端告诉我，这个下载文件的接口，还需要传入参数params，需要传入headers，你这个方法就不适用了吧？ 他想了一下，说。也是可以的，你听我说啊。
定义请求参数们
const url = 'https://test.aaaa.com/getPDF'; const headers = { 'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8', 'CCC-DDD': 'js-tool-big-box-demo-header' } const params = { name: '经海路大白狗', startDate: '2024-03-05', endDate: '2024-04-05', }
你看这些参数了吗？url就是下载文件需要的那个接口，如果是get请求呢，你就按照get形式把参数拼接上去，如果是post形式呢，你就需要后面的这个params变量做为入参数据。如果服务端需要headers呢，你就再将headers定义好，准备往过传。
调用实现
ajaxBox.downFileFetch(url, '相的约奶的茶.mp4', 'get', headers, dataParams);
你看到这个 downFileFetch 方法了吧，他也在 ajaxBox 对象下面。
第一个参数呢，表示服务端接口，如果是get请求呢，就把参数拼接上去； 第二个参数呢，表示下载后文件名，比如 down.pdf 这样； 第三个参数呢，默认是get请求，如果不想写get呢，你就写个null，但是你得写进去，如果服务端要求是个post请求呢，你就写post； 第四个参数呢，就是headers啦，服务端需要你就传过去，不需要你就写个null； 第五个参数呢，如果是psot请求，你就传入json对象过去，如果没有参数，你就不写也行，写个null也行。 我说：你这个工具库真是棒，js-tool-big-box，就是前端JS的一个大盒子啊。他说：是的，里面还有很多特别实用的方法，用了这个工具库后，前端项目可以少些很多公共方法，少引很多第三方库，很不错的。我也要离职了，你在公司就说这是你开发的。 我说：那我得请你吃饭啊。于是，我去买了一瓶茅台王子酒，花了260元，定了两份炒饼，花了30元。 等吃完，我说，你这个工具库可以啊，直接从我这里挣了290元。 他说：看你说的，酒你喝了一半，炒饼你吃了一份。我这顶多也就是145元啊。
js-tool-big-box的git仓库地址(js-tool-big-box的代码仓库地址)
【版权声明】本文为华为云社区用户原创内容，转载时必须标注文章的来源（华为云社区）、文章链接、文章作者等基本信息， 否则作者和本社区有权追究责任。如果您发现本社区中有涉嫌抄袭的内容，欢迎发送邮件进行举报，并提供相关证据，一经查实，本社区将立刻删除涉嫌侵权内容，举报邮箱：
cloudbbs@huaweicloud.com
- 点赞
- 收藏
- 关注作者
评论（0）