回调地狱

829 阅读1分钟

什么是回调地狱?

异步请求容易构成回调地狱

怎么优化回调地狱

  • 拆解function:将各步拆解为单个的function

  • 事件发布/监听模式

    • 一方面监听某一事件,当事件发生时,进行相应回调操作,另一方面当某些操作完成之后,通过发布事件触发函数,这样就可以将原本捆绑在一起的代码解耦
  • Promise

    readFile('./sample.txt').then(content => {
         let keyword = content.substring(0, 5);
         return queryDB(keyword);
     }).then(res => {
         return getData(res.length);
     }).then(data => {
         console.log(data);
     }).catch(err => {
         console.warn(err);
     });
    
  • generator

    • generator是es6中的一个新的语法。在function关键字后添加*即可将函数变为generator。
    const generator = function* () {
        yield 11;
        yield 22;
        return 33;
    }
    
    • 执行generator将会返回一个遍历器对象,用于遍历generator内部的状态
        let g = generator();
        g.next(); // { value: 11, done: false }
        g.next(); // { value: 22, done: false }
        g.next(); // { value: 33, done: true }
        g.next(); // { value: undefined, done: true 
    
  • async/await

    • 任何一个函数都可以成为async函数
        async function foo () {};
        const foo = async function () {};
        const foo = async () => {};
        在async函数中可以使用await语句。await后一般是一个Promise对象。
        async function foo () {
            console.log('开始');
            let res = await post(data);
            console.log(`post已完成,结果为:${res}`);
        };
    
    • 当上面的函数执行到await时,可以简单理解为,函数挂起,等待await后的Promise返回,再执行下面的语句