异步Promise、async、await的介绍使用

1.前言

JS早期,异步函数通过嵌套多层回调函数来处理同步的业务逻辑,比如ajax,你总是在success的方法里去写执行成功之后的逻辑代码,同时为了保证同步性,你又不得不在success的方法里继续去写之后的逻辑。ES6对异步函数的处理提供了优雅的链式语法糖Promise,而ES7中对Promise采用更进一步的优化,提出async和await关键字,让异步代码能够使用同步代码的语法来达到最终的异步效果。

2.Promise链式艺术

对于异步函数,创建Promise对象后,如果异步函数执行成功,则会调用resolve方法将结果传递下去,反之如果异常,则会使用reject传递结果。

function ajaxPull(status) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                if (status === -1) {
                    reject(status);
                } else {
                    resolve(status);
                }
            }, 1);
        });

    }

    ajaxPull(2).then(function (res) {
        console.log('success');
    }).catch(function (res) {
        console.log('error');
    });

3.async/await同步代码风格的救星

当你需要同步的处理异步函数时,比如:前端获取access_token之后,需要拿着access_token去拿用户的信息,这时候promise的做法是多个链式的then()方法,async/await的出现,优雅的解决了使用同步代码风格去同步执行异步函数的问题。

    function ajaxToken(params) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                if (params === -1) {
                    reject(params);
                } else {
                    resolve(params);
                }
            }, 1000);
        });

    }

    function ajaxUserInfo(params) {
        return new Promise((resolve, reject) => {
            setTimeout(function () {
                if (params === -1) {
                    reject(params);
                } else {
                    resolve(params);
                }
            }, 500);
        });
    }
    async function getUserInfo() {
        ajaxToken(1).then(function(params){
            console.log(params);
            ajaxToken(2).then(function(params){
                console.log(params);
            });
        });
        console.log(await ajaxToken(1));
        console.log(await ajaxUserInfo(2));
    }
    getUserInfo();

上面展示了promise和async/await处理连续同步的业务逻辑的例子,await关键字必须在async函数里面声明,另外await并不会阻塞js代码的运行。

4.参考

网络博文

https://www.liaoxuefeng.com/wiki/1022910821149312/1023024413276544
如无特殊说明,文章均为本站原创,转载请注明出处。如发现有什么不对的地方,希望得到您的指点。

发表评论

电子邮件地址不会被公开。 必填项已用*标注