Vue代码整洁之去重方法整理

在开始本篇的主题之前，让我们把上次遗留下来的问题都清理一下：

将其他组件中 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

准确来说，它并不算是代码。而是“硬编码”，从整体代码上来看，这是目前所有后台接口的