聊一聊Promise和Async_聊一下promise-CSDN博客

本文链接：https://blog.csdn.net/m0_37479946/article/details/81813792

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

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('小王完成了比赛获得第一名!');
}