準確來說，它并不算是代碼。而是“硬編碼”，從整體代碼上來看，這是目前所有后臺接口的域名。
在開發過程中，一般來說至少是會有兩個環境存在：開發環境、線上環境。而它們兩的后臺接口域名一般而言又不會重復，難道每次發布前都手動改一下域名么？
我們先來列舉一下可能會出現的問題：
開發環境、線上環境域名不一致
團隊協作中，開發者之間的開發域名不一致
當線上/開發 環境中的域名需要修改時
可以看到，當遇到上述問題時，項目中所有硬編碼了域名的地方都是需要修改的，那么為什么要修改呢？
除了解決上面列舉的具體問題之外，最根本的目的是：
保持唯一性
如果有兩段/多段代碼它們表示的含義完全一致，并且從目的上來說也是一致的。那么就應該盡可能將其只保留一處定義。
那么對于這個域名我們怎么處理呢？首先將其提煉出來：
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:
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;
聲明：本網頁內容旨在傳播知識，若有侵權等問題請及時與本網聯系，我們將在第一時間刪除處理。TEL:177 7030 7066 E-MAIL:11247931@qq.com
Copyright ? 2019-2025 51dongshi.com 版權所有
違法及侵權請聯系：TEL:177 7030 7066 E-MAIL:11247931@qq.com 本站由北京市萬商天勤律師事務所王興未律師提供法律服務
