什么是回调地狱？解决回调地狱的方法

什么是回调地狱？（代码执行顺序的一种操作（解决异步））

回调地狱的概念：回调函数里面嵌套回调函数。

 	//地狱回调
    setTimeout(function () {  //第一层
          console.log('111');//等3秒打印111在执行下一个回调函数
          setTimeout(function () {  //第二层
              console.log('222');//等2秒打印222在执行下一个回调函数
              setTimeout(function () {   //第三层
                  console.log('333');//等一秒打印333
              }, 1000)
          }, 2000)
      }, 3000)

执行结果：

解决回调地狱的方法：

方法一：使用promise链式调用

 	//promise解决
    function fn(str) {
    var promise = new Promise(function (success, error) { //success 是成功的方法  error是失败的方法  
        //处理异步任务
        var flag = true;
        setTimeout(function () {
            if (flag) {
                success(str)
            }
            else {
                error('失败')
            }
        })
    })
    return promise;
	}
	fn('111')
	    .then((res) => { //then是成功执行的方法 返回的还是一个promise对象
	        console.log(res);//打印111  res是执行
	        return fn('222');
	    })
	    .then((res) => {
	        console.log(res);
	        return fn('333')
	    })
	    .then((res) => {
	        console.log(res);
	    })
	    .catch((res) => { //catch是失败执行的方法
	        console.log(res);
	    })

执行结果：可以看到还是会嵌套，存在回调函数，不是最完美的解决方法

方法二：使用 async/await 终极解决方案（无回调函数，同步执行）

//1.封装一个返回promise的异步任务
    function fn(str) {
        var promise = new Promise(function (success, error) {
            var flag = true;
            setTimeout(function () {
                if (flag) {
                    success(str)
                } else {
                    error('处理失败')
                }
            })
        })
        return promise;
    }
 
    //2.封装一个执行上述异步任务的async函数
    async function test() {
    try{
        var res1 = await fn('111');  //await直接拿到fn()返回的promise的数据，并且赋值给res
        var res2 = await fn('222');
        var res3 = await fn('333');
        console.log(res1);
        console.log(res2);
        console.log(res3);
        } catch(error){
        	 console.log("抛出异常错误: "+error);
        }
    }
    //3.执行函数
    test();