Promise異步操作是什么

這篇文章主要講解了“Promise異步操作是什么”，文中的講解內(nèi)容簡單清晰，易于學(xué)習(xí)與理解，下面請大家跟著小編的思路慢慢深入，一起來研究和學(xué)習(xí)“Promise異步操作是什么”吧！

什么是異步操作？

所謂異步操作，指的是可以跟當(dāng)前程序同時執(zhí)行的操作。舉例:

$("#page").scrolltop(0 ,1000);    
//使用1秒鐘時間將頁面滾動至頂部
$("#nav-float").hide (1000);    
//使用1秒鐘時間將懸浮導(dǎo)航欄隱藏

只要你稍微有點異步編程經(jīng)驗，就應(yīng)該知道，這兩個方法會同時完成。

它們的編寫順序并不會影響它們的執(zhí)行順序

//異步操作的特點就是，不會打斷當(dāng)前程序的執(zhí)行
//getUsers請求發(fā)出后，會立刻向下繼續(xù)執(zhí)行第二個請求
ajax("/getUsers",function(data) {
    //回掉函數(shù)會在請求成功后調(diào)用
})
//resumelist請求會立刻開始，無論getUsers是否結(jié)束
ajax("/resumelist", 
function(data) {
 
})
//至于哪一個ajax先返回結(jié)果并執(zhí)行回調(diào)函數(shù)，從代碼的編寫順序上是無法確定的。

我們可以給異步操作做一個簡單的定義

當(dāng)一個操作開始執(zhí)行后，主程序無需等待它的完成，可以繼續(xù)向下執(zhí)行。此時該操作可以跟主程序同時（并發(fā)）執(zhí)行。這種操作我們就稱之為異步操作。 通常當(dāng)操作完成時，會執(zhí)行一個我們事先設(shè)定好的回調(diào)函數(shù)來做后續(xù)的處理。

我們常見的異步操作例如：

· 添加定時器 setTimeout/setInterval

· 執(zhí)行某個動畫 animate

· 發(fā)起網(wǎng)絡(luò)請求 request

異步會帶來什么問題？

比如我們現(xiàn)在有兩個動畫，需要按順序來執(zhí)行，也就是第一個結(jié)束，第二個才能開始

這個時候可能有點麻煩，傳統(tǒng)的解決方法是通過回調(diào)：

animateA(function( ){
      animateB( );  

})      

這種方案顯然不太好，如果有很多異步操作需要順序執(zhí)行，就會產(chǎn)生所謂的“回調(diào)地獄”

ajaxA(function( ){
    ajaxB(function( ){
        ajaxC(function( ){
            ajaxD(function( ){
                ......   

            }); 

        }); 

    }); 

}) 

這種代碼不管是寫起來還是讀起來都比較煩人。

我們來看下經(jīng)過Promise改造后的樣子（偽代碼）

new Promise(ajaxA)
        
.then(ajaxB)
        
.then(ajaxC)
        
.then(ajaxD);  

Promise的使用及原理

要熟練Promise的的使用，你必須要先搞懂它解決問題的原理

貼一段實際的Promise代碼，你來感受一下先：

newPromise(resolve=>{
    ajax("/pay/post", 
data=>resolve() );
}).then(resolve=>{
    ajax("/order/fix", 
data=>{
        
//處理數(shù)據(jù)   
    })
})

上面的代碼使用了ES6的箭頭函數(shù),雖然大大簡化了代碼的寫法，

但對于初級程序猿來講極不友好

讀這種代碼簡直跟讀金剛經(jīng)差不多。

我們把代碼還原成ES5的樣子

new Promise(function(resolve){
    ajax("/pay/post",function(data){
        resolve();
    })
}).then(function(
){
    ajax("/order/fix",function(data){
 
    })
})

接下來，我們就按照費曼技巧來一步步的學(xué)習(xí)Promise是如何解決問題的

問題1, 作為一個異步函數(shù)，尤其像ajax這種網(wǎng)絡(luò)請求，連我自己都不能確定函數(shù)的執(zhí)行時間，Promise是怎么知道第一個函數(shù)什么時候結(jié)束的？ 然后再開始執(zhí)行下一個？

Promise并沒有那么神奇，它并不能知道我們的函數(shù)什么時候結(jié)束，
你注意到上面代碼中的第3行了嗎
在ajax請求結(jié)束執(zhí)行回調(diào)的時候，
我們調(diào)用了一個resolve()函數(shù)，這句代碼非常的關(guān)鍵.
這其實就是在通知Promise，當(dāng)前這個函數(shù)結(jié)束啦，
你可以開始執(zhí)行下一個。 這時Promise就會去執(zhí)行then里面的函數(shù)了。

問題2, 所以按照你的意思，如果我不調(diào)用這個方法，Promise就不知道這個函數(shù)有沒有結(jié)束，那么then里面的函數(shù)就不會執(zhí)行，也就是說我的第二個請求就永遠(yuǎn)不會發(fā)送了唄？

Bingo!! 恭喜你已經(jīng)學(xué)會了邏輯推理+搶答。

問題3, 可是這個resolve函數(shù)是從哪來的？ 需要我自己定義嗎？ 從代碼上看它好像是個參數(shù)，那又是誰傳入函數(shù)中的？

你得先弄明白Promise的基本結(jié)構(gòu)
new Promise(函數(shù)1).then(函數(shù)2);
 
我們把函數(shù)1和函數(shù)2都以參數(shù)形式傳給了一個Promise對象，
所以接下來函數(shù)1和2都會由這個Promise對象控制， 

