资讯专栏INFORMATION COLUMN

理解async

Jackwoo / 2710人阅读

摘要:写在前面本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的,也会与大家分享下本人对于库与库的理解。其实的任何异步编程的解决方案的目标都是要达到同步的语义,异步的执行。

写在前面

本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的async,也会与大家分享下本人对于thunk库与co库的理解。实现的效果:顺序读取出a.txtb.txt,将读出的内容拼接成为一个字符串。

同步读取
const readTwoFile = () => {
    const f1 = fs.readFileSync("./a.txt"),
        f2 = fs.readFileSync("./b.txt");
    return Buffer.concat([f1, f2]).toString();
};

这种方式最利于我们理解,代码也很清楚,没有过多的嵌套,很好的维护,但是这种有着最大的问题,那就是性能,node所倡导的就是异步i/o来处理密集i/o,而同步的读取,很大的程度上浪费着服务器的cpu,这种方式的弊端明显的大于好处,所以直接pass掉。(其实node的任何异步编程的解决方案的目标都是要达到同步的语义,异步的执行。

利用回调读取
const readTwoFile = () => {
    let str = null;
    fs.readFile("./a.txt", (err, data) => {
        if (err) throw new Error(err);
        str = data;
        fs.readFile("./b.txt", (err, data) => {
            if (err) throw new Error(err);
            str = Buffer.concat([str, data]).toString();
        });
    });
};

利用回调的方式,实现起来很简单,直接的嵌套下去就好,但是这种情况下很容易造成的就是不易维护,难以读懂的情况,最为极致的情况的就是回调地狱。

Promise实现
const readFile = file => 
    new Promise((reslove, reject) => {
        fs.readFile(file, (err, data) => {
            if (err) reject(err);
            reslove(data);
        });
    });
const readTwoFile = () => {
    let bf = null;
    readFile("./a.txt")
        .then(
            data => {
                bf = data;
                return readFile("./b.txt");
            }, 
            err => { throw new Error(err) }
        )
        .then(
            data => {
                console.log(Buffer.concat([bf, data]).toString())
            }, 
            err => { throw new Error(err) }
        );
};

Promise可以将横向增长的回调转化为纵向增长,能解决一些问题,但是Promise造成的问题就是代码冗余,一眼看过去,全部是then,也不是很爽,但是相比于回调函数嵌套来说,已经有了很大的提升。

yield

Generator很多语言中都有,本质上是协程,下面就来看一下协程,线程,进程的区别与联系:

进程:操作系统中分配资源的基本单位

线程:操作系统中调度资源的基本单位

协程:比线程更小的的执行单元,自带cpu上下文,一个协程一个栈

一个进程中可能存在多个线程,一个线程中可能存在多个协程,进程、线程的切换由操作系统控制,而协程的切换由程序员自身控制。异步i/o利用回调的方式来应对i/o密集,同样的使用协程也可以来应对,协程的切换并没有很大的资源浪费,将一个i/o操作写成一个协程,这样进行i/o时可以吧cpu让给其他协程。
js同样支持协程,那就是yield。使用yield给我们直观的感受就是,执行到了这个地方停了下来,其他的代码继续跑,到你想让他继续执行了,他就是会继续执行。

function *readTwoFile() {
    const f1 = yield readFile("./a.txt");
    const f2 = yield readFile("./b.txt");  
    return Buffer.concat([f1, f2]).toString();
}

yield下的顺序读取呈现的也是一种顺序读取的方式,对于readFile来看有两种不同的实现方式,

利用thunkify

const thunkify = (fn, ctx) => (...items) => (done) => {
    ctx = ctx || null;
    let called = false;
    items.push((...args) => {
        if (called) return void 0;
        called = true;
        done.apply(ctx, args);
    });
    try {
        fn.apply(ctx, items);    
    } catch(err) {
        done(err);
    }
};

thunkify函数就是一种柯里化得思想,最后的传入参数done就为回调函数,利用thunkify可以很轻松的实现yield函数的自动化流程:

const run = fn => {
    const gen = fn();
    let res;
    (function next(err, data) {
        let g = gen.next(data);
        if (g.done) return void 0;
        g.value(next);
    })();
};

利用Promise

const readFile = file => 
    new Promise((reslove, reject) => {
        fs.readFile(file, (err, data) => {
            if (err) reject(err);
            reslove(data);
        });
    });
const run = fn => {
    const gen = fn();
    let str = null;
    (function next(err, data) {
        let res = gen.next(data);
        if (res.done) return void 0;
        res.value.then(
            data => {
                next(null, data);
            }, 
            err => { throw new Error(err); }
        );
    })();
};
run(readTwoFile);

上面两种方式都可以达到自动执行yield的过程,那么有没有一种方式,可以兼容这两种实现方式呢,tj大神又给出了一个库,那就是co库,先来看下用法:

// readTwoFile的实现与上面类似,readFile既可以利用Promise也可以利用thunkify
// co库返回一个Promise对象
co(readTwoFile).then(data => console.log(data));

来看下co库的实现,co库默认会返回一个Promise对象,对于yield之后的值(如上面的res.value),co库会将其转换为一个Promise。实现思想很简单,基本还是利用递归的方式,大体的思路如下:

const baseHandle = handle => res => {
    let ret;
    try {
        ret = gen[handle](res);
    } catch(e) {
        reject(e);
    }
    next(ret);
};
function co(gen) {
    const ctx = this,
        args = Array.prototype.slice.call(arguments, 1);
    return new Promise((reslove, reject) => {
        if (typeof gen === "function") gen = gen.apply(ctx, args);
        if (!gen || typeof gen.next !== "function") return resolve(gen);

        const onFulfilled = baseHandle("next"),
            onRejected = baseHandle("throw");

        onFulfilled();

        function next(ret) {
            if (ret.done) reslove(ret.value);
            // 将yield的返回值转换为Proimse
            const value = toPromise.call(ctx, ret.value);
            if (value && isPromise(value)) return value.then(onFulfilled, onRejected);
            return onRejected(new TypeError("yield type error"));
        }
    });
}

toPromise就是将一些类型转换为Promise,从这里我们可以看出的是可以将哪些类型放在yield后面,这里就来看一个常用的:

// 把thunkify之后的函数转化为Promise的形式
function thunkToPromise(fn) {
    const ctx = this;
    return new Promise(function (resolve, reject) {
        fn.call(ctx, function (err, res) {
            if (err) return reject(err);
            if (arguments.length > 2) res = slice.call(arguments, 1);
            resolve(res);
        });
    });
}

最近Node已经支持了async/await,可以利用其来做异步操作:

终极解决
const readFile = file => 
    new Promise((reslove, reject) => {
        fs.readFile(file, (err, data) => {
            if (err) reject(err);
            reslove(data);
        });
    });
const readTwoFile = async function() {
    const f1 = await readFile("./a.txt");
    const f2 = await readFile("./b.txt");    
    return Buffer.concat([f1, f2]).toString();
};
readTwoFile().then(data => {
    console.log(data);
});

async/await做的就是将Promise对象给串联起来,避免了then的调用方式,代码非常的易读,就是一种同步的方式。不再需要借助其他外界类库(比如co库)就可以优雅的解决回调的问题。

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

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

相关文章

  • 令人费解的 async/await 执行顺序

    摘要:问题的关键在于其执行过程中的微任务数量,下文中我们需要用上述代码中的方式对微任务的执行顺序进行标记,以辅助我们理解这其中的执行过程。 原文发布在掘金社区:https://juejin.im/post/5c3cc981f265da616a47e028 起源 2019年了,相信大家对 Promise 和 async/await 都不再陌生了。 前几日,我在社区读到了一篇关于 async/...

    WilsonLiu95 评论0 收藏0
  • 「今日头条」前端面试题和思路解析

    摘要:一篇文章和一道面试题最近,有篇名为张图帮你一步步看清和的执行顺序的文章引起了我的关注。作者用一道年今日头条的前端面试题为引子,分步讲解了最终结果的执行原因。从字面意思理解,让我们等等。当前的最新版本,在这里的执行顺序上,的确存在有问题。 一篇文章和一道面试题 最近,有篇名为 《8张图帮你一步步看清 async/await 和 promise 的执行顺序》 的文章引起了我的关注。 作者用...

    宠来也 评论0 收藏0
  • 8张图帮你一步步看清 async/await 和 promise 的执行顺序

    摘要:第部分画图一步步看清宏任务微任务的执行过程我们以开篇的经典面试题为例,分析这个例子中的宏任务和微任务。注意这里只是把推入微任务队列,并没有执行。执行结束,才能继续执行后面的代码如图此时当前宏任务都执行完了,要处理微任务队列里的代码。 8张图让你一步步看清 async/await 和 promise 的执行顺序 为什么写这篇文章? 测试一下自己有没有必要看 需要具备的前置基础知识 主...

    weizx 评论0 收藏0
  • promise async await 理解笔记

    摘要:在异步编程中,提供了对象的方式。例如等同于所以可以理解为生成一个实例。那么自然也可以去调用则是配合使用的。等于是等待一个返回值,等待的执行结果。但是函数不会造成阻塞,所以配合使用,则没有影响到外部。 在异步编程中,es6提供了promise对象的方式。简单的用法 var promise = new Promise((resolve,reject)=>{ if(){ ...

    NoraXie 评论0 收藏0
  • 理解 JavaScript 的 async/await

    摘要:因为函数返回一个对象,所以可以用于等待一个函数的返回值这也可以说是在等函数,但要清楚,它等的实际是一个返回值。帮我们干了啥作个简单的比较上面已经说明了会将其后的函数函数表达式或的返回值封装成一个对象,而会等待这个完成,并将其的结果返回出来。 随着 Node 7 的发布,越来越多的人开始研究据说是异步编程终级解决方案的 async/await。我第一次看到这组关键字并不是在 JavaSc...

    tracymac7 评论0 收藏0
  • 理解ES7中的async函数

    摘要:什么是标准引入了函数,使得异步操作变得更加方便。顾名思义是异步的意思,用于声明一个函数是异步的。的作用正常情况下,命令后面是一个对象。表示函数等待返回结果了,再继续执行。上面便是一种错误用法,并没有在函数执行上下文中,而是在的回调函数中。 什么是Async、await ES2017 标准引入了 async 函数,使得异步操作变得更加方便。async顾名思义是异步的意思,用于声明一个函数...

    curried 评论0 收藏0

发表评论

0条评论

最新活动
阅读需要支付1元查看
<