??非常完美，小編今天又認(rèn)識了一位新的伙伴，聽說十分的友好，所以小編今天特地帶它來見見大家 O(∩_∩)O 噢，它的名字叫“Promise”

一、簡單介紹

在介紹Promise之前，小編得向大家解析幾個(gè)名詞

1.同步和異步

① 同步
??當(dāng)用戶使用js和瀏覽器發(fā)生交互時(shí)，執(zhí)行到某一個(gè)模塊時(shí)系統(tǒng)發(fā)現(xiàn)需要向服務(wù)器提供網(wǎng)絡(luò)請求，這個(gè)時(shí)候，js操作就會被阻塞，然后瀏覽器向服務(wù)器發(fā)送網(wǎng)絡(luò)請求。
??我們都知道網(wǎng)絡(luò)請求的速度會比較慢，在此期間，不管用戶執(zhí)行任何操作，瀏覽器都不會去執(zhí)行，因?yàn)榇藭r(shí)的瀏覽器正在向服務(wù)器發(fā)送請求，沒有空去理會別的操作，這就是同步，簡單可以理解成瀏覽器的執(zhí)行是按照某中順序執(zhí)行的，只有等上一步完成之后才會繼續(xù)執(zhí)行下一步操作。
② 異步
??異步的含義和同步恰恰相反。當(dāng)用戶和瀏覽器發(fā)生交互，執(zhí)行到某一模塊的時(shí)候發(fā)現(xiàn)需要向服務(wù)器發(fā)送網(wǎng)絡(luò)請求時(shí)，這個(gè)時(shí)候，瀏覽器向服務(wù)器發(fā)送請求之后，仍然可以執(zhí)行別的操作。
??當(dāng)瀏覽器向服務(wù)器發(fā)送的請求得到回應(yīng)后，我們一般會聲明一個(gè)函數(shù)，將請求的結(jié)果放到該函數(shù)中，用戶執(zhí)行完某些操作后再回調(diào)該函數(shù)就可以得到向服務(wù)器發(fā)送網(wǎng)絡(luò)請求的數(shù)據(jù)。
??這就是異步，簡單的可以理解成一心二用：一邊向服務(wù)器發(fā)送請求，一邊執(zhí)行相關(guān)的操作，最后通過回調(diào)某個(gè)函數(shù)來得到向服務(wù)器發(fā)動請求的數(shù)據(jù)。如果只是一個(gè)簡單的網(wǎng)絡(luò)請求，這種方案沒有什么麻煩，但是當(dāng)網(wǎng)絡(luò)請求變得復(fù)雜的時(shí)候，就會出現(xiàn)回調(diào)地獄 Σ(⊙▽⊙"a

2.回調(diào)地獄

簡單的理解就是函數(shù)的迭代。我們舉一個(gè)簡單的例子。比如：

二、基本語法

1.基本定義

??Promise是異步編程的一種解決方案。它是一個(gè)類，可以通過new的方式創(chuàng)建一個(gè)對象。

2.使用場景

??正如它的基本定義一樣，一般用在異步請求的場合，并且會將請求數(shù)據(jù)的模塊放在一個(gè)地方，處理數(shù)據(jù)的模塊放在另外一個(gè)地方，就不會像之前回調(diào)函數(shù)一樣，將請求url數(shù)據(jù)和處理data1數(shù)據(jù)都放在同一個(gè)地方，小編在下面會給出具體的代碼，目前只需要明白兩點(diǎn)：
第一：promise用來處理異步編程
第二：promise將請求模塊和處理模塊分開
下面我們來看看promise如何使用

3.使用語法

① 使用new創(chuàng)建
??我們知道promise是一個(gè)類，所以我們可以通過new的方式來創(chuàng)建promise，并且創(chuàng)建的promise是一個(gè)函數(shù)
② 傳入?yún)?shù)
??當(dāng)我們通過new方式創(chuàng)建promise函數(shù)時(shí)，就會被要求傳入兩個(gè)參數(shù)：resolve和reject，而這兩個(gè)參數(shù)本身又是一個(gè)函數(shù)
③ then函數(shù)
??我們創(chuàng)建完promise之后，將有關(guān)的請求數(shù)據(jù)放在promise內(nèi)部，然后將處理數(shù)據(jù)放在then函數(shù)，并且當(dāng)用戶執(zhí)行了resolve函數(shù)就會調(diào)用then函數(shù)。更神奇的是，then本身又是一個(gè)函數(shù)。
有點(diǎn)抽象，我們看看下面的例子：

setTimeout({
    console.log('hello,vue');
},1000)

??以setTimeout為異步事件，經(jīng)過一秒中后就打印“hello，vue”語句，我們可以假定 setTimeout 函數(shù)是向服務(wù)器發(fā)送的請求，而console.log('hello,vue')是對服務(wù)器發(fā)送請求的處理，下面使用promise封裝過程如下：
第一：聲明promise，并將異步事件全部丟到promise函數(shù)中

new Promise((resolve,reject)=>{
    setTimeout({
        console.log('hello,vue');
    },1000)
})

??上述代碼中，創(chuàng)建了promise函數(shù)，兩個(gè)參數(shù)resolve和reject由于本身又是一個(gè)函數(shù)，所以在這里使用箭頭函數(shù)來聲明，然后將異步事件全部丟進(jìn)promise函數(shù)內(nèi)部中。
第二：封裝數(shù)據(jù)

new Promise((resolve,reject) =>{
    setTimeout(()=>{
        resolve()
    },1000)
}).then(()=>{
    console.log('hello,vue')
})

??上述代碼中，setTimeout函數(shù)看作請求，該請求是經(jīng)過1秒后執(zhí)行打印語句，將請求放在了promie內(nèi)部，然后打印語句看作是對請求的處理，放在了then函數(shù)中。執(zhí)行順序如下：首先進(jìn)入到promise內(nèi)部，經(jīng)過一秒中后執(zhí)行resolve函數(shù)，該函數(shù)就會回調(diào)then函數(shù)，執(zhí)行then函數(shù)內(nèi)部的打印語句。其效果如下：

<script>
    new Promise((resolve,reject) =>{
        setTimeout(()=>{
            reject()
        },1000)
    }).catch(()=>{
        console.log('error')
    })
</script>

??因此，針對上述的內(nèi)容，我們知道，Promise會將不同的處理交給不同的函數(shù)去執(zhí)行，如果網(wǎng)絡(luò)請求成功，就執(zhí)行resolve函數(shù)，然后回調(diào)then函數(shù)；如果網(wǎng)絡(luò)請求失敗，就會執(zhí)行reject函數(shù)，然后回調(diào)catch函數(shù)。所以代碼的邏輯就變得十分的清晰明了。
??如果現(xiàn)在體會不到promise的好處，可以往下看看彩蛋，保證震驚到你(????)因?yàn)椴患?xì)心的人可能看不懂
??好了，今天小編就到這里啦，謝謝大家伙，后面有彩蛋噢，還等什么，看彩蛋來挑戰(zhàn)自己吧。

<script>
    new Promise((resolve,reject) =>{
        setTimeout(()=>{
            resolve()
        },1000)
    }).then(()=>{
        console.log('hello,vue')
        return new Promise((resolve,reject) =>{
                setTimeout(()=>{
                    resolve()
                },1000)
            })
        }).then(() =>{
            console.log('hello,java')
            return new Promise((resolve,reject) =>{
                setTimeout(()=>{
                        resolve()
                    },1000)
                })
            }).then(() =>{
                console.log('hello,JavaScript')
            })
</script>

這個(gè)就是用promise改變過后的回調(diào)地獄，你看懂了嘛o(￣︶￣)o