簡單的說，函數(shù)1和函數(shù)2都會由Promise對象來執(zhí)行。 

所以在函數(shù)1執(zhí)行時，參數(shù)也當(dāng)然是由Promise對象傳遞進(jìn)去的。
 
new Promise(function(resolve){
  
//resolve是Promise對象在調(diào)用函數(shù)時傳入的參數(shù)
}).then(函數(shù)2);

問題4, Promise對象為啥要在執(zhí)行第1個任務(wù)的時候，把這個resolve函數(shù) 傳進(jìn)來，有什么目的？

你說呢？

廢屁，知道還用問你？

真是豬腦子，剛才不是已經(jīng)說了嗎？ 

Promise對象沒辦法知道我們的異步函數(shù)啥時候結(jié)束。
那我來問你， 如果你去車站接人，
可是你又不知道對方何時下車，你會咋辦？

把我電話號碼給他，快到了打我電話唄

沒錯，Promise解決問題也采用了同樣的思路。
它傳進(jìn)來的resolve函數(shù)， 就好像一個對講機，
當(dāng)我們的異步任務(wù)要結(jié)束時，通過對講機 來通知Promise對象。
也就是調(diào)用resolve方法
 
new Promise(function(resolve){
    ajax("/pay/post",function(data){
        
//當(dāng)請求結(jié)束時，通過調(diào)用resolve方法，通知Promise對象，該任務(wù)已完成
        resolve(); //收到通知后，Promise會立刻開始函數(shù)2的執(zhí)行
    })
}).then(函數(shù)2);

懂了，所以這個resolve函數(shù)，必須在異步任務(wù)的最后調(diào)用(例如ajax的回調(diào)方法)，相當(dāng)于告訴Promise對象，該任務(wù)結(jié)束，請開始下一個。

完全正確

問題5, 所以Promise也不過如此嘛，它沒有帶來什么功能上的革命性變化， 因為使用傳統(tǒng)的回調(diào)嵌套的方式，同樣可以完成效果。 說白了它就是編碼方式上的改進(jìn)？？

基本是這樣的，但Promise帶來的編碼方式以及異步編程思路上的進(jìn)步是非常巨大的。

問題6, 那如果我有ajaxA、ajaxB、ajaxC三個異步任務(wù)，想按照先A后B再C的順序執(zhí)行，像這樣寫行嗎？

new Promise(function(resolve){
    ajax("/AAA", 
function(){
        resolve(); //通知Promise該任務(wù)結(jié)束
    })    

}).then(function(resolve){
    ajax("/BBB", 
function(){
        resolve();//通知Promise該任務(wù)結(jié)束
    })
}).then(function(){
    ajax("/CCC", 
function(){ //.... })
})  

上面的這種寫法是不對的。 

Promise的中文含義是“承諾”，
則意味著，每一個Pormise對象，代表一次承諾
而每一次承諾，只能保證一個任務(wù)的順序，也就是說
new Promise(A).then(B); 這句話表示， 只能保證A和B的順序
 
一旦A執(zhí)行完，B開始后，這次承諾也就兌現(xiàn)了，Promise對象也就失效了
那如果還有C呢？ 我們就必須在函數(shù)B中，
重新創(chuàng)建新的Promise對象，來完成下一個承諾，具體的寫法就像這樣：
 
new Promise(函數(shù)1(resolve){
    ajaxA("xxxx", 
function(){
        resolve();//通知Promise該任務(wù)結(jié)束
    })    

}).then(函數(shù)2(){
    //在函數(shù)2開始運行后，第一次創(chuàng)建的Promise對象完成使命，已經(jīng)不能再繼續(xù)工作。
    //此時，我們創(chuàng)建并返回了新的Promise對象
    
return new Promise(function(resolve){
        ajaxB("xxxx", 
function(){
            resolve();//通知新的Promise對象該任務(wù)結(jié)束
        })    

    })
}).then(函數(shù)3(){ //盡管這里使用了鏈?zhǔn)秸{(diào)用，但負(fù)責(zé)執(zhí)行函數(shù)3的，已經(jīng)是新的Promise對象了
    // 如果，我們還有ajaxD需要順序調(diào)用
    // 那就必須在這里重新new Promise()對象了
    ajaxC("xxx", 
function(){     })
})   

問題7, 懂了，那Promise還有什么其它強大的功能嗎？

有啊，例如： 如果我有 A,B,C 三個異步任務(wù)，ABC同時開始執(zhí)行
當(dāng)A,B,C三個任務(wù)全部都結(jié)束時，執(zhí)任務(wù)D，
傳統(tǒng)方法實現(xiàn)起來就比較復(fù)雜，Promise就非常簡單，就像這樣：
 
Promise.all([new Promise(A), 
new Promise(B), 
new Promise(C)])
.then(function(
){
    D();
});

問題8, 那如果我希望A,B,C 其中任意一個任務(wù)完成，

就馬上開始任務(wù)D，該怎么做？

Promise.race([new Promise(A), 
new Promise(B), 
new Promise(C)])
.then(function(
){
   D();
});

感謝各位的閱讀，以上就是“Promise異步操作是什么”的內(nèi)容了，經(jīng)過本文的學(xué)習(xí)后，相信大家對Promise異步操作是什么這一問題有了更深刻的體會，具體使用情況還需要大家實踐驗證。這里是億速云，小編將為大家推送更多相關(guān)知識點的文章，歡迎關(guān)注！