国产xxxx99真实实拍_久久不雅视频_高清韩国a级特黄毛片_嗯老师别我我受不了了小说

資訊專欄INFORMATION COLUMN

Promise初探

mj / 1485人閱讀

摘要：可以根據(jù)省份城市和區(qū)對組件設(shè)置默認(rèn)值。獲取省份獲取城市獲取區(qū)出現(xiàn)層嵌套的回調(diào)，這就是傳說中的惡魔金字塔。相比回調(diào)嵌套，層次更分明，可讀性強(qiáng)?；驹韺W(xué)習(xí)無論是在異步操作的執(zhí)行之前或執(zhí)行之后，用對象的方法注冊回調(diào)，回調(diào)都能一致執(zhí)行。

遭遇“惡魔金字塔”

項目需要，封裝了一個省市區(qū)的地址選擇器組件。

可以根據(jù)省份id、城市id和區(qū)id對組件設(shè)置默認(rèn)值。邏輯是這樣的：

獲取省份列表，選中默認(rèn)省份；

第一步成功后，根據(jù)默認(rèn)省份id獲取城市列表，選中默認(rèn)城市；

第二部成功后，根據(jù)默認(rèn)城市id獲取區(qū)列表，選中默認(rèn)區(qū)。

 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;
                    }
                    //獲取區(qū)
                    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);
                    };
                    });

                }
            });

        }
    });
 };

出現(xiàn)3層嵌套的回調(diào)，這就是傳說中的“惡魔金字塔”。確實是惡魔呀，可讀性巨差，自己看著都有點(diǎn)暈，更別說其他人了。

都說ES6的Promise對象讓“惡魔金字塔”聞風(fēng)喪膽，忍不住來體驗一下。

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;
    });
};

需要有序地執(zhí)行異步操作的場景，Promise再適合不過了。相比回調(diào)嵌套，層次更分明，可讀性強(qiáng)。

Promise基本原理學(xué)習(xí)

無論是在異步操作的執(zhí)行之前或執(zhí)行之后，用Promise對象的then方法注冊回調(diào)，回調(diào)都能一致執(zhí)行。

很好奇它是怎么做到的，于是自己嘗試寫了個簡易的Promise, 模擬Promise對異步操作的值的代理：
https://gist.github.com/anony...

文章版權(quán)歸作者所有，未經(jīng)允許請勿轉(zhuǎn)載,若此文章存在違規(guī)行為，您可以聯(lián)系管理員刪除。

轉(zhuǎn)載請注明本文地址：http://m.specialneedsforspecialkids.com/yun/91857.html

相關(guān)文章

  • 初探 es6 promise

    摘要：是單線程程序，所有代碼都是單線程執(zhí)行。導(dǎo)致的網(wǎng)絡(luò)請求都是異步執(zhí)行，異步執(zhí)行可以通過回調(diào)函數(shù)實現(xiàn)秒鐘才能打印，回調(diào)函數(shù)處理異步執(zhí)行的但是推出一種新的方法對象用于表示一個異步操作的最終狀態(tài)完成或失敗，以及其返回的值。 javascript是單線程程序，所有代碼都是單線程執(zhí)行。導(dǎo)致javascript的網(wǎng)絡(luò)請求都是異步執(zhí)行，異步執(zhí)行可以通過回調(diào)函數(shù)實現(xiàn)： setTimeout(callbac...

    paraller 評論0 收藏0

  • Callback到Promise再到Async進(jìn)化初探

    摘要：題外今天嘗試了一下從文件經(jīng)過再到文件的整個過程，這也是這種靜態(tài)博客生成過程中的一環(huán)。這過程中，用到的中的系統(tǒng)，寫的過程中恰好也經(jīng)歷了從到再到的轉(zhuǎn)變。可以看到上面的函數(shù)已經(jīng)非常順序化了，當(dāng)有個異步函數(shù)回調(diào)時，只需要順序?qū)懢涂梢岳病? 題外：今天嘗試了一下從Markdown文件經(jīng)過ejs再到html文件的整個過程，這也是Hexo這種靜態(tài)博客生成過程中的一環(huán)。這過程中，用到的Node中的fs系...

    legendmohe 評論0 收藏0

  • Mocha測試初探

    摘要：是測試用例，表示一個單獨(dú)的測試，是測試的最小單位。第一個參數(shù)是測試用例的名稱加應(yīng)該等于，第二個參數(shù)是一個實際執(zhí)行的函數(shù)。這里對異步代碼進(jìn)行測試時需要注意一點(diǎn)，默認(rèn)一個單元測試最多執(zhí)行超時會報錯。 Mocha簡介： 一個具有豐富特性的javascript 測試框架，支持多種斷言庫，異步代碼測試等，不僅可運(yùn)行在node.js 環(huán)境中還可以運(yùn)行在瀏覽器中。 一、安裝 // 全局安裝 npm ...

    Binguner 評論0 收藏0

  • Puppeteer初探--爬取并生成《ES6標(biāo)準(zhǔn)入門》PDF

    摘要：首先介紹是一個庫，他提供了一組用來操縱的默認(rèn)也就是無的，也可以配置為有有點(diǎn)類似于，但是官方團(tuán)隊進(jìn)行維護(hù)的，前景更好。使用，相當(dāng)于同時具有和的能力，應(yīng)用場景會非常多。 首先介紹Puppeteer Puppeteer是一個node庫，他提供了一組用來操縱Chrome的API（默認(rèn)headless也就是無UI的chrome，也可以配置為有UI） 有點(diǎn)類似于PhantomJS，但Puppet...

    JerryWangSAP 評論0 收藏0

  • 構(gòu)建 Web 應(yīng)用之 Service Worker 初探

    摘要：誕生之初，是單線程的。當(dāng)接收到服務(wù)端的響應(yīng)之后，便通過回調(diào)函數(shù)執(zhí)行之后的操作。沖鋒基于事件驅(qū)動。擁有攔截請求消息推送靜默更新地理圍欄等服務(wù)。控制時處于兩種狀態(tài)之一終止以節(jié)省內(nèi)存監(jiān)聽獲取和消息事件。支持的所有事件五銷毀瀏覽器決定是否銷毀。 這次體驗一種新的博客風(fēng)格，我們長話短說，針針見血。 showImg(https://segmentfault.com/img/remote/14600...

    voidking 評論0 收藏0

發(fā)表評論

0條評論

mj

男|高級講師

TA的文章

閱讀更多
最新活動
閱讀需要支付1元查看
<