异步回调嵌套和Promise以及async和await的理解

在ES6常用API归纳总结中对于Promise和async和await进行了简单的说明，但要在使用它们的时候更清晰有条理，还要对其进行更深刻的理解。

1.为什么会有Promise存在？

在实际的项目中可能会有这种场景完成一次数据请求后拿到的返回数据作为下一次的请求参数继续进行请求，在promise出现之前，通常通过回调函数的嵌套来处理。

//传统的回调嵌套场景
$.ajax({
    url: 'urlone',
    data: paramsJsonOne,
    success: (resone) => {
        console.log(resone, 'resone');
        $.ajax({
            url: 'urltwo',
            data: resone.data,
            success: (restwo) => {
                console.log(restwo, 'restwo');
                $.ajax({
                    url: 'urlthree',
                    data: restwo.data,
                    success: (resthree) => {
                        console.log(resthree, 'resthree');
                    }
                });
            }
        });
    }
});

传统回调嵌套会出现的问题

  • 很容易进入到回调地狱，可读性差。
  • 问题可以解决，不利于代码维护。
    针对以上场景出现的这种异步函数回调嵌套的问题，后来出现的Promise可以比较好的解决，正如之前所说，Promise是异步编程的一种解决方案，让回调函数变成了规范的链式写法，程序流程可以看的很清楚，可以很好的解决回调函数嵌套的问题。

Promise出现后，可以用Promise的then 链来解决多层回调的问题,如果then()中返回新的promise，那么下一级.then()会在新的promise状态改变之后执行,如果返回其他任何值(无返回值可视为返回undefined)，则会立即执行下一级.then()

使用Promise来实现上述场景的需求

function getAjaxData(Params, URL) {
    return new Promise((resolve) => {
        $.ajax({
            url: URL,
            data: Params,
            success: (res) => {
                resolve(res);
            }
        });
    });
}
function ajaxOne(params, url) {
    return getAjaxData(params, URL);
}
function ajaxTwo(params, url) {
    return getAjaxData(params, URL);
}
function ajaxThree(params, url) {
    return getAjaxData(params, URL);
}
ajaxOne(dataOne, urlone).then((res) => {
    ajaxTwo(res.data, urltwo).then((res) => {
        ajaxThree(res.data, urlthree).then((res) => {
            let result = res;
            console.log(result);
        });
    });
});

Promise可以通过 then 链来解决多层回调的问题，除此之外，现在我们又可以用 async/await 来进一步优化它。

使用async和await来进一步优化Promise实现上述场景的需求

function getAjaxData(Params, URL) {
    return new Promise((resolve) => {
        $.ajax({
            url: URL,
            data: Params,
            success: (res) => {
                resolve(res);
            }
        });
    });
}
function ajaxOne(params, url) {
    return getAjaxData(params, URL);
}
function ajaxTwo(params, url) {
    return getAjaxData(params, URL);
}
function ajaxThree(params, url) {
    return getAjaxData(params, URL);
}
//当出现async 和 await 后，对以上方案又有了新的优化处理
async function asyncDoBetter() {
    let dataTwo = await ajaxOne(dataOne, urlone);
    let dataThree = await ajaxTwo(dataTwo, urltwo);
    let result = await ajaxThree(dataThree, urlthree);
    console.log(result, 'result');
}
asyncDoBetter();

可以看到，代码可读性更好，异步的执行过程看起来就像同步执行过程一样。对于async和await,稍后我们在仔细解读。

2.Promise.all()和Promise.race()的理解和使用。

  • Promise.all()的使用
    Promise.all可以将多个Promise实例包装成一个新的Promise实例，此实例在参数内所有的 promise 都“完成（resolved）”或参数中不包含 promise 时回调完成（resolve）；如果参数中 promise 有一个失败（rejected），
    此实例回调失败（reject），失败原因的是第一个失败 promise 的结果，同时，成功和失败的返回值是不同的，成功的时候返回的是一个结果数组，而失败的时候则返回最先被reject失败状态的值。
function numberGame(n) {
    return new Promise((resolve, reject) => {
        if (n < 20) {
            setTimeout(() => {
                resolve(n, '你赢了');
            }, 2000);
        } else {
            setTimeout(() => {
                reject(n, '你输了');
            }, 2000);
        }
    });
}
Promise.all([ numberGame(10), numberGame(15) ]).then(
    (res) => {
        console.log(res); //[10,15]
    },
    (err) => {
        console.log(err);
    }
);
Promise.all([ numberGame(10), numberGame(25) ]).then(
    (res) => {
        console.log(res);
    },
    (err) => {
        console.log(err); //25
    }
);

