Async & generator & Promise

最新推荐文章于 2024-01-20 18:07:41 发布

转载最新推荐文章于 2024-01-20 18:07:41 发布 · 141 阅读

0 ·

CC 4.0 BY-SA版权

原文链接：https://juejin.im/post/5cab3b145188251ac723270f

文章标签：

#javascript #ViewUI

本文深入探讨了Redux-saga中使用的Generator语法及其与Async/Await的关系。详细讲解了Generator函数的基本概念，如yield关键字的使用及如何创建迭代器。同时对比了Promise链式调用与Async/Await的不同之处，并介绍了它们在异步编程中的应用。

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;
}
复制代码