麻豆黑色丝袜jk制服福利网站-麻豆精品传媒视频观看-麻豆精品传媒一二三区在线视频-麻豆精选传媒4区2021-在线视频99-在线视频a

千鋒教育-做有情懷、有良心、有品質的職業教育機構

手機站
千鋒教育

千鋒學習站 | 隨時隨地免費學

千鋒教育

掃一掃進入千鋒手機站

領取全套視頻
千鋒教育

關注千鋒學習站小程序
隨時隨地免費學習課程

當前位置:首頁  >  技術干貨  > 如何講清楚Promise?

如何講清楚Promise?

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

如何講清楚Promise

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

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

  什么是異步操作?

  所謂異步操作,指的是可以跟當前程序同時執行的操作。舉例:

  $("#page").scrolltop(0 ,1000); //使用1秒鐘時間將頁面滾動至頂部

  $("#nav-float").hide (1000); //使用1秒鐘時間將懸浮導航欄隱藏

  只要你稍微有點異步編程經驗,就應該知道,這兩個方法會同時完成。

  它們的編寫順序并不會影響它們的執行順序

  //異步操作的特點就是,不會打斷當前程序的執行

  //getUsers請求發出后,會立刻向下繼續執行第二個請求

  ajax("/getUsers",function(data) {

  //回掉函數會在請求成功后調用

  })

  //resumelist請求會立刻開始,無論getUsers是否結束

  ajax("/resumelist", function(data) {

  })

  //至于哪一個ajax先返回結果并執行回調函數,從代碼的編寫順序上是無法確定的。

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

  當一個操作開始執行后,主程序無需等待它的完成,可以繼續向下執行。此時該操作可以跟主程序同時(并發)執行。這種操作我們就稱之為異步操作。 通常當操作完成時,會執行一個我們事先設定好的回調函數來做后續的處理。

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

  · 添加定時器 setTimeout/setInterval

  · 執行某個動畫 animate

  · 發起網絡請求 request

  異步會帶來什么問題?

  比如我們現在有兩個動畫,需要按順序來執行,也就是第一個結束,第二個才能開始

  這個時候可能有點麻煩,傳統的解決方法是通過回調:

  animateA(function( ){

  animateB( );

  })

  這種方案顯然不太好,如果有很多異步操作需要順序執行,就會產生所謂的“回調地獄”

  ajaxA(function( ){

  ajaxB(function( ){

  ajaxC(function( ){

  ajaxD(function( ){

  ......

  });

  });

  });

  })

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

  我們來看下經過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=>{

  //處理數據

  })

  })

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

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

  讀這種代碼簡直跟讀金剛經差不多。

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

  new Promise(function(resolve){

  ajax("/pay/post",function(data){

  resolve();

  })

  }).then(function(){

  ajax("/order/fix",function(data){

  })

  })

  接下來,我們就按照費曼技巧來一步步的學習Promise是如何解決問題的

  問題1, 作為一個異步函數,尤其像ajax這種網絡請求,連我自己都不能確定函數的執行時間,Promise是怎么知道第一個函數什么時候結束的? 然后再開始執行下一個?

  Promise并沒有那么神奇,它并不能知道我們的函數什么時候結束,

  你注意到上面代碼中的第3行了嗎

  在ajax請求結束執行回調的時候,

  我們調用了一個resolve()函數,這句代碼非常的關鍵.

  這其實就是在通知Promise,當前這個函數結束啦,

  你可以開始執行下一個。 這時Promise就會去執行then里面的函數了。

  問題2, 所以按照你的意思,如果我不調用這個方法,Promise就不知道這個函數有沒有結束,那么then里面的函數就不會執行,也就是說我的第二個請求就永遠不會發送了唄?

  Bingo!! 恭喜你已經學會了邏輯推理+搶答。

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

  你得先弄明白Promise的基本結構

  new Promise(函數1).then(函數2);

  我們把函數1和函數2都以參數形式傳給了一個Promise對象,

  所以接下來函數1和2都會由這個Promise對象控制,

  簡單的說,函數1和函數2都會由Promise對象來執行。

  所以在函數1執行時,參數也當然是由Promise對象傳遞進去的。

  new Promise(function(resolve){

  //resolve是Promise對象在調用函數時傳入的參數

  }).then(函數2);

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

  Promise對象沒辦法知道我們的異步函數啥時候結束。

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

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

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

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

  它傳進來的resolve函數, 就好像一個對講機,

  當我們的異步任務要結束時,通過對講機 來通知Promise對象。

  也就是調用resolve方法

  new Promise(function(resolve){

  ajax("/pay/post",function(data){

  //當請求結束時,通過調用resolve方法,通知Promise對象,該任務已完成

  resolve(); //收到通知后,Promise會立刻開始函數2的執行

  })

  }).then(函數2);

  懂了,所以這個resolve函數,必須在異步任務的最后調用(例如ajax的回調方法),相當于告訴Promise對象,該任務結束,請開始下一個。

  完全正確

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

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

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

  new Promise(function(resolve){

  ajax("/AAA", function(){

  resolve(); //通知Promise該任務結束

  })

  }).then(function(resolve){

  ajax("/BBB", function(){

  resolve();//通知Promise該任務結束

  })

  }).then(function(){

  ajax("/CCC", function(){ //.... })

  })

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

  Promise的中文含義是“承諾”,

  則意味著,每一個Pormise對象,代表一次承諾

  而每一次承諾,只能保證一個任務的順序,也就是說

  new Promise(A).then(B); 這句話表示, 只能保證A和B的順序

  一旦A執行完,B開始后,這次承諾也就兌現了,Promise對象也就失效了

  那如果還有C呢? 我們就必須在函數B中,

  重新創建新的Promise對象,來完成下一個承諾,具體的寫法就像這樣:

  new Promise(函數1(resolve){

  ajaxA("xxxx", function(){

  resolve();//通知Promise該任務結束

  })

  }).then(函數2(){

  //在函數2開始運行后,第一次創建的Promise對象完成使命,已經不能再繼續工作。

  //此時,我們創建并返回了新的Promise對象

  return new Promise(function(resolve){

  ajaxB("xxxx", function(){

  resolve();//通知新的Promise對象該任務結束

  })

  })

  }).then(函數3(){ //盡管這里使用了鏈式調用,但負責執行函數3的,已經是新的Promise對象了

  // 如果,我們還有ajaxD需要順序調用

  // 那就必須在這里重新new Promise()對象了

  ajaxC("xxx", function(){ })

  })

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

  有啊,例如: 如果我有 A,B,C 三個異步任務,ABC同時開始執行

  當A,B,C三個任務全部都結束時,執任務D,

  傳統方法實現起來就比較復雜,Promise就非常簡單,就像這樣:

  Promise.all([new Promise(A), new Promise(B), new Promise(C)])

  .then(function(){

  D();

  });

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

  就馬上開始任務D,該怎么做?

  Promise.race([new Promise(A), new Promise(B), new Promise(C)])

  .then(function(){

  D();

  });

  恭喜你,在這么短的時間內學會了Promise

tags:
聲明:本站稿件版權均屬千鋒教育所有,未經許可不得擅自轉載。
10年以上業內強師集結,手把手帶你蛻變精英
請您保持通訊暢通,專屬學習老師24小時內將與您1V1溝通
免費領取
今日已有369人領取成功
劉同學 138****2860 剛剛成功領取
王同學 131****2015 剛剛成功領取
張同學 133****4652 剛剛成功領取
李同學 135****8607 剛剛成功領取
楊同學 132****5667 剛剛成功領取
岳同學 134****6652 剛剛成功領取
梁同學 157****2950 剛剛成功領取
劉同學 189****1015 剛剛成功領取
張同學 155****4678 剛剛成功領取
鄒同學 139****2907 剛剛成功領取
董同學 138****2867 剛剛成功領取
周同學 136****3602 剛剛成功領取
相關推薦HOT
主站蜘蛛池模板: 欧美国产日本高清不卡| 久久99国产精品久久99| 国产人妖系列在线精品| 无翼乌漫画全彩| 亚洲欧美国产另类视频| 欧美ol丝袜高跟秘书在线播放 | 侯龙涛何丽萍| 国产一级在线| 日本精品一区二区三区在线视频| 日本三级午夜理伦三级三| 欧美性受xxxx视频| 国产精品宾馆在线| 久久无码精品一区二区三区| 久久精品人人做人人爽| 国产三级精品三级在线专区1| 八木梓纱老师三天两夜| 日本三级电电影在线看| 欧美日韩色黄大片在线视频| 最近最好的中文字幕2019免费| 午夜免费理论片a级| 久久4k岛国高清一区二区| 国产成人精品怡红院在线观看| 九九九精品视频免费| 豪妇荡乳1一5白玉兰| 中文字幕在线播放| 全彩口工彩漫画无遮漫画| 啪啪电影院| 国内a级毛片免费···| 泰国午夜理伦三级| 精品久久久久久中文字幕| 成人久久精品一区二区三区| 麻豆传煤入口麻豆公司传媒| 日韩三级免费看| 美国式禁忌5太大了| 中文字幕在线免费看| 国产v亚洲v欧美v专区| 巨胸动漫美女被爆羞羞视频| 国产特黄一级片| 毛片aa| 免费高清理伦片在线观看| 中文字幕亚洲综合久久菠萝蜜|