promise.all的应用场景
在实际项目中，可能会遇到 需要从前两个接口中的返回结果中获取第三个接口的请求参数这种情况。 也就是需要等待两个/多个异步事件完成后，再进行回调。
对于异步回调，首先想到的就会是使用Promise封装，然后使用.then()来触发回调。那么对于两个或多个异步事件均完成后再触发回调可以使用Promise.all()方法。

function testPromiseAll(n) {
    return new Promise((resolve, reject) => {
        if (n < 3000) {
            setTimeout(() => {
                resolve(n);
            }, n);
        } else {
            setTimeout(() => {
                reject(n);
            }, n);
        }
    });
}
Promise.all([ testPromiseAll(2000), testPromiseAll(1000) ]).then(
    (res) => {
        console.log(res); //[2000,1000]
        //Promise.all获得的成功结果的数组里面的数据顺序和Promise.all接收到的数组顺序是一致的，即testPromiseAll(2000)的结果在前，即便testPromiseAll(2000)的结果获取的比testPromiseAll(1000)要晚
        //testPromiseAll(2000), testPromiseAll(1000)分别模拟请求接口的两个异步操作 两个操作都成功后返回的res可以作为第三个异步操作的参数
    },
    (err) => {
        console.log(err);
    }
);
  • Promise.race()的使用
    Promse.race就是赛跑的意思，意思就是说，Promise.race([p1, p2, p3])里面哪个结果获得的快，就返回那个结果，不管结果本身是成功状态还是失败状态。
function testPromiseAll(n) {
    return new Promise((resolve, reject) => {
        if (n < 3000) {
            setTimeout(() => {
                resolve(n);
            }, n);
        } else {
            setTimeout(() => {
                reject(n);
            }, n);
        }
    });
}
Promise.race([ testPromiseAll(2000), testPromiseAll(1000) ]).then(
    (res) => {
        console.log(res, 'race'); //1000
    },
    (err) => {
        console.log(err, 'race');
    }
);

3.async 和 await的深入理解

  • async和await是什么,用来做什么
    JavaScript 中的 async/await 是 AsyncFunction 特性 中的关键字。
    async 是“异步”的简写，await 可以认为是 async wait 的简写。async 通常用于申明一个 function 是异步的，而 await 用于等待一个异步方法执行完成。
    另外，语法规定，await 只能出现在 async 函数中
  • async的理解
async function testMyFn() {
    return 'hellow world';
}
let result = testMyFn();
console.log(result, 'result'); //Promise { 'hellow world' } 'result'
testMyFn().then((data) => {
    console.log(data); //hello world
});
async function testMyFn1() {}
let result1 = testMyFn1();
console.log(result1, 'result1'); //Promise { undefined } 'result1'
testMyFn1().then((data) => {
    console.log(data); //undefined
});

由上可知，async 函数会返回一个 Promise 对象，如果在函数中 return 一个直接量，async 会把这个直接量通过 Promise.resolve() 封装成 Promise 对象。
Promise.resolve(x) 可以看作是 new Promise(resolve => resolve(x)) 的简写。
既然async 函数返回的是一个 Promise 对象，那么在没有await的情况下，可以用then() 的链来处理这个 Promise 对象。
如果 async 函数没有返回值，它会返回 Promise.resolve(undefined)。

  • await的理解
    一般,我们认为 await 是在等待一个 async 函数完成。
    因为 async 函数返回一个 Promise 对象，所以 await 可以用于等待一个 async 函数的返回值。
    需要注意的是，await 不仅仅用于等 Promise 对象，它可以等任意表达式的结果，所以，await 后面可以接普通函数调用。
function testMyFn2() {
    return 'testMyFn2';
}
async function testMyFn3() {
    //return 'testMyFn3';
    return Promise.resolve('testMyFn3');
}
async function testAwait() {
    let test1 = await testMyFn2();
    let test2 = await testMyFn3();
    console.log(test1, test2); //testMyFn2 testMyFn3
}
testAwait();

