Async & generator & Promise

redux-saga中大量涉及到Es6的generator語法，因而乎將generator/promise/async之間的關聯和區別複習一下。這些語法糖的出現無外乎是爲了簡化深度回調，寫法的簡化，代碼的方便閱讀。

generator

generator迭代器語法中涉及的語法糖*和yield。 *用在生成器函數的開頭。

// a simple generator function
function* gen() {
    yield 1;
    yield 2;
    yield *[3,4,5];
}
var res = gen();
res.next(); // {value: 1, done: false}
for(var value of gen()) {
    console.log(value);
}
// result is 1,2,3,4,5
複製代碼

generator的yield語法返回一個對象{value: val, done: false/true},generator函數相對於迭代器，next指向下一個yield。generator的yield後面能夠放同步和異步操做。

await/async

Promise是鏈式的then來完成每一個task。而await/async的出現使得異步的操做在寫法上和同步同樣，而且每一個await時間只能處理一個異步操做。

async function init() {
    await doTask1();
    await doTask2();
    await doTask3();
}
// an implementation using a generator function
function* init() {
    yield doTask1();
    yield doTask2();
    yield doTask3();
}
// execute generator function
function runner(genFn) {
    const itr = genFn();
    function run(arg) {
        const result = itr.next(arg);
        if (result.done) {
            return result.value;
        } else {
            return Promise.resolve(result.value).then(run);
        }
    }
    return run();
}
複製代碼

async/await可使用Promise加generator來實現。

async function foo() {
    await bar();
}
// babel 的編譯結果
// https://hackernoon.com/async-await-generators-promises-51f1a6ceede2
let foo = (() => {
    var _ref = _asyncToGenerator(function* () {
        yield doTask1();
    });
    return function foo() {
        return _ref.apply(this, arguments);
    }
})();

function _asyncToGenerator(fn) {
    return () => {
        var gen = fn.apply(this, arguments);
        return new Promise((resolve, reject) =>{
            function step(key, arg) {
                try {
                    var info = gen[key](arg);
                    var value = info.value;
                } catch(error) {
                    reject(error);
                    return;
                }
                if (info.done) {
                    resolve(value);
                } else {
                    return Promise.resolve(value).then((value => {
                        step("next", value);
                    }, (err) => {
                        step("throw", err);
                    }));
                }
            }
            return step("next");
        })
    }
}

複製代碼

Promise Vs Async

v8 fast async

Promise:

function handler() {
    return validateParams()
        .then(dbQuery)
        .then(serviceCall)
        .then(result => {
            return result;
        })
}
複製代碼

async 函數

async function handler() {
    await validateParams();
    const dbResults = await dbQuery();
    const results = await serviceCall(dbResults);
    return results;
}
複製代碼

Event loop

Javascript是單線程執行，異步操做都是經過事件來處理的。 待續。。。