本文需要有一定的前端經驗。

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，我這裡只是為了舉個例子。)

例子二

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

現在我用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的介紹都很詳細。

覺得我寫的還行可以關注我的公眾號哦