await 要等的东西,Promise 对象，或者其它值。
await 是个运算符，用于组成表达式，await 表达式的运算结果取决于它等的东西。
如果它等到的不是一个 Promise 对象，那 await 表达式的运算结果就是它等到的东西。
如果它等到的是一个 Promise 对象，await会等着 Promise 对象 resolve，然后得到 resolve 的值，
作为 await 表达式的运算结果。

  • async和await的使用
//声明一个函数，返回一个promise
function testMyFn4() {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve('testMyFn4');
        }, 2000);
    });
}
//常规操作
testMyFn4().then((res) => {
    console.log(res, 'testMyFn4');
});

//使用async 和 await
async function testAwaitOne() {
    let dataOne = await testMyFn4();
    console.log(dataOne, 'dataOne');
}
testAwaitOne();
  • async和await存在的意义
    使用 await/async 用同步的思维去解决异步的代码,
    Promise 通过 then 链来解决多层回调的问题，现在又用 async/await 来进一步优化它。
    单一的 Promise 链并不能发现 async/await 的优势，
    如果需要处理由多个 Promise 组成的 then 链的时候，
    优势就能体现出来了。如开始提到的实例。

模拟一个场景，这个场景由分多个步骤完成，每个步骤都是异步的，而且依赖于上一个步骤的结果。我们仍然用 setTimeout 来模拟异步操作

function takeTime(n) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n + 100);
        }, n);
    });
}
function stepOne(n) {
    console.log(n, 'stepOne'); // 100 stepOne
    return takeTime(n);
}
function stepTwo(n) {
    console.log(n, 'stepTwo'); // 200 stepTwo
    return takeTime(n);
}
function stepThree(n) {
    console.log(n, 'stepThree'); // 300 stepThree
    return takeTime(n);
}
//用 Promise then链的方式来实现以上场景
function DoIt() {
    let timeOne = 100;
    stepOne(timeOne).then((timeTwo) =>
        stepTwo(timeTwo).then((timeThree) =>
            stepThree(timeThree).then((result) => {
                console.log(result, 'result'); //400 result
                console.timeEnd('DoIt');
            })
        )
    );
}
DoIt();

//用async 和 await的方式来实现
async function DoItOne() {
    let timeOne = 100;
    let timeTwo = await stepOne(timeOne);
    let timeThree = await stepTwo(timeTwo);
    let result = await stepThree(timeThree);
    console.log(result, 'result');
}
DoItOne();

对比发现，使用async和await,结果和之前的 Promise 实现是一样的，async和await的代码看起来更清晰，像同步代码一样。

另外 如果把以上场景要求改一下，仍然是三个步骤，但每一个步骤都需要之前每个步骤的结果。

function takeTime1(n) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(n + 100);
        }, n);
    });
}
function stepOne1(n) {
    console.log(n, 'stepOne1'); // 100 stepOne1
    return takeTime(n);
}
function stepTwo1(m, n) {
    console.log(m, n, 'stepTwo1'); // 200,100 stepTwo1
    return takeTime(m + n);
}
function stepThree1(k, m, n) {
    console.log(k, m, n, 'stepThree1'); // 400,200,100 stepThree1
    return takeTime(k + m + n);
}
//使用async await来处理
async function DoItTwo() {
    let timeOne = 100;
    let timeTwo = await stepOne1(timeOne);
    let timeThree = await stepTwo1(timeTwo, timeOne);
    let result = await stepThree1(timeThree, timeTwo, timeOne);
    console.log(result, 'result'); //800
}
DoItTwo();
  • async和await获取失败的结果 await和成功后的操作放到try里，失败的放在catch。
function numberGame(n) {
    return new Promise((resolve, reject) => {
        if (n < 20) {
            setTimeout(() => {
                resolve(n, '你赢了');
            }, 2000);
        } else {
            setTimeout(() => {
                reject(n, '你输了');
            }, 2000);
        }
    });
}
async function playNumberGame(n) {
    try {
        let Win = await numberGame(n);
        console.log(Win, 'Win');
    } catch (error) {
        console.log(error, 'Lost');
    }
}
playNumberGame(Math.random() * 40);
  • 传统的异步解决方法与promise优势的再理解
/*js代码是单线程执行的，所有的异步操作，都可以以回调函数的方式来进行处理，先处理完同步的主线程的内容，然后再去执行对应的异步的回调函数*/
function callBack() {
    console.log('callback');
}
console.log('start');
setTimeout(callBack, 1000);
console.log('end');

