聊一聊Promise和Async

本文需要有一定的前端经验。

Promise和Async属于ES6的知识，主要为了解决各种复杂的异步请求。

何为复杂呢？让我举个例子：

例子一：

小徐给小明和小红布置了网上作业，他想要收到小明和小红都写完作业的消息一起审批。

下面我用ajax请求接口代表做作业的过程，接口回调作为收到消息。作业接口如下：

/pa/work?name=XXX

机智的我开始写代码了:

方案一：

$.ajax({
    url: '/pa/work?name=小明',
    type: 'GET',
    success: function ( res ) {
        $.ajax({
            url: '/pa/work?name=小红',
            type: 'GET',
            success: function ( res ) {
                console.log('我收到小明和小红的作业都提交的消息了，我要开始审批了');
            }
        })      
    }
})

上面的写法跟实际的需求是不符的，我需要的是同时通知小明和小红，让他们同事做作业，结果写成了先小明写完作业了，再让小红写作业。于是我绞尽脑汁想到了下面的办法

方案二:

var xmMessage = false;
var xhMessage = false;

$.ajax({
    url: '/pa/work?name=小明',
    type: 'GET',
    success: function ( res ) {
        xmMessage = true;
    }
})

$.ajax({
    url: '/pa/work?name=小红',
    type: 'GET',
    success: function ( res ) {
        xhMessage = true;
    }
})

var clear = setInvervar( function () {
    if ( xmMessage == true && xhMessage == true ) {
        console.log('我收到小明和小红的作业都提交的消息了，我要开始审批了');
        claerInvervar( clear );
    }
}, 500)

上面的代码就实现了我的需求，同时通知小明小红让他们一同写作业，并且收到他俩的消息第一时间进行审批。 但是需要我自己定义俩个变量，用定时器来监控小明和小红的返回信息。是很麻烦的。

那如何优雅的实现这个需求呢？这就需要用到Promise来了:

首先我需要将上面的ajax封装成一个Promise:

function axios (name) {
    return new Promise( function ( resolve, reject ) {
        $.ajax({
            url: '/pa/work?name=' + name,
            type: 'GET',
            success: function ( res ) {
                resolve(res);
            },
            error: function (err){
                reject(err);
            }
        })   
    })
}

现在我们来实现功能:

Promise.all( [axios('小明'), axios('小红')]).then ( function (value) {
    console.log('我收到小明和小红的作业都提交的消息，我要开始审批了');
})

怎么样干净简洁，而且扩展方便。及时你后面再有小龟，小王…等等我都从容处理.(axios是一个网上封装好的一个用插件能够运行于浏览器和node，我这里只是为了举个例子。)

想要更多的了解axios请单击下方链接:
https://www.kancloud.cn/yunye/axios/234845

例子二

我校要举行三百米接力了，第一棒小徐，第二棒小红，第三棒小王。

现在我用ajax请求接口代表跑步的过程，用回调代表传棒成功。跑步接口如下：

/pa/run?name=XXX

机智的我开始写代码了:

$.ajax({
    url: '/pa/run?name=小徐',
    type: 'GET',
    success: function ( res ) {
        console.log('小徐将棒子传递给小红');
        $.ajax({
            url: '/pa/run?name=小红',
            type: 'GET',
            success: function ( res ) {
                console.log('小红将棒子传递给小王');
                $.ajax({
                    url: '/pa/run?name=小王',
                    type: 'GET',
                    success: function ( res ) {
                        console.log('小王完成了比赛获得第一名!');
                    }
                })
            }
        })
    }
})

这一堆代码几乎是没有什么逻辑，但是我估计读一次就会被恶心一次。

那如何优雅的实现这个需求呢？这就需要用到Async了:

首先我需要将上面的ajax封装成一个Promise:

function axios (name) {
    return new Promise( function ( resolve, reject ) {
        $.ajax({
            url: '/pa/run?name=' + name,
            type: 'GET',
            success: function ( res ) {
                resolve(res);
            },
            error: function (err){
                reject(err);
            }
        })   
    })
}

现在我们来实现功能:

async function () {
    var xx = await axios('小徐');
    console.log('小徐将棒子传递给小红');
    var xh = await axios('小红');
    console.log('小红将棒子传递给小王');
    var xw = await axios('小红');
    console.log('小王完成了比赛获得第一名!');
}

使用async就能够轻易的写出来按顺序执行的异步代码，代码可读性非常高。

Promise和Async的功能远远没有上面那么一丢丢，能干的事情还有很多。之所以列举上面的这俩个例子是因为他们在前端出现的场景也是很频繁的，后端（node）就更不应说了。

看了我的文章对他们感兴趣了可以看一下阮一峰老师写的开源的es6的书，上面对Promise和Async的介绍都很详细。

http://es6.ruanyifeng.com/

觉得我写的还行可以关注我的公众号哦