00001.
00002.
00003.
以可維護的方式進行修改的技巧
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 | class API { constructor() { this.url = 'whatever.api/v1/'; }
/** * API 資料獲取的特有方法 * 檢查一個 HTTP 返回的狀態碼是否在成功的範圍內 */ _handleError(_res) { return _res.ok ? _res : Promise.reject(_res.statusText); }
/** * 獲取資料 * <a href='www.jobbole.com/members/wx1…'>@return</a> {Promise} */ get(_endpoint) { return window.fetch(this.url + _endpoint, { method: 'GET' }) .then(this._handleError) .then( res => res.json()) .catch( error => { alert('So sad. There was an error.'); throw new Error(error); }); } }; |
00001.
·
·
00001.
·
00001.
方法一：刪除程式碼。編寫程式碼。
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 | class API { constructor() { this.url = 'whatever.api/v1/'; // 一模一樣的 }
_handleError(_res) { // DELETE: return _res.ok ? _res : Promise.reject(_res.statusText); return _res.statusText === 'OK' ? _res : Promise.reject(_res.statusText); }
get(_endpoint) { // DELETE: return window.fetch(this.url + _endpoint, { method: 'GET' }) return axios.get(this.url + _endpoint) .then(this._handleError) // DELETE: .then( res => res.json()) .then( res => res.data) .catch( error => { alert('So sad. There was an error.'); throw new Error(error); }); } }; |
方法二：重構程式碼，做適配！
HEY!???對於那些熟悉介面卡模式（也被稱為包裝模式）的人來說，是的，那正是我們前進的方向！如果您對所有的細節感興趣，請參閱這裡我的介紹。
步驟1
1 2 3 4 5 6 7 8 9 10 11 | class FetchAdapter { _handleError(_res) { return _res.ok ? _res : Promise.reject(_res.statusText); }
get(_endpoint) { return window.fetch(_endpoint, { method: 'GET' }) .then(this._handleError) .then( res => res.json()); } }; |
步驟2
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 | class API { constructor(_adapter = new FetchAdapter()) { this.adapter = _adapter;
this.url = 'whatever.api/v1/'; }
get(_endpoint) { return this.adapter.get(_endpoint) .catch( error => { alert('So sad. There was an error.'); throw new Error(error); }); } }; |
1 2 3 4 5 6 7 8 9 10 11 | const AxiosAdapter = { _handleError(_res) { return _res.statusText === 'OK' ? _res : Promise.reject(_res.statusText); },
get(_endpoint) { return axios.get(_endpoint) then(this._handleError) .then( res => res.data); } }; |
1 2 3 4 5 6 7 8 | class API { constructor(_adapter = new /*FetchAdapter()*/ AxiosAdapter()) { this.adapter = _adapter;
/* ... */ } /* ... */ }; |
1 2 3 4 5 6 7 8 9 10 11 12 | //不管你喜歡與否，將其匯入你的模組，因為這只是一個例子。 import API from './API'; import FetchAdapter from './FetchAdapter';
//使用 AxiosAdapter（預設的） const API = new API(); API.get('user');
// 使用FetchAdapter const legacyAPI = new API(new FetchAdapter()); legacyAPI.get('user'); |
1.
2.