回调地狱与解决方案

什么是回调地狱？
简单理解就是回调函数嵌套回调
示例：

    setTimeout(() => {console.log(1);setTimeout(() => {console.log(2);setTimeout(() => {console.log(3);}, 1000);}, 2000)}, 3000)

在这里插入图片描述

如上代码所示，回调函数嵌套回调，就形成了回调地狱
我们该如何解决回调地狱的问题，这里有两种方案，让我为大家介绍一下

解决回调地狱的两种方案

一、Promise
我们可以使用Promise解决回调地狱的问题
示例：

    // 封装// 传入两个参数 第一个成功的参数 第二个布尔值 默认给一个truefunction main(data, isFlag = true) {return new Promise((resolve, reject) => {// 自定义一个flag 如果为true 执行resolve 成功 如果为false 执行rejectlet flag = isFlagif (flag) {setTimeout(() => {resolve(data)})} else {reject("reject的情况下")}})}main(1).then(value => {console.log(value);return main(2)}).then(value => {console.log(value);return main(3)}).then(value => {console.log(value);//这里是给大家演示一下PromiseState状态为rejected时的情况下return main("", false)}).catch(reason => {// 失败执行console.log(reason);})

在这里插入图片描述

二、async/await

    // async 可以单独使用 但await必须和async一起使用async function test() {let p1 = await main(1)let p2 = await main(2)let p3 = await main(3)console.log(p1);console.log(p2);console.log(p3);}test()