久久精品国产亚洲高清|精品日韩中文乱码在线|亚洲va中文字幕无码久|伊人久久综合狼伊人久久|亚洲不卡av不卡一区二区|精品久久久久久久蜜臀AV|国产精品19久久久久久不卡|国产男女猛烈视频在线观看麻豆

    1. <style id="76ofp"></style>

      <style id="76ofp"></style>
      <rt id="76ofp"></rt>
      <form id="76ofp"><optgroup id="76ofp"></optgroup></form>
      1. 千鋒教育-做有情懷、有良心、有品質(zhì)的職業(yè)教育機構(gòu)

        手機站
        千鋒教育

        千鋒學(xué)習(xí)站 | 隨時隨地免費學(xué)

        千鋒教育

        掃一掃進入千鋒手機站

        領(lǐng)取全套視頻
        千鋒教育

        關(guān)注千鋒學(xué)習(xí)站小程序
        隨時隨地免費學(xué)習(xí)課程

        當(dāng)前位置:首頁  >  技術(shù)干貨  > 如何講清楚Promise?

        如何講清楚Promise?

        來源:千鋒教育
        發(fā)布人:qyf
        時間: 2022-10-10 16:06:43 1665389203

        如何講清楚Promise

          此文章主要講解核心思想和基本用法,想要了解更多細節(jié)全面的使用方式,請閱讀官方API

          這篇文章假定你具備最基本的異步編程知識,例如知道什么是回調(diào),知道什么是鏈式調(diào)用,同時具備最基本的單詞量,例如page、user、promise、then、resovle、reject、pay、fix、order等等,如果你對這些單詞非常陌生,那么你需要先花點時間補充一下你的英語。

          什么是異步操作?

          所謂異步操作,指的是可以跟當(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í)行,也就是說我的第二個請求就永遠不會發(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對象傳遞進去的。

          new Promise(function(resolve){

          //resolve是Promise對象在調(diào)用函數(shù)時傳入的參數(shù)

          }).then(函數(shù)2);

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

          Promise對象沒辦法知道我們的異步函數(shù)啥時候結(jié)束。

          那我來問你, 如果你去車站接人,

          可是你又不知道對方何時下車,你會咋辦?

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

          沒錯,Promise解決問題也采用了同樣的思路。

          它傳進來的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)嵌套的方式,同樣可以完成效果。 說白了它就是編碼方式上的改進??

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

          問題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(){ //盡管這里使用了鏈式調(diào)用,但負責(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();

          });

          恭喜你,在這么短的時間內(nèi)學(xué)會了Promise

        tags:
        聲明:本站稿件版權(quán)均屬千鋒教育所有,未經(jīng)許可不得擅自轉(zhuǎn)載。
        10年以上業(yè)內(nèi)強師集結(jié),手把手帶你蛻變精英
        請您保持通訊暢通,專屬學(xué)習(xí)老師24小時內(nèi)將與您1V1溝通
        免費領(lǐng)取
        今日已有369人領(lǐng)取成功
        劉同學(xué) 138****2860 剛剛成功領(lǐng)取
        王同學(xué) 131****2015 剛剛成功領(lǐng)取
        張同學(xué) 133****4652 剛剛成功領(lǐng)取
        李同學(xué) 135****8607 剛剛成功領(lǐng)取
        楊同學(xué) 132****5667 剛剛成功領(lǐng)取
        岳同學(xué) 134****6652 剛剛成功領(lǐng)取
        梁同學(xué) 157****2950 剛剛成功領(lǐng)取
        劉同學(xué) 189****1015 剛剛成功領(lǐng)取
        張同學(xué) 155****4678 剛剛成功領(lǐng)取
        鄒同學(xué) 139****2907 剛剛成功領(lǐng)取
        董同學(xué) 138****2867 剛剛成功領(lǐng)取
        周同學(xué) 136****3602 剛剛成功領(lǐng)取
        相關(guān)推薦HOT
        大數(shù)據(jù)測試工程師需要具備哪些技能?

        一、理解大數(shù)據(jù)概念大數(shù)據(jù)測試工程師需要理解大數(shù)據(jù)的基本概念和原理,如分布式存儲、MapReduce、實時計算等。他們還需要了解如何處理大規(guī)模的...詳情>>

        2023-10-14 23:43:03
        為什么SpringBoot的 jar 可以直接運行?

        一、JAR文件的結(jié)構(gòu)與執(zhí)行方式Spring Boot的JAR包是Java Archive的縮寫,它是一種壓縮文件格式,可以將Java項目的類文件、資源文件以及依賴庫等...詳情>>

        2023-10-14 23:01:49
        站群服務(wù)器是什么?

        站群服務(wù)器的含義與用途站群服務(wù)器主要用于支持站群,即由一組相互鏈接的網(wǎng)站組成的群體。這些網(wǎng)站通常由同一組織或個人擁有,并且經(jīng)常會互相鏈...詳情>>

        2023-10-14 22:46:12
        自編碼器是什么?

        一、自編碼器原理自編碼器的設(shè)計靈感源于神經(jīng)科學(xué)中關(guān)于感知系統(tǒng)的認知原理,它的核心思想是將輸入數(shù)據(jù)經(jīng)過編碼過程,形成一個隱藏層的特征表示...詳情>>

        2023-10-14 22:41:10
        什么是云網(wǎng)融合?

        一、云網(wǎng)融合的定義云網(wǎng)融合是指將云計算與網(wǎng)絡(luò)技術(shù)相結(jié)合,實現(xiàn)資源的共享、業(yè)務(wù)的協(xié)同,將網(wǎng)絡(luò)與云端服務(wù)深度融合,提供更靈活、高效、安全的...詳情>>

        2023-10-14 22:31:47
        双鸭山市| 海门市| 怀宁县| 阜城县| 醴陵市| 泗阳县| 达州市| 温宿县| 泾阳县| 梧州市| 钟祥市| 黔南| 和田县| 平陆县| 博白县| 齐齐哈尔市| 德惠市| 松阳县| 玛纳斯县| 辽中县| 南平市| 阿克苏市| 章丘市| 库尔勒市| 高密市| 马尔康县| 沙湾县| 武清区| 新民市| 谢通门县| 通海县| 新安县| 德化县| 高陵县| 南城县| 固镇县| 舟曲县| 额敏县| 太康县| 松阳县| 涞源县|