/*js种典型的异步操作 ajax请求,successFn,failFn为对应的异步操作的回调函数*/
function ajax(method, url, data, successFn, failFn) {
    let xhr = new XMLHttpRequest();
    xhr.open(method, url);
    xhr.send(data);
    xhr.onreadystatechange = function() {
        if (xhr.readyState == '4') {
            if (xhr.status == '2') {
                successFn(xhr.responseText);
            } else {
                failFn(xhr.status);
            }
        }
    };
}

function successFn(responTest) {
    console.log(responTest, '成功');
}
function failFn(status) {
    console.log(status, '失败');
}
//ajax('get', 'baidu.com', {}, successFn, failFn);
/*向上面这样以回调函数来处理js中的异步操作可以解决一些常规的场景，但是如果存在异步里面又有异步操作，存在层层嵌套异步操作的情况的话,
以这种方式在处理就显得力不从心，出现可怕的回调地狱问题。比如，在实际的项目中可能会有这种场景，完成一次数据请求后拿到的返回数据作为下一次的
请求参数继续进行请求，在promise出现之前，通常通过回调函数的嵌套来处理。
*/
//传统的回调嵌套场景
/*
$.ajax({
    url: 'urlone',
    data: paramsJsonOne,
    success: (resone) => {
        console.log(resone, 'resone');
        $.ajax({
            url: 'urltwo',
            data: resone.data,
            success: (restwo) => {
                console.log(restwo, 'restwo');
                $.ajax({
                    url: 'urlthree',
                    data: restwo.data,
                    success: (resthree) => {
                        console.log(resthree, 'resthree');
                    }
                });
            }
        });
    }
});
*/
/*ES6出现 Promise,优化了以往的这种以回调函数来处理异步操作的问题*/
let myPromise = new Promise((resolve, reject) => {
    resolve('myPromise');
    //reject('error');
});
console.log(myPromise);
myPromise.then(
    (res) => {
        console.log(res, 'success');
    },
    (res) => {
        console.log(res + 'err');
    }
);
console.log(666);
/*创建一个简单的Promise的例子，生成一个0-2之间的随机数，如果小于1，则等待一段时间后返回成功，否则返回失败*/
function test(resolve, reject) {
    let time = Math.random() * 2;
    setTimeout(function() {
        if (time > 1) {
            resolve('成功');
        } else {
            reject('失败');
        }
    }, time);
}
let p1 = new Promise(test);
p1.then(
    (res) => {
        console.log(res, '成功的回调');
    },
    (err) => {
        console.log(err, '失败的回调');
    }
);
/*
    这里用test来模拟一个异步操作，p1为一个Promise对象，来处理方法test，然后根据test的执行的状态进行相应的操作
*/
//以上可以进一步简写为
new Promise(test)
    .then((res) => {
        console.log(res, 'success');
    })
    .catch((err) => {
        console.log(err + 'error');
    });
//以上Promise实际上是如何进行异步执行的 如下
new Promise((resolve, reject) => {
    let time = Math.random() * 2;
    setTimeout(function() {
        if (time > 1) {
            resolve(time);
        } else {
            reject(time);
        }
    }, time);
})
    .then((res) => {
        console.log(res, '异步操作成功的返回值');
    })
    .catch((error) => {
        console.log(error, '异步操作失败的返回值');
    });

//使用Promise来模拟多个异步的情况，第一个执行成功才执行第二个
function asyncOne(num) {
    return new Promise((resolve, reject) => {
        if (num > 100) {
            resolve(num * num);
        } else {
            reject('asyncOne失败');
        }
    });
}
function asyncTwo(num) {
    return new Promise((resolve, reject) => {
        if (num > 10201) {
            resolve(num + num);
        } else {
            reject('asyncTwo失败');
        }
    });
}
let pp = new Promise((resolve, reject) => {
    let num = Math.random() * 2 + 49;
    if (num >= 50) {
        resolve(num * 2);
    } else {
        reject('初始num失败');
    }
});
pp
    .then(asyncOne)
    .then(asyncTwo)
    .then((res) => {
        console.log(res, '最后的结果=========================');
    })
    .catch((err) => {
        console.log(err, '失败-----------------------------');
    });

