js中Promise及async函数解决回调地狱

// promise基本用法
let promise = new Promise((resolve, reject) => {
    resolve('这里放入异步成功返回的结果');
    reject('这里放入异步失败的结果');
});
// 成功执行.then，失败执行.catch
promise.then(result => {
    console.log(result);
})
.catch(error => {
    console.log(error);
})
// 需求：当前请求得到响应后再发起下一个请求
// promise解决回调地狱
function p1() {
    return new Promise((resolve, reject) => {
        resolve('p1结果已返回');
        reject('这里放入异步失败的结果');
    });
}
function p2() {
    return new Promise((resolve, reject) => {
        resolve('p2结果已返回');
        reject('这里放入异步失败的结果');
    });
}
function p3() {
    return new Promise((resolve, reject) => {
        resolve('p3结果已返回');
        reject('这里放入异步失败的结果');
    });
}
p1().then(result => {
    console.log(result);
    return p2();
})
.then(result => {
    console.log(result);
    return p3();
})
.then(result => {
    console.log(result);
});
// console结果
// p1结果已返回
// p2结果已返回
// p3结果已返回

// -------------async终极方案
// 异步函数默认的返回值是promise对象
// 在异步函数内部使用throw关键字进行错误的抛出，throw执行后，后面的代码不再执行
// 在异步函数内部使用return关键字进行结果返回，结果会被包裹在promise对象中，return代替了resolve方法
// 获取结果也是then和catch
// await关键字
//     它只能在async函数中使用
//     await后面只能写promise对象
//     await可以暂停异步函数向下执行，直到promise返回结果
async function p1() {
    return 'p1结果已返回';
}
async function p2() {
    return 'p2结果已返回';
}
async function p3() {
    return 'p3结果已返回';
}
async function run() {
    let r1 = await p1();
    let r2 = await p2();
    let r3 = await p3();
    console.log(r1);
    console.log(r2);
    console.log(r3);
}
run();
// console结果
// p1结果已返回
// p2结果已返回
// p3结果已返回

// 以jQuery为例，jQuery的ajax返回值里也有.then和.catch方法，所以可以直接使用async函数进行书写
// 例如：需求：interface1请求收到响应后再发起interface2请求，interface2请求收到响应后再发起interface3请求
// jQuery原始写法：
$.ajax({
    url: '/interface1',
    success: function (res) {
        console.log(res);
        $.ajax({
            url: '/interface2',
            success: function (res) {
                console.log(res);
                $.ajax({
                    url: '/interface3',
                    success: function (res) {
                        console.log(res);
                    }
                });
            }
        });
    }
});
// async/await写法：
(async function () {
    const res1 = await $.ajax({url: '/interface1'});
    const res2 = await $.ajax({url: '/interface2'});
    const res3 = await $.ajax({url: '/interface3'});
    console.log(res1);
    console.log(res2);
    console.log(res3);
})();