在开始本篇的主题之前，让我们把上次遗留下来的问题都清理一下：
将其他组件中 axios 请求的地方封装起来。
这里就不把代码放在开头了，相关代码都放在文末，有兴趣了解的童鞋可以先往下翻。
好了， 我们现在把上篇剩下的任务给完成了，接下来我们来正式开始本篇内容吧。
去重是什么
字面上意思：去除重复，在项目中，不可避免的会出现重复代码。但是如果不好好去处理这些重复代码，那很有可能就会给你很多“惊喜”。
如何为“重复” 下一个定义呢？
从最浅显的层次来看， 相同即是重复。在我们上面的代码中，每一个组件中都有这么一行代码：
import RequestSender from '@/requestSender';
这就是重复代码，在每一个需要发起请求的组件中你都会需要写上这么一行代码。那么让我们就这个列举一些可能出现的问题：
某一天修改了文件名
某一天移动了该文件
那么项目中需要修改的地方将会是多少呢？而在修改中会产生手误的概率又会是多少呢？以上还是在单人开发的时候，如果团队协作开发，这些情况的概率又会是什么样的呢。
如何去重
当然，对于上面这种引入型的代码，类似移动文件，修改文件名这种操作。IDE 就能很好的帮你处理，比如 WebStorm 如果你使用重构相关的功能去重命名，那么它会找出所有 “疑似”引用的代码片段，你可以选择所有相关的引用同时修改。
这是一种手段，很好的解决了上面这些问题。
那么让我们来看看另一个重复代码的问题：
class RequestSender { static GetBlogList() { return axios.get('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/list'); } static Publish(data) { return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/publish', data); } static Login(data) { return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/login', data); } static Signup(data) { return axios.post('https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io/signup', data); } }
上面的代码， 重点不在函数噢。 仔细看看它们有哪些地方重复了。
光从代码上来看，其实有很多“重复”的地方，比如说 return、static、axios.get、axios.post。
这些重复有一部分是语法，有一部分是调用。这些都是不可避免的，因此这些重复代码并不在我们需要重构的范围内。那么，究竟是哪段代码呢？
https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io
准确来说，它并不算是代码。而是“硬编码”，从整体代码上来看，这是目前所有后台接口的域名。
在开发过程中，一般来说至少是会有两个环境存在：开发环境、线上环境。而它们两的后台接口域名一般而言又不会重复，难道每次发布前都手动改一下域名么？
我们先来列举一下可能会出现的问题：
开发环境、线上环境域名不一致
团队协作中，开发者之间的开发域名不一致
当线上/开发 环境中的域名需要修改时
可以看到，当遇到上述问题时，项目中所有硬编码了域名的地方都是需要修改的，那么为什么要修改呢？
除了解决上面列举的具体问题之外，最根本的目的是：
保持唯一性
如果有两段/多段代码它们表示的含义完全一致，并且从目的上来说也是一致的。那么就应该尽可能将其只保留一处定义。
那么对于这个域名我们怎么处理呢？首先将其提炼出来：
static Host = 'https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io';
这样，引用的地方就可以这么写：
static GetBlogList() { return axios.get(`${Host}/list`); }
这样，当发现修改的时候，是不是只需要修改 Host 这么一个地方就好了呢？、
但是这样还存在问题，如果要发布，或者是在 git 、 svn上协作的时候呢？ 每个人、每个环境都需要修改这个变量，并且还要在提交代码时移除掉自己的修改以避免冲突。
可配置化
Host 的例子是非常常见的，当我们需要发布、团队协作的时候，环境不同是非常常见的，有可能在自己电脑上 Host 是 localhost:8080，换在另一个人电脑上就是 localhost:9099了。那么线上环境有可能又是 xxx.xxx.com 、xx.xxx.com/api诸如此类。
这里若羽实践的解决方案是：
将与环境相关的硬编码提炼成可配置项放入配置文件
配置文件模板化
配置模板文件多样化
真正的配置文件是不会被提交上去，只有一个模板文件。由于配置文件并不会被提交，所以开发者之间的环境差异就可以忽略了，大家根据自己的环境修改配置文件即可。
那么对于线上环境、测试环境等等，建立对应的配置文件模板即可。当发布时，使用对应环境的发布配置文件模板作为配置文件即可。
那么我们来实践一下：
新建配置模板文件 config.js.template:
const config = { HOST: '', }; export default config;
接下来复制粘贴模板文件，并重命名为 config.js:
const config = { HOST: 'https://451ece6c-f618-436b-b4a2-517c6b2da400.mock.pstmn.io', }; export default config;
接下来修改一下 requestSender.js: