使用Promise实现异步执行并解决回调地狱

1.基础要点

• Promise 对象是一个 构造函数，可以 new Promise() 得到一个 Promise 的实例。
• Promise 表示一个 异步操作；每当我们 new 一个 Promise 的实例，这个实例，就表示一个具体的异步操作。
• Promise 上，有两个函数，分别叫做 resolve（成功之后的回调函数） 和 reject（失败之后的回调函数）。
• 在 Promise 构造函数的 Prototype 属性上，有一个 .then() 方法，只要是 Promise 构造函数创建的实例，都可以访问到 .then() 方法。
• 由于 Promise 的实例是一个异步操作，所以，内部拿到 操作的结果后，无法使用 return 把操作的结果返回给调用者； 这时候，只能使用回调函数的形式，来把成功或失败的结果，返回给调用者。
• xxx.then(a => a) 的效果实际上是 return new Promise(resolve => resolve(a))。
• then()方法的参数是两个回调函数，第一个是成功的回调，第二个是失败的回调，失败的回调函数可省略不写。
• 如上个then()中有代码执行失败报错，则会调用下一个then()中的失败回调函数处理，函数可接收传来的报错信息,如then()中没有失败的回调函数处理，可使用catch()方法接收处理。

2.用法详情

1.Promise的异步执行

    function demo() {
        const promise = new Promise((resolve, reject) => {
            console.log("异步代码执行成功");
            if (false) reject(); //如果失败则执行失败回调函数
            resolve();  //成功则执行成功回调函数
        })
        .then(() => {
            console.log("成功1");
        }, () => {
            console.log("失败1");
        })
        .then(() => {
            setTimeout(() => {
                console.log("成功2") //因为是异步的,此条因定时器延时，将在最后打印出来
            }, 1000);
            console.log(aaa); // aaa未定义，此条将执行失败
        })
        .then(() => {
            console.log("成功3");
        }, err => {
            console.log("失败3" + err);
        })
        .catch(err => {
            console.log("catch捕获" + err);
        })
    }
    demo(); 
    // ---输出顺序结果如下:---
    // 异步代码执行成功
    // 成功1
    // 失败3 ReferenceError: aaa is not defined
    // 成功2

2.常规用法 (后续的Promise执行，依赖于前面Promise执行的结果，并解决回调地狱)

    function demo2(str) {
        return new Promise((resolve, reject) => {
            console.log(str + "执行成功")
            resolve(str);  
        })
    }

    demo2("第一次")
    .then(str => {
        console.log( str + "成功1");
        // console.log(aaa); // 此条会报错，将终止下面的Promise执行，并被catch()捕获
        return demo2("第二次")
    })
    .then(str => {
        console.log(str + "成功2");
        return demo2("第三次")
    })
    .then(str=>{
        console.log(str + "成功3");
    })
    .catch(err=>{
        console.log(err);
    })
    // ---输出顺序结果如下:---
    // 第一次执行成功
    // 第一次成功1
    // 第二次执行成功
    // 第二次成功2
    // 第三次执行成功
    // 第三次成功3

如需当前面的Promise执行失败，让后续的Promise仍继续执行，可以为每个promise指定失败的回调，
即在then()中添加失败回调函数，并在该函数内添加 return demo2(“第二次”) 即可