回调地狱的多种解决方式

Bertha 。 2021-09-19 01:52 437阅读 0赞

## 什么是回调地狱 ##

异步的JavaScript程序，或者说使用了回调函数的JavaScript程序，很难地去直观顺畅地阅读，大量的代码以下面这种方式结束。简单说，就是函数作为参数层层嵌套。代码以此种形式展现时无疑是不利于我们阅读与维护的。

setTimeout(function (name) { 
        var catList = name + ','
        setTimeout(function (name) { 
            catList += name + ','
            setTimeout(function (name) { 
                catList += name
                console.log(catList)
            }, 200, 'Lion')
        }, 200, 'Jaguar')
    }, 200, 'Panther')
    
    // Panther,Janguar,Lion

## 解决回调地狱 ##

**1. 拆解 function：将各步拆解为单个的 function**

function buildCatList(list, returnVal, fn) { 
        setTimeout(function (name) { 
            var catList = list === '' ? name : list + ',' + name
            fn(catList)
        }, 200, returnVal)
    }
    
    buildCatList('', 'Panther', getJanguar)
    
    function getJanguar(list) { 
        buildCatList(list, 'Janguar', getLynx)
    }
    
    function getLynx(list) { 
         buildCatList(list, 'Lion', print)
    }
    
    function print(list) { 
        console.log(list)
    }
    
    // Panther,Janguar,Lion

定时器中的回调函数处在外层函数中的作用域内，并通过参数传入，没有产生全局变量，没有重复代码。但是 function 拆分的方式其实仅仅只是拆分代码块，时常会不利于后续维护

**2. 通过 Promise 链式调用的方式**

function buildCatList(list, returnVal) { 
        return new Promise(function (resolve, reject) { 
            setTimeout(function (name) { 
                var catList = list === '' ? name : list + ',' + name
                resolve(catList)
            }, 200, returnVal)
        })
    }
    
    buildCatList('', 'Panther').then(function (res) { 
    	return buildCatList(res, 'Janguar')
    }).then(function (res) { 
    	return buildCatList(res, 'Lion')
    }).then(function (res) { 
    	console.log(res)
    })
    
    // Panther,Janguar,Lion

Promise 函数虽然改变了之前回调地狱的写法，但是在根本上还是函数套函数，看起来不是那么的美观

**3. 通过 Generator 函数暂停执行的效果方式**

function getPanther(list) { 
    	return list + 'Panther' + ','
    }
    
    function getJaguar(list) { 
        return list + 'Jaguar' + ','
    }
    
    function getLion(list) { 
        return list + 'Lion'
    }
    
    function* buildCatList() { 
        yield getPanther
        yield getJaguar
        yield getLion
    }
    
    //流程控制
    function run(fn){ 
        const gen = fn()      // 调用 Generator 函数，返回一个遍历器对象 (Iterator）
        var a = gen.next().value('')   // 调用遍历器对象的 next() 方法，就会返回一个有着 value 和 done 两个属性的对象
        var b = gen.next().value(a)
        var c = gen.next().value(b)
        console.log(c)
    }
    
    run(buildCatList)   // 开始执行
    
    // Panther,Jaguar,Lion

通过 generator 虽然能提供较好的语法结构，但是毕竟 generator 与 yield 的语境用在这里多少还有些不太贴切

**4. 通过ES8的异步函数 async / await**

*  async 表示这是一个 async 函数，await 只能用在这个函数里面
 *  await 表示在这里等待 Promise 返回结果后，再继续执行
 *  await 后面跟着的应该是一个 Promise 对象（当然，其他返回值也没关系，只是会立即执行）
 *  await 等待的虽然是 Promise 对象，但不必写 .then() ，可以直接得到返回值

function buildCatList(list, returnVal) { 
    	return new Promise(function (resolve, reject) { 
        	setTimeout(function (name) { 
            	var catList = list === '' ? name : list + ',' + name
            	resolve(catList)
        	}, 200, returnVal)
    	})
    }
    
    function fn(list) { 
    	return list + ',' + 555
    }
    
    async function render() { 
        var a = await buildCatList('','Panther')
        var b = await buildCatList(a, 'Jaguar')
        var c = await buildCatList(b, 'Lion')
        var d = await fn(c)
        console.log(d)
    }
    
    render()
    
    // Panther,Jaguar,Lion,555

代码简洁清晰，异步代码也具有了“同步”代码的结构