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

这几天有个同事离职了，本来那是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使用指南哦，掘金链接直达(只会Vue的我，一入职就让用React，用了这个工具库，我依然高效 - 掘金 (juejin.cn))

最后告诉你个消息：
js-tool-big-box的npm地址是(js-tool-big-box 的npm地址)

js-tool-big-box的git仓库地址(js-tool-big-box的代码仓库地址)