摘要:可以根据省份城市和区对组件设置默认值。获取省份获取城市获取区出现层嵌套的回调,这就是传说中的恶魔金字塔。相比回调嵌套,层次更分明,可读性强。基本原理学习无论是在异步操作的执行之前或执行之后,用对象的方法注册回调,回调都能一致执行。
遭遇“恶魔金字塔”
项目需要,封装了一个省市区的地址选择器组件。
可以根据省份id、城市id和区id对组件设置默认值。逻辑是这样的:
获取省份列表,选中默认省份;
第一步成功后,根据默认省份id获取城市列表,选中默认城市;
第二部成功后,根据默认城市id获取区列表,选中默认区。
getDefaultOptions = () = >{ let { province: provinceId, city: cityId } = this.props.defaultValue; //获取省份 this.props.dispatch({ type: "basic/getProvinceList", params: {}, successCallBack: (rs) = >{ let provinceList = rs.provinces; //获取城市 let params = { province_id: +provinceId }; this.props.dispatch({ type: "storage/getCityList", params, successCallBack: (rs2) = >{ let cityList = rs2.cities; if (cityList == null) { cityList = []; } if ( + cityId == 0) { this._getOptions(provinceList, [], []); return; } //获取区 let params = { city_id: +cityId, }; this.props.dispatch({ type: "storage/getDistrictList", params, successCallBack: (rs3) = >{ let districtList = rs3.districts; if (districtList == null) { districtList = []; } this._getOptions(provinceList, cityList, districtList); }; }); } }); } }); };
出现3层嵌套的回调,这就是传说中的“恶魔金字塔”。确实是恶魔呀,可读性巨差,自己看着都有点晕,更别说其他人了。
都说ES6的Promise对象让“恶魔金字塔”闻风丧胆,忍不住来体验一下。
Promise登场MDN上这样定义Promise:
The Promise object represents the eventual completion (or failure) of an asynchronous operation, and its resulting value.
废话不多说,来看看使用了Promise后的代码是怎样的:
sendRequest = (type, params) = >{ return new Promise((resolve, reject) = >{ this.props.dispatch({ type, params, successCallBack: (rs) = >{ resolve(rs); } }); }); }; getDefaultOptions = () = >{ let { province: provinceId, city: cityId } = this.props.defaultValue; let provinceList, cityList, districtList; let _promise = this.sendRequest("basic/getProvinceList", {}); _promise.then(rs = >{ provinceList = rs.provinces ? rs.provinces: []; return this.sendRequest("storage/getCityList", { province_id: +provinceId }) }).then(rs = >{ cityList = rs.cities ? rs.cities: []; //只有省份的情况 if ( + cityId == 0) { this._getOptions(provinceList, cityList, []); return Promise.reject({ notRealPromiseException: true, }); } return this.sendRequest("storage/getDistrictList", { city_id: +cityId }); }).then(rs = >{ districtList = rs.districts ? rs.districts: []; return this._getOptions(provinceList, cityList, districtList); }). catch(ex = >{ if (ex.notRealPromiseException) { return true; } return false; }); };
需要有序地执行异步操作的场景,Promise再适合不过了。相比回调嵌套,层次更分明,可读性强。
Promise基本原理学习无论是在异步操作的执行之前或执行之后,用Promise对象的then方法注册回调,回调都能一致执行。
很好奇它是怎么做到的,于是自己尝试写了个简易的Promise, 模拟Promise对异步操作的值的代理:
https://gist.github.com/anony...
文章版权归作者所有,未经允许请勿转载,若此文章存在违规行为,您可以联系管理员删除。
转载请注明本文地址:https://www.ucloud.cn/yun/91857.html
摘要:是单线程程序,所有代码都是单线程执行。导致的网络请求都是异步执行,异步执行可以通过回调函数实现秒钟才能打印,回调函数处理异步执行的但是推出一种新的方法对象用于表示一个异步操作的最终状态完成或失败,以及其返回的值。 javascript是单线程程序,所有代码都是单线程执行。导致javascript的网络请求都是异步执行,异步执行可以通过回调函数实现: setTimeout(callbac...
摘要:题外今天尝试了一下从文件经过再到文件的整个过程,这也是这种静态博客生成过程中的一环。这过程中,用到的中的系统,写的过程中恰好也经历了从到再到的转变。可以看到上面的函数已经非常顺序化了,当有个异步函数回调时,只需要顺序写就可以啦。 题外:今天尝试了一下从Markdown文件经过ejs再到html文件的整个过程,这也是Hexo这种静态博客生成过程中的一环。这过程中,用到的Node中的fs系...
摘要:首先介绍是一个库,他提供了一组用来操纵的默认也就是无的,也可以配置为有有点类似于,但是官方团队进行维护的,前景更好。使用,相当于同时具有和的能力,应用场景会非常多。 首先介绍Puppeteer Puppeteer是一个node库,他提供了一组用来操纵Chrome的API(默认headless也就是无UI的chrome,也可以配置为有UI) 有点类似于PhantomJS,但Puppet...
摘要:诞生之初,是单线程的。当接收到服务端的响应之后,便通过回调函数执行之后的操作。冲锋基于事件驱动。拥有拦截请求消息推送静默更新地理围栏等服务。控制时处于两种状态之一终止以节省内存监听获取和消息事件。支持的所有事件五销毁浏览器决定是否销毁。 这次体验一种新的博客风格,我们长话短说,针针见血。 showImg(https://segmentfault.com/img/remote/14600...
阅读 3205·2021-09-30 09:47
阅读 2269·2021-09-10 10:51
阅读 1827·2021-09-08 09:36
阅读 2911·2019-08-30 12:56
阅读 3003·2019-08-30 11:16
阅读 2603·2019-08-29 16:40
阅读 2979·2019-08-29 15:25
阅读 1618·2019-08-29 11:02