视频1 视频21 视频41 视频61 视频文章1 视频文章21 视频文章41 视频文章61 推荐1 推荐3 推荐5 推荐7 推荐9 推荐11 推荐13 推荐15 推荐17 推荐19 推荐21 推荐23 推荐25 推荐27 推荐29 推荐31 推荐33 推荐35 推荐37 推荐39 推荐41 推荐43 推荐45 推荐47 推荐49 关键词1 关键词101 关键词201 关键词301 关键词401 关键词501 关键词601 关键词701 关键词801 关键词901 关键词1001 关键词1101 关键词1201 关键词1301 关键词1401 关键词1501 关键词1601 关键词1701 关键词1801 关键词1901 视频扩展1 视频扩展6 视频扩展11 视频扩展16 文章1 文章201 文章401 文章601 文章801 文章1001 资讯1 资讯501 资讯1001 资讯1501 标签1 标签501 标签1001 关键词1 关键词501 关键词1001 关键词1501 专题2001
理解javascript async的用法
2020-11-27 22:32:00 责编:小采
文档

写在前面

本文将要实现一个顺序读取文件的最优方法,实现方式从最古老的回调方式到目前的async,也会与大家分享下本人对于thunk库与co库的理解。实现的效果:顺序读取出a.txt与b.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库)就可以优雅的解决回调的问题。

    下载本文
    显示全文
    专题