//用Promise来处理上面出现的嵌套的ajax问题
function ajaxPromise(method, url, data) {
    return new Promise((resolve, reject) => {
        let xhr = new XMLHttpRequest();
        xhr.open(method, url);
        xhr.send(data);
        xhr.onreadystatechange = function() {
            if (xhr.readyState == '4') {
                if (xhr.status == '2') {
                    resolve(xhr.responseText);
                } else {
                    reject(xhr.status);
                }
            }
        };
    });
}
ajaxPromise('get', 'oneurl', {})
    .then((res) => {
        ajaxPromise('get', 'twourl', res);
    })
    .then((res) => {
        console.log(res);
    })
    .catch((err) => {
        console.log(err);
    });
最后编辑于 ：
©著作权归作者所有,转载或内容合作请联系作者
  • 人面猴
    序言：七十年代末，一起剥皮案震惊了整个滨河市，随后出现的几起案子，更是在滨河造成了极大的恐慌，老刑警刘岩，带你破解...
    沈念sama阅读 212,185评论 6赞 493
  • 死咒
    序言：滨河连续发生了三起死亡事件，死亡现场离奇诡异，居然都是意外死亡，警方通过查阅死者的电脑和手机，发现死者居然都...
    沈念sama阅读 90,445评论 3赞 385
  • 救了他两次的神仙让他今天三更去死
    文/潘晓璐 我一进店门，熙熙楼的掌柜王于贵愁眉苦脸地迎上来，“玉大人，你说我怎么就摊上这事。” “怎么了？”我有些...
    开封第一讲书人阅读 157,684评论 0赞 348
  • 道士缉凶录：失踪的卖姜人
    文/不坏的土叔 我叫张陵，是天一观的道长。 经常有香客问我，道长，这世上最难降的妖魔是什么？ 我笑而不...
    开封第一讲书人阅读 56,564评论 1赞 284
  • 港岛之恋（遗憾婚礼）
    正文 为了忘掉前任，我火速办了婚礼，结果婚礼上，老公的妹妹穿的比我还像新娘。我一直安慰自己，他们只是感情好，可当我...
    茶点故事阅读 65,681评论 6赞 386
  • 恶毒庶女顶嫁案：这布局不是一般人想出来的
    文/花漫 我一把揭开白布。 她就那样静静地躺着，像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上，一...
    开封第一讲书人阅读 49,874评论 1赞 290
  • 城市分裂传说
    那天，我揣着相机与录音，去河边找鬼。 笑死，一个胖子当着我的面吹牛，可吹牛的内容都是我干的。 我是一名探鬼主播，决...
    沈念sama阅读 39,025评论 3赞 408
  • 双鸳鸯连环套：你想象不到人心有多黑
    文/苍兰香墨 我猛地睁开眼，长吁一口气：“原来是场噩梦啊……” “哼！你这毒妇竟也来了？” 一声冷哼从身侧响起，我...
    开封第一讲书人阅读 37,761评论 0赞 268
  • 万荣杀人案实录
    序言：老挝万荣一对情侣失踪，失踪者是张志新（化名）和其女友刘颖，没想到半个月后，有当地人在树林里发现了一具尸体，经...
    沈念sama阅读 44,217评论 1赞 303
  • 护林员之死
    正文 独居荒郊野岭守林人离奇死亡，尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 36,545评论 2赞 327
  • 白月光启示录
    正文 我和宋清朗相恋三年，在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 38,694评论 1赞 341
  • 活死人
    序言：一个原本活蹦乱跳的男人离奇死亡，死状恐怖，灵堂内的尸体忽然破棺而出，到底是诈尸还是另有隐情，我是刑警宁泽，带...
    沈念sama阅读 34,351评论 4赞 332
  • 日本核电站爆炸内幕
    正文 年R本政府宣布，位于F岛的核电站，受9级特大地震影响，放射性物质发生泄漏。R本人自食恶果不足惜，却给世界环境...
    茶点故事阅读 39,988评论 3赞 315
  • 男人毒药：我在死后第九天来索命
    文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹，春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,778评论 0赞 21
  • 一桩弑父案，背后竟有这般阴谋
    文/苍兰香墨 我抬头看了看天上的太阳。三九已至，却和暖如春，着一层夹袄步出监牢的瞬间，已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 32,007评论 1赞 266
  • 情欲美人皮
    我被黑心中介骗来泰国打工， 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留，地道东北人。 一个月前我还...
    沈念sama阅读 46,427评论 2赞 360
  • 代替公主和亲
    正文 我出身青楼，却偏偏与公主长得像，于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子，可洞房花烛夜当晚...
    茶点故事阅读 43,580评论 2赞 349