调整JavaScript抽象的迭代方案
- 译者:小溪里
- 校对者:郭华翔、苗冬青
- 引入模块。在项目中编写该模块或复用该模块;
- 调整模块。随时调整模块;
- 移除模块。
以可维护的方式进行修改的技巧
class API {
constructor() {
this.url = 'http://whatever.api/v1/';
} /**
* API 数据获取的特有方法
* 检查一个 HTTP 返回的状态码是否在成功的范围内
*/
_handleError(_res) {
return _res.ok ? _res : Promise.reject(_res.statusText);
} /**
* 获取数据
* @return {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);
});
}
};
- 更改:在公共 API.get() 方法中
- 需要修改 axios() 的 window.fetch()调用;需要再次返回一个 Promise, 以保持接口的一致, 好在 Axios 是基于 Promise 的,太棒了!
- 服务器的响应的是 JSON。通过 Fetch API 并通过链式调用 .then( res => res.json()) 语句来解析响应的数据。使用 Axios,服务器响应是在 data 属性中,我们不需要解析它。因此,我们需要将.then语句改为.then(res => res.data)。
- 在响应对象中缺少 ok 布尔标志,但是,还有 statusText 属性。我们可以通过它来串起来,如果它的值是 OK,那么一切将没什么问题(附注:在 Fetch API 中 OK 为 true 与在 Axios 中的 statusText 为 OK 是不一样的。但为了便于理解,为了不过于宽泛,不再引入任何高级错误处理。)
方法一:删除代码、编写代码
class API {
constructor() {
this.url = 'http://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
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
class API {
constructor(_adapter = new FetchAdapter()) {
this.adapter = _adapter; this.url = 'http://whatever.api/v1/';
} get(_endpoint) {
return this.adapter.get(_endpoint)
.catch( error => {
alert('So sad. There was an error.');
throw new Error(error);
});
}
};
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);
}
};
class API {
constructor(_adapter = new /*FetchAdapter()*/ AxiosAdapter()) {
this.adapter = _adapter; /* ... */
}
/* ... */
};
//不管你喜欢与否,将其导入你的模块,因为这只是一个例子。
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');
- 删除代码,编写代码。
- 重构代码,写适配器。
总结
调整JavaScript抽象的迭代方案的更多相关文章
- 译|调整JavaScript抽象的迭代方案
原文作者:Kaloyan Kosev 原文链接:https://css-tricks.com/adapting-javascript-abstractions-time/ 翻译译者:小溪里 校对:华翔 ...
- Javascript中的迭代、归并方法
迭代方法 在Javascript中迭代方法个人觉得尤为重要,在很多时候都会有实际上的需求,javascript提供了5个迭代方法来供我们操作,它们分别为: every() 对数组中的每一个项运用给定的 ...
- javascript抽象工厂模式
<!doctype html><html lang="en"><head> <meta charset="UTF-8" ...
- javascript学习笔记--迭代函数
概要 这里的迭代函数指的是对数组对象的操作方法,js数组共有五个迭代函数:every.fifter.forEach.map.some. 1.every every方法,返回值为Boolean类型,tr ...
- JavaScript异步加载方案
(1) defer,只支持IE defer属性的定义和用法(我摘自w3school网站) defer 属性规定是否对脚本执行进行延迟,直到页面加载为止. 有的 javascript 脚本 docume ...
- JavaScript中数组迭代方法(jquery)
var arr = [1,2,4,5,6]; //1.forEach(让数组中的每一项做一件事)arr.forEach(function(item,index){ console.log(ite ...
- 反人类的MyEclipse之-调整JavaScript代码-花括号换行显示
然后将除最后一项外所有的都勾选为Next Line
- 【JavaScript】HTML5存储方案
1.Web SQL 2.IndexedDB 3.Local Storage 4.Session Storage 5.Cookies 6.Application Cache
- javascript 写农场迭代
/** * 农场一头小母牛 * 每年生头小母牛 * 母牛五岁产母牛 * 二十年上多少牛 */ 划分程序,母牛只管自己的年龄能不能产牛仔,母牛是model同时也是工厂 农场只管养牛,收获新牛. 一年一个 ...
随机推荐
- 为创建Golang GUI程序选择合适的库
我认为在Go语言中创建GUI只有两种相对较好的方式,一是Qt,二则是Electron. 如何选择? 这要看你的需求.如果你会HTML+CSS+JavaScript,只想使用Go开发对性能没有多高的程序 ...
- 【ZJOI2012】灾难 - LCA+拓扑排序
题目描述 阿米巴是小强的好朋友. 阿米巴和小强在草原上捉蚂蚱.小强突然想,如果蚂蚱被他们捉灭绝了,那么吃蚂蚱的小鸟就会饿死,而捕食小鸟的猛禽也会跟着灭绝,从而引发一系列的生态灾难. 学过生物的阿米巴告 ...
- 【HNOI2010】弹飞绵羊 - LCT
题目描述 某天,Lostmonkey发明了一种超级弹力装置,为了在他的绵羊朋友面前显摆,他邀请小绵羊一起玩个游戏.游戏一开始,Lostmonkey在地上沿着一条直线摆上n个装置,每个装置设定初始弹力系 ...
- python header设置随机user_agent
1 安装 fake_useragent pip install fake_useragent 2 使用 # -*- coding:utf-8 -*- from fake_useragent impor ...
- python爬虫抖音 个人资料 仅供学习参考 切勿用于商业
本文仅供学习参考 切勿用于商业 本次爬取使用fiddler+模拟器(下载抖音APP)+pycharm 1. 下载最新版本的fiddler(自行百度下载),以及相关配置 1.1.依次点击,菜单栏-Too ...
- JVM简记
1.JVM概述 JVM(Java virtual Machine)指以软件的方式模拟具有完整硬件系统功能.运行在一个完全隔离环境中的完整计算机系统 ,是物理机的软件实现. JVM是一种规范,实现产品常 ...
- Mysql Lost connection to MySQL server at ‘reading initial communication packet', system error: 0
在用Navicat for MySQL远程连接mysql的时候,出现了 Lost connection to MySQL server at ‘reading initial communicatio ...
- 使用openpyxl创建excel,设置不显示网格线
最近在学openpyxl,想设置excel不显示网格线,试了好多种方法都不行,最后发现可以通过修改views文件来实现. 文件路径:虚拟目录\Lib\site-packages\openpyxl\wo ...
- 深入源码理解Spark RDD的数据分区原理
通过内存创建RDD的分区设置 1.示例代码 在创建RDD的时候,我们可以从内存中进行创建:输出保存为文件.为了演示效果,我们的示例代码如下: import org.apache.spark.{Spar ...
- linux驱动之模块化编程小总结
本文包含了linux驱动模块化编程的基本,包括创建多线程,延时,以及makefile 以一个实例来说明 #include<linux/init.h> #include<linux/m ...