zoukankan      html  css  js  c++  java
  • [Node] 逃离回调地狱

    逃离Node回调地狱

    Background :

    在Node中,函数的返回结果大多利用回调的方式处理。如简单的判断文件是否存在并读取内容:

    var fs = require('fs');
    fs.exists('path/to/file', function (exists) {
        if (exists) {
            fs.readFile('path/to/file', function (err, data) {
                if (err) {
                    console.log('error: ', err);
                } else {
                    console.log(data);
                }
            });
        }
    });
    

    这里暂不考虑existsSyncreadFileSync这类函数,因为并不是所有函数都有对应的Sync函数,回调形式是Node的主角。

    如上述示例,当回调嵌套过多时,代码的可读性将会严重下降。这就是所谓的回调地狱

    Solution :

    关于回调地狱,网上有很多解决方案。一般是利用promise,async或者Generator来解决回调嵌套。

    本文给大家介绍一种新的解决方案:await(个人认为比之前的看到的promise或者async的方案好很多)。
    await是ES7的特性,尽管Node的最新版本(6.4.0)已经支持大多数ES2015(ES6)特性,但是await并不被Node支持。

    TypeScript

    TypeScript是具有类型系统的JavaScript超集。 它可以编译成普通的JavaScript代码。 TypeScript支持任意浏览器,任意环境,任意系统并且是开源的。
    利用TypeScript中的async/await可以很好的解决回调地狱:

    import * as fs from 'fs';
    async function existsAsync(filePath: string): Promise<boolean> {
        return new Promise<boolean>((resolve, reject) => {
            fs.exists(filePath, (exists: boolean) => {
                resolve(exists);
            });
        });
    }
    
    async function readFileAsync(filePath: string, encoding: string = 'utf8'): Promise<string> {
        return new Promise<string>((resolve, reject) => {
            fs.readFile(filePath, encoding, (err, data) => {
                if (err) {
                    reject(err);
                } else {
                    resolve(data);
                }
            });
        });
    }
    
    async function main(): Promise<void> {
        let exists: boolean = await existsAsync('path/to/file');
        if (exists) {
            let fileContent: string = await readFileAsync('path/to/file').catch((reason) => {
                console.log('rejected: ', reason);
            });
            console.log(fileContent);
        }
    }
    
    main().then(() => {
        console.log('problem solved');
    });
    

    Explanation :

    由于ES2015尚未包含await特性,所以TypeScript中的await在编译成js之后利用的是Generator来实现await效果的。

    TypeScript编译的target默认是ES5,所以想使用async/await要把tsconfig.json中的target属性改为es2015

    Conclusion :

    利用TypeScript中的async/await可以将Node中的回调扁平化,比promise式的链式调用更易读。个人认为是解决回调地狱的首选方案。

    TypeScript作为js的超集,可以用在任何使用js的场景。配合typings和VS code的IntelliSense,写js再也不痛苦啦~

  • 相关阅读:
    高级架构进阶之HashMap源码就该这么学
    MySQL底层索引剖析
    一篇文章把本该属于你的源码天赋还给你
    不懂RPC实现原理怎能实现架构梦
    观《亿级流量网站架构核心技术》一书有感
    高效程序员如何优雅落地需求
    职场软技能:开启程序员的“破冰之旅”
    获取ScrollView的onScrollListener
    Android自定义控件之圆形进度条ImageView
    Android之內置、外置SDCard
  • 原文地址:https://www.cnblogs.com/emeryao/p/5817509.html
Copyright © 2011-2022 走看看