异步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

如无特殊说明，文章均为本站原创，转载请注明出处。如发现有什么不对的地方，希望得到您的指点。