Promise初探

mj 发布于2019-08-22 11:08 / 1396人阅读

摘要：可以根据省份城市和区对组件设置默认值。获取省份获取城市获取区出现层嵌套的回调，这就是传说中的恶魔金字塔。相比回调嵌套，层次更分明，可读性强。基本原理学习无论是在异步操作的执行之前或执行之后，用对象的方法注册回调，回调都能一致执行。

遭遇“恶魔金字塔”

项目需要，封装了一个省市区的地址选择器组件。

可以根据省份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...

云服务器 GPU云服务器初探webrtc promise webrtc技术初探初探腾讯云存储网关

文章版权归作者所有，未经允许请勿转载,若此文章存在违规行为，您可以联系管理员删除。

转载请注明本文地址：https://www.ucloud.cn/yun/91857.html

初探 es6 promise

摘要：是单线程程序，所有代码都是单线程执行。导致的网络请求都是异步执行，异步执行可以通过回调函数实现秒钟才能打印，回调函数处理异步执行的但是推出一种新的方法对象用于表示一个异步操作的最终状态完成或失败，以及其返回的值。 javascript是单线程程序，所有代码都是单线程执行。导致javascript的网络请求都是异步执行，异步执行可以通过回调函数实现： setTimeout(callbac...

paraller 2019-08-22 15:40 评论0 收藏0
Callback到Promise再到Async进化初探

摘要：题外今天尝试了一下从文件经过再到文件的整个过程，这也是这种静态博客生成过程中的一环。这过程中，用到的中的系统，写的过程中恰好也经历了从到再到的转变。可以看到上面的函数已经非常顺序化了，当有个异步函数回调时，只需要顺序写就可以啦。题外：今天尝试了一下从Markdown文件经过ejs再到html文件的整个过程，这也是Hexo这种静态博客生成过程中的一环。这过程中，用到的Node中的fs系...

legendmohe 2019-08-20 18:58 评论0 收藏0
Mocha测试初探

摘要：是测试用例，表示一个单独的测试，是测试的最小单位。第一个参数是测试用例的名称加应该等于，第二个参数是一个实际执行的函数。这里对异步代码进行测试时需要注意一点，默认一个单元测试最多执行超时会报错。 Mocha简介：一个具有丰富特性的javascript 测试框架，支持多种断言库，异步代码测试等，不仅可运行在node.js 环境中还可以运行在浏览器中。一、安装 // 全局安装 npm ...

Binguner 2019-08-21 17:35 评论0 收藏0
Puppeteer初探--爬取并生成《ES6标准入门》PDF

摘要：首先介绍是一个库，他提供了一组用来操纵的默认也就是无的，也可以配置为有有点类似于，但是官方团队进行维护的，前景更好。使用，相当于同时具有和的能力，应用场景会非常多。首先介绍Puppeteer Puppeteer是一个node库，他提供了一组用来操纵Chrome的API（默认headless也就是无UI的chrome，也可以配置为有UI）有点类似于PhantomJS，但Puppet...

JerryWangSAP 2019-08-21 12:00 评论0 收藏0
构建 Web 应用之 Service Worker 初探

摘要：诞生之初，是单线程的。当接收到服务端的响应之后，便通过回调函数执行之后的操作。冲锋基于事件驱动。拥有拦截请求消息推送静默更新地理围栏等服务。控制时处于两种状态之一终止以节省内存监听获取和消息事件。支持的所有事件五销毁浏览器决定是否销毁。这次体验一种新的博客风格，我们长话短说，针针见血。 showImg(https://segmentfault.com/img/remote/14600...

voidking 2019-08-21 16:50 评论0 收藏0