import axios from 'axios'; import config from '@/config.js'; class RequestSender { static GetBlogList() { return axios.get(`${config.HOST}/list`); } static Publish(data) { return axios.post(`${config.HOST}/publish`, data); } static Login(data) { return axios.post(`${config.HOST}/login`, data); } static Signup(data) { return axios.post(`${config.HOST}/signup`, data); } } export default RequestSender;
好了，现在不管是在任何一个环境下，都可以游刃有余的切换域名了。而且这里面还有一个很有意思的事情：
所有的改动对于表现层而言是透明的。
简单来说，我们在这里重构了这么多的代码，然而我们并不需要修改任何一个视图组件中的代码！！！
表面上还是原来的样子，可实际上已经“打扫”过了。这也是重构中需要注意的一点：
步子迈小一点，迈准一点 写在后面
上篇中有人问到若羽说封装请求的意义何在，axios 本身就是带着 Promise的支持了。
这里对这个问题做一个回应，立场仅代表若羽本人，并不为任何人“做代表”：
封装并非为了 Promise，而是为了将“发送请求”的这个动作封装起来。因为这属于数据获取的行为，而后面 then 里的逻辑实际上是和业务挂钩：为视图设置数据。这是两个不同的行为，就像后端一样：ORM它仅仅是负责从数据库中取数据而已，真正对这个数据进行逻辑操作的，并不是它。这也是接下来博文的主题：专一，一个函数应当只负责一件事情。
这一篇文章便表示了另一层意思：去重，在第一层封装的过程中我们发现了域名的硬编码问题（不封装也是一样），因此在这里如果不做封装的话，即使将域名提炼出来，涉及到修改的文件同样也会较多。不过这种修改是一次性的。
以上便是若羽对上一篇中示例的解释。
欢迎大家发表评论，共同探讨。
上篇重构代码
edit.vue
<script> import RequestSender from '@/requestSender' export default { name: "Edit", data() { return { model: { title: '', content: '', } } }, methods: { submit() { RequestSender.Publish(this.model) .then(res => { if(res.data.Code === 200) { this.$message.success('发布成功'); } }) } } } </script>
Login.vue:
<script> import RequestSender from '@/requestSender'; export default { name: "Login", data() { return { model: { username: '', password: '', } } }, methods: { submit() { RequestSender.Login(this.model) .then(res => { if(res.data.Code === 200) { this.$message.success('登录成功'); } }) } } } </script>
Signup.vue:
<script> import RequestSender from '@/requestSender'; export default { name: "Signup", data() { return { model: { username: '', password: '', rePassword: '' } }; }, methods: { submit() { if(this.model.password !== this.model.rePassword){ this.$message.error('两次出入密码不一致.'); return ; } RequestSender.Signup(this.model) .then(res => { if(res.data.Code === 200){ this.$message.success("注册成功"); this.$router.push('./login'); } }); } } } </script>
requestSender.js:
import axios from 'axios'; 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); } } export default RequestSender;