离职前同事将下载大文件功能封装成了npm包，赚了145块钱

科叼

作者：经海路大白狗
链接：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 在这个对象下面。

1. import { ajaxBox } from 'js-tool-big-box';

复制代码

调用实现下载
比如你在项目中已经封装好了axios或者fetch的实现，那么只需要正常发送请求，然后调用方法即可，使用非常方便。

1. fetch('https://test.aaa.com/getPDF').then(res => res.blob()).then((blob) => {
   
2.     ajaxBox.downFile(blob, '优乐的美.pdf');
   
3. });

复制代码

在这个方法中，你只要将接口返回的信息流转为blob流，然后传入 downFile 方法中，然后再传入一个参数做为下载后的文件名即可。

fetch请求 + 下载实现版本

我又问他，的确是很多项目里，请求都已经封装好了。但我之前做过一个项目，功能很简单，大部分都是展示类的。但产品在一个详情页，让我加下载功能，我的请求并没有做封装。
然后呢，服务端告诉我，这个下载文件的接口，还需要传入参数params，需要传入headers，你这个方法就不适用了吧？
他想了一下，说。也是可以的，你听我说啊。

定义请求参数们

1. const url = 'https://test.aaaa.com/getPDF';
   
2. const headers = {
   
3.     'Content-Type':'application/x-www-form-urlencoded;charset=UTF-8',
   
4.     'CCC-DDD': 'js-tool-big-box-demo-header'
   
5. }
   
6. const params = {
   
7.     name: '经海路大白狗',
   
8.     startDate: '2024-03-05',
   
9.     endDate: '2024-04-05',
   
10. }

复制代码

你看这些参数了吗？url就是下载文件需要的那个接口，如果是get请求呢，你就按照get形式把参数拼接上去，如果是post形式呢，你就需要后面的这个params变量做为入参数据。如果服务端需要headers呢，你就再将headers定义好，准备往过传。

调用实现

1. 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的npm地址是(js-tool-big-box 的npm地址)
js-tool-big-box的git仓库地址(js-tool-big-box的代码仓库地址)