2018年11月2日 星期五

Javascript 非同步 pattern

還沒有 Promise, asyc / await 前
在撰寫非同步程式時
其實 code 的邏輯不太好看
又容易會有 callback hell 的問題

今天想了一下,其實可以用以下概念來處理此類問題

我們以常見的從資料庫撈資料來看
大概注意幾個重點即可

1. 在 function 內寫出一連串要做事的 function and callback
2. 上述 function 不要寫成變數,否則會有 undefined 的問題(hoist)
3. 相關的 function 可以照執行順序寫好,方便閱讀


function getDataFromDB(callback) {
    console.log("start connect to DB");
    connectDB(connectDBCB);

    function connectDB(cb) {
        setTimeout(() => {
            console.log("connect to DB done \n");
            cb(null, "fake handle");
        }, 2000);
    }

    function connectDBCB(err, conn) {
        console.log("start get data");
        getData(conn, getDataCB);
    }

    function getData(conn, cb) {
        setTimeout(() => {
            console.log("get data done \n");
            cb(null, conn);
        }, 2000);
    }

    function getDataCB(err, conn) {
        setTimeout(() => {
            console.log("prepare data to back");
            callback(err, [1, 2, 3]);
        }, 2000);
    }
}

getDataFromDB((err, data) => {
    console.log(err, data);
});

沒有留言:

張貼留言