成人免费xxxxx在线视频软件_久久精品久久久_亚洲国产精品久久久_天天色天天色_亚洲人成一区_欧美一级欧美三级在线观看

【前端】從小白視角上手Promise、Async/Await和手撕代碼

作者：一川
開發(fā) 前端
對于前端新手而言，Promise是一件比較困擾學(xué)習(xí)的事情，需要理解的細(xì)節(jié)比較多。對于前端面試而言，Promise是面試官最常問的問題，特別是手撕源碼。眾所周知，JavaScript語言執(zhí)行環(huán)境是“單線程”。

[[400035]]

寫在前面

對于前端新手而言，Promise是一件比較困擾學(xué)習(xí)的事情，需要理解的細(xì)節(jié)比較多。對于前端面試而言，Promise是面試官最常問的問題，特別是手撕源碼。眾所周知，JavaScript語言執(zhí)行環(huán)境是“單線程”。

單線程，就是指一次只能完成一件任務(wù)，如果有多個任務(wù)就必須排隊等候，前面一個任務(wù)完成，再執(zhí)行后面一個任務(wù)。這種“單線程”模式執(zhí)行效率較低，任務(wù)耗時長。

為了解決這個問題，就有了異步模式，也叫異步編程。

一、異步編程

所謂"異步"，簡單說就是一個任務(wù)分成兩段，先執(zhí)行第一段，然后轉(zhuǎn)而執(zhí)行其他任務(wù)，當(dāng)?shù)谝欢斡辛藞?zhí)行結(jié)果之后，再回過頭執(zhí)行第二段。

JavaScript采用異步編程原因有兩點：

  • JavaScript是單線程。
  • 為了提高CPU的利用率。

在提高CPU的利用率的同時也提高了開發(fā)難度，尤其是在代碼的可讀性上。

那么異步存在的場景有：

  • fs 文件操作
  1. require("fs").readFile("./index.html",(err,data)=>{}) 
  • 數(shù)據(jù)庫操作
  • AJAX
  1. $.get("/user",(data)=>{}) 

定時器

  1. setTimeout(()=>{},2000) 

二、Promise是什么

Promise理解

(1) 抽象表達(dá)

  • Promise 是一門新的技術(shù)(es6規(guī)范)
  • Promise是js中進(jìn)行異步編程的新解決方案

(2) 具體表達(dá)

  • 從語法上說：Promise是一個構(gòu)造函數(shù)
  • 從功能上說：Promise對象是用來封裝一個異步操作并可以獲取其成功/失敗的結(jié)果值

為什么要使用Promise

(1) 指定回調(diào)函數(shù)的方式更加靈活

  • promise：啟動異步任務(wù)=>返回promise對象=>給promise對象綁定回調(diào)函數(shù)

(2) 支持鏈?zhǔn)秸{(diào)用方式，可以解決回調(diào)地獄問題

  • 什么是回調(diào)地獄?

回調(diào)地獄就是回調(diào)函數(shù)嵌套使用，外部回調(diào)函數(shù)異步執(zhí)行的結(jié)果是嵌套的回調(diào)執(zhí)行的條件

  • 回調(diào)地獄的缺點

不便于閱讀

不便于異常處理

解決方法

Promise的狀態(tài)

  1. Promise必須擁有三種狀態(tài)：pending、rejected、resolved
  2. 如果Promise的狀態(tài)是pending時，它可以變成成功fulfilled或失敗rejected
  3. 如果promise是成功狀態(tài)，則它不能轉(zhuǎn)換為任何狀態(tài)，而且需要一個成功的值，并且這個值不能改變
  4. 如果promise是失敗狀態(tài)，則它不能轉(zhuǎn)換成任何狀態(tài)，而且需要一個失敗的原因，并且這個值不能改變

Promise的狀態(tài)改變

pending未決定的，指的是實例狀態(tài)內(nèi)置的屬性

(1)pending變?yōu)閞esolved/fullfilled

(2)pending變?yōu)閞ejected

說明：Promise的狀態(tài)改變只有兩種，且一個Promise對象只能改變一次，無論失敗還是成功都會得到一個結(jié)果輸出，成功的結(jié)果一般是value，失敗的結(jié)果一般是reason。

無論狀態(tài)是成功還是失敗，返回的都是promise。

Promise的值

實例對象中的另一個屬性 [PromiseResult]保存著異步任務(wù) [成功/失敗] 的結(jié)果resolve/reject。

Promise的api

手寫Promide中的api:

(1)promise構(gòu)造函數(shù) Promise(executor){}

  • executor：執(zhí)行器(resolve,reject)=>{}
  • resolve：內(nèi)部定義成功時我們需要調(diào)用的函數(shù)value=>{}
  • reject：內(nèi)部定義失敗時我們調(diào)用的函數(shù) reason=>{}說明：executor會在Promise內(nèi)部立即同步調(diào)用，異步操作在執(zhí)行器中執(zhí)行

(2)Promise.prototype.then方法：(onResolved,rejected)=>{}

  • onResolved函數(shù)：成功的回調(diào)函數(shù)value=>{}
  • rejected函數(shù)：失敗的回調(diào)函數(shù)reason=>{}

說明：指定用于得到成功value的成功回調(diào)和用于得到失敗reason的失敗回調(diào)，返回一個新的promise對象

(3)Promise.prototype.catch方法：(onRejected)=>{}

前三條是本文章中將要實現(xiàn)的手寫代碼，當(dāng)然Promise還有其它的api接口。

(1)Promise.prototype.finally()方法

finally()方法用于指定不管 Promise 對象最后狀態(tài)如何，都會執(zhí)行的操作。不管promise最后的狀態(tài)，在執(zhí)行完then或catch指定的回調(diào)函數(shù)以后，都會執(zhí)行finally方法指定的回調(diào)函數(shù)。

  1. promise 
  2. .then(result => {···}) 
  3. .catch(error => {···}) 
  4. .finally(() => {···}); 

(2)Promise.all()方法

Promise.all()方法用于將多個 Promise 實例，包裝成一個新的 Promise 實例。

  1. const p = Promise.all([p1, p2, p3]); 

p的狀態(tài)由p1、p2、p3決定，分成兩種情況。

  • 只有p1、p2、p3的狀態(tài)都變成fulfilled，p的狀態(tài)才會變成fulfilled，此時p1、p2、p3的返回值組成一個數(shù)組，傳遞給p的回調(diào)函數(shù)。
  • 只要p1、p2、p3之中有一個被rejected，p的狀態(tài)就變成rejected，此時第一個被reject的實例的返回值，會傳遞給p的回調(diào)函數(shù)。

(3)Promise.race()方法

Promise.race()方法同樣是將多個 Promise 實例，包裝成一個新的 Promise 實例。

  1. const p = Promise.race([p1, p2, p3]); 

只要p1、p2、p3之中有一個實例率先改變狀態(tài)，p的狀態(tài)就跟著改變。那個率先改變的 Promise 實例的返回值，就傳遞給p的回調(diào)函數(shù)。

(4)Promise.allSettled()方法

Promise.allSettled()方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例。只有等到所有這些參數(shù)實例都返回結(jié)果，不管是fulfilled還是rejected，包裝實例才會結(jié)束。

  1. const promises = [ 
  2.   fetch('/api-1'), 
  3.   fetch('/api-2'), 
  4.   fetch('/api-3'), 
  5. ]; 
  6.  
  7. await Promise.allSettled(promises); 
  8. removeLoadingIndicator(); 

該方法返回的新的 Promise 實例，一旦結(jié)束，狀態(tài)總是fulfilled，不會變成rejected。狀態(tài)變成fulfilled后，Promise 的監(jiān)聽函數(shù)接收到的參數(shù)是一個數(shù)組，每個成員對應(yīng)一個傳入Promise.allSettled()的 Promise 實例。

(5)Promise.any()方法

ES2021 引入了Promise.any()方法。該方法接受一組 Promise 實例作為參數(shù)，包裝成一個新的 Promise 實例返回。只要參數(shù)實例有一個變成fulfilled狀態(tài)，包裝實例就會變成fulfilled狀態(tài);如果所有參數(shù)實例都變成rejected狀態(tài)，包裝實例就會變成rejected狀態(tài)。

(6)Promise.reject(reason)方法

Promise.reject(reason)方法也會返回一個新的 Promise 實例，該實例的狀態(tài)為rejected。

  1. const p = Promise.reject('出錯了'); 
  2. // 等同于 
  3. const p = new Promise((resolve, reject) => reject('出錯了')) 
  4.  
  5. p.then(null, function (s) { 
  6.   console.log(s) 
  7. }); 
  8. // 出錯了 

(7)Promise.resolve()方法 有時需要將現(xiàn)有對象轉(zhuǎn)為 Promise 對象，Promise.resolve()方法就起到這個作用。

  1. Promise.resolve('foo') 
  2. // 等價于 
  3. new Promise(resolve => resolve('foo')) 

改變promsie狀態(tài)和指定回調(diào)函數(shù)誰先誰后?

(1)都有可能，正常情況下是先指定回調(diào)函數(shù)再改變狀態(tài)，但也可以先改變狀態(tài)再指定回調(diào)函數(shù)。

(2)如何改變狀態(tài)再指定回調(diào)?

  • 在執(zhí)行器中直接調(diào)用resolve/reject
  • 延遲更長時間才進(jìn)行調(diào)用then

(3)什么時候才能得到數(shù)據(jù)?

  • 如果先指定的回調(diào)，那當(dāng)狀態(tài)發(fā)生改變，回調(diào)函數(shù)就會調(diào)用，得到數(shù)據(jù)
  • 如果先改變的狀態(tài)，那當(dāng)指定回調(diào)時，回調(diào)函數(shù)就會進(jìn)行調(diào)用，得到數(shù)據(jù)

示例：

  1. let p = new Promise((resolve,reject)=>{ 
  2.     resolve("成功了"); 
  3.     reject("失敗了"); 
  4. }); 
  5.  
  6. p.then((value)=>{ 
  7.     console.log(value); 
  8. },(reason)=>{ 
  9.     console.log(reason); 
  10. }) 

Promise規(guī)范

  1. "Promise"是一個具有then方法的對象或函數(shù)，其行為符合此規(guī)范。也就是說Promise是一個對象或函數(shù)
  2. "thenable"是一個具有then方法的對象或函數(shù)，也就是這個對象必須擁有then方法
  3. "value"是任何合法的js值(包括undefined或promise)
  4. promise中的異常需要使用throw語句進(jìn)行拋出
  5. promise失敗的時候需要給出失敗的原因

then方法說明

  1. 一個promise必須要有一個then方法，而且可以訪問promise最終的結(jié)果，成功或者失敗的值
  2. then方法需要接收兩個參數(shù)，onfulfilled和onrejected這兩個參數(shù)是可選參數(shù)
  3. promise無論then方法是否執(zhí)行完畢，只要promise狀態(tài)變了，then中綁定的函數(shù)就會執(zhí)行。

鏈?zhǔn)秸{(diào)用

Promise最大的優(yōu)點就是可以進(jìn)行鏈?zhǔn)秸{(diào)用,如果一個then方法返回一個普通值，這個值就會傳遞給下一次的then中，作為成功的結(jié)果。

如果返回的是一個promise，則會把promise的執(zhí)行結(jié)果傳遞下去取決于這個promise的成功或失敗。

如果返回的是一個報錯，就會執(zhí)行到下一個then的失敗函數(shù)中。

三、手寫Promise代碼

面試經(jīng)常考的手寫Promise代碼，可以仔細(xì)理解一下。

  1. // 手寫Promise 
  2. // 首先定義一個構(gòu)造函數(shù),在創(chuàng)建Promise對象的時候會傳遞一個函數(shù)executor， 
  3. // 這個函數(shù)會立即被調(diào)用，所以我們在Promise內(nèi)部立即執(zhí)行這個函數(shù)。 
  4. function Promise(executor){ 
  5.     // 用于保存promise的狀態(tài) 
  6.     this.status = "pending"; 
  7.     this.value;//初始值 
  8.     this.reason;//初始原因 
  9.     this.onResolvedCallbacks = [];//存放所有成功的回調(diào)函數(shù) 
  10.     this.onRejectedCallbacks = [];//存放所有失敗的回調(diào)函數(shù) 
  11.     //定義resolve函數(shù) 
  12.     const resolve = (value)=>{ 
  13.         if(this.status === "pending"){ 
  14.             this.status = "resolved"; 
  15.             this.value = value; 
  16.             this.onResolvedCallbacks.forEach(function(fn){ 
  17.                 fn() 
  18.             }) 
  19.         } 
  20.     } 
  21.     //定義reject函數(shù) 
  22.     const reject = (reason)=>{ 
  23.         if(this.status === "pending"){ 
  24.             this.status = "rejected"; 
  25.             this.reason = reason; 
  26.             this.onRejectedCallbacks.forEach(function(fn){ 
  27.                 fn() 
  28.             }) 
  29.         } 
  30.     } 
  31.     executor(resolve,reject); 
  32. } 
  33.  
  34. Promise.prototype.then = function(onFulfilled,onRejected){ 
  35. /* 
  36. 每次then都會返回一個新的promise 
  37.  
  38. 我們需要拿到當(dāng)前then方法執(zhí)行成功或失敗的結(jié)果， 
  39. 前一個then方法的返回值會傳遞給下一個then方法， 
  40. 所以這里我們要關(guān)心onFulfilled(self.value) 
  41. 和 onRejected(self.reason)的返回值，我們這里定義一個x來接收一下。 
  42.  
  43. 如果失敗拋錯需要執(zhí)行reject方法，這里使用try...catch捕獲一下錯誤。 
  44. 也就是判斷then函數(shù)的執(zhí)行結(jié)果和返回的promise的關(guān)系。 
  45. */ 
  46.     return new Promise((resolve,reject)=>{ 
  47.         //當(dāng)Promise狀態(tài)為resolved時 
  48.         if(this.status === "resolved"){ 
  49.             try{ 
  50.                 resolve(onFulfilled(this.value)) 
  51.             }catch(error){ 
  52.                 reject(error) 
  53.             } 
  54.         } 
  55.         //當(dāng)Promise狀態(tài)為rejected時 
  56.         if(this.status === "rejected"){ 
  57.             try { 
  58.                 resolve(onRejected(this.reason)) 
  59.             } catch (error) { 
  60.                 reject(error) 
  61.             } 
  62.         } 
  63.         //當(dāng)Promise狀態(tài)為pendding 
  64.         if(this.status === "pending"){ 
  65.             this.onResolvedCallbacks.push(function(){ 
  66.                 try{ 
  67.                     resolve(onFulfilled(this.value)) 
  68.                 }catch(error){ 
  69.                     reject(error) 
  70.                 } 
  71.             }); 
  72.             this.onRejectedCallbacks.push(function(){ 
  73.                 try { 
  74.                     resolve(onRejected(this.reason)) 
  75.                 } catch (error) { 
  76.                     reject(error) 
  77.                 } 
  78.             }); 
  79.         } 
  80.     }) 
  81. } 

升級版Promise:

  1. class Promise{ 
  2.     /*首先定義一個構(gòu)造函數(shù),在創(chuàng)建Promise對象的時候會傳遞一個函數(shù)executor， 
  3.     這個函數(shù)會立即被調(diào)用，所以我們在Promise內(nèi)部立即執(zhí)行這個函數(shù)。*/ 
  4.     constructor(executor){ 
  5.         this.executor = executor(this.resolve,this.reject); 
  6.         
  7.  
  8.         this.onResolvedCallbacks = [];//存放所有成功的回調(diào)函數(shù) 
  9.         this.onRejectedCallbakcs = [];//存放所有失敗的回調(diào)函數(shù) 
  10.     } 
  11.      
  12.      // 用于存儲相應(yīng)的狀態(tài) 
  13.     status = "pending"; 
  14.     // 初始值 
  15.     value; 
  16.     // 初始原因 
  17.     reason; 
  18.      
  19.     // executor在執(zhí)行的時候會傳入兩個方法，一個是resolve， 
  20.     // 一個reject，所以我們要創(chuàng)建這兩個函數(shù)，而且需要把這兩個函數(shù)傳遞給executor。 
  21.     // 當(dāng)我們成功或者失敗的時候，執(zhí)行onFulfilled和onRejected的函數(shù)， 
  22.     // 也就是在resolve函數(shù)中和reject函數(shù)中分別循環(huán)執(zhí)行對應(yīng)的數(shù)組中的函數(shù)。 
  23.     // 定義成功事件 
  24.     resolve(value){ 
  25.         if(status === "pending"){ 
  26.             status = "resolved"; 
  27.             value = value; 
  28.             this.onResolvedCallbacks.forEach(fn=>{fn()}) 
  29.         } 
  30.     } 
  31.     // 定義失敗事件 
  32.     reject(){ 
  33.         if(this.status === "pending"){ 
  34.             this.status = "rejected"; 
  35.             this.reason = reason; 
  36.             this.onRejectedCallbakcs.forEach(fn=>{fn()}); 
  37.         } 
  38.     } 
  39.     // 這個時候當(dāng)我們異步執(zhí)行resolve方法時候，then中綁定的函數(shù)就會執(zhí)行，并且綁定多個then的時候，多個方法都會執(zhí)行。 
  40.  
  41.  
  42.     // Promise的對象存在一個then方法，這個then方法里面會有兩個參數(shù)，一個是成功的回調(diào)onFulfilled， 
  43.     // 另一個是失敗的回調(diào)onRejected，只要我們調(diào)用了resolve就會執(zhí)行onFulfilled，調(diào)用了reject就會執(zhí)行onRejected。 
  44.     // 為了保證this不錯亂，我們定義一個self存儲this。當(dāng)我們調(diào)用了resolve或reject的時候，需要讓狀態(tài)發(fā)生改變. 
  45.     // 需要注意的是Promise的狀態(tài)只可改變一次，所以我們要判斷，只有當(dāng)狀態(tài)未發(fā)生改變時，才去改變狀態(tài)。 
  46.     then(onFulfilled,onRejected){ 
  47.         // 判斷當(dāng)前狀態(tài)進(jìn)行回調(diào) 
  48.         if(this.status === "resolved"){ 
  49.             onFulfilled(self.value) 
  50.         }; 
  51.         if(this.status === "rejected"){ 
  52.             onRejected(self.reason) 
  53.         } 
  54.         // 當(dāng)狀態(tài)還處于pending狀態(tài)時 
  55.         // 因為onFulfilled和onRejected在執(zhí)行的時候需要傳入對應(yīng)的value值，所我們這里用一個函數(shù)包裹起來，將對應(yīng)的值也傳入進(jìn)去。 
  56.         if(this.status === "pending"){ 
  57.             this.onResolvedCallbacks.push(()=>{onFulfilled(this.value)}); 
  58.             this.onResolvedCallbacks.push(()=>{onRejected(this.reason)}); 
  59.         } 
  60.     } 
  61.  
  62. } 

使用自己手寫的Promise源碼：

  1. let p = new Promise((resolve,reject)=>{ 
  2.     setTimeout(()=>{ 
  3.         resolve("成功了") 
  4.     },1000) 
  5. }); 
  6.  
  7. p.then(function(value){ 
  8.     return 123; 
  9. }).then(value=>{ 
  10.     console.log("收到了成功的消息:",value); 
  11. }).catch(error=>{ 
  12.     console.log(error); 
  13. }); 
  14.  
  15. p.then(value=>{ 
  16.     console.log(value); 
  17. }) 

四、Async/Await

async用來表示函數(shù)是異步的，定義的async函數(shù)返回值是一個promise對象，可以使用then方法添加回調(diào)函數(shù)。

await 可以理解為是 async wait 的簡寫。await 必須出現(xiàn)在 async 函數(shù)內(nèi)部，不能單獨使用。函數(shù)中只要使用await，則當(dāng)前函數(shù)必須使用async修飾。

所以回調(diào)函數(shù)的終結(jié)者就是async/await。

async命令

  • async函數(shù)返回的是一個promise對象。
  • async函數(shù)內(nèi)部return語句返回的值，會成為then方法回調(diào)的參數(shù)。
  • async函數(shù)內(nèi)部拋出錯誤，會導(dǎo)致返回的 Promise 對象變?yōu)閞eject狀態(tài)。
  • 拋出的錯誤對象會被catch方法回調(diào)函數(shù)接收到。

async函數(shù)返回的 Promise 對象，必須等到內(nèi)部所有await命令后面的 Promise 對象執(zhí)行完，才會發(fā)生狀態(tài)改變，除非遇到return語句或者拋出錯誤。

也就是說，只有async函數(shù)內(nèi)部的異步操作執(zhí)行完，才會執(zhí)行then方法指定的回調(diào)函數(shù)。

  1. async function fun(){ 
  2.     // return "hello wenbo"; 
  3.     throw new Error("ERROR"); 
  4. } 
  5. fun().then(v => console.log(v),reason=>console.log(reason));//Error: ERROR``` 

await命令

正常情況下，await命令后面是一個 Promise 對象，返回該對象的結(jié)果。如果不是 Promise 對象，就直接返回對應(yīng)的值。

  1. async function fun(){ 
  2.     return await "zhaoshun"; 
  3.     // 等價于 return "zhaoshun"; 
  4. } 
  5. fun().then(value=>console.log(value));//zhaoshun 

另一種情況是，await命令后面是一個thenable對象(即定義了then方法的對象)，那么await會將其等同于 Promise 對象。

  1. class Sleep{ 
  2.     constructor(timeout){ 
  3.         this.timeout = timeout; 
  4.     } 
  5.     then(resolve,reject){ 
  6.         const startTime = Date.now(); 
  7.         setTimeout(()=>resolve(Date.now() - startTime),this.timeout); 
  8.          
  9.  
  10.     } 
  11.  
  12. } 
  13.  
  14. ( 
  15.     async ()=>{ 
  16.         const sleepTime = await new Sleep(1000); 
  17.         console.log(sleepTime);//1012 
  18.     } 
  19. )() 
  20.  
  21.  
  22. // js里面沒有休眠的語法，但是借助await命令可以讓程序停頓的時間 
  23. const sleepFun = (interval) => { 
  24.     return new Promise(resolve=>{ 
  25.         setTimeout(resolve,interval); 
  26.     }) 
  27. } 
  28.  
  29. // 用法 
  30. const asyncFun = async ()=>{ 
  31.     for(let i = 1; i <= 5; i++){ 
  32.         console.log(i); 
  33.         await sleepFun(1000); 
  34.     } 
  35. } 
  36. asyncFun(); 

從上面可以看到，await命令后面是一個Sleep對象的實例。這個實例不是 Promise 對象，但是因為定義了then方法，await會將其視為Promise處理。

await命令后面的 Promise 對象如果變?yōu)閞eject狀態(tài)，則reject的參數(shù)會被catch方法的回調(diào)函數(shù)接收到。

注意：上面代碼中，await語句前面沒有return，但是reject方法的參數(shù)依然傳入了catch方法的回調(diào)函數(shù)。這里如果在await前面加上return，效果是一樣的。

  • 任何一個await語句后面的 Promise 對象變?yōu)閞eject狀態(tài)，那么整個async函數(shù)都會中斷執(zhí)行。
  • 使用try/catch可以很好處理前面await中斷，而后面不執(zhí)行的情況。

示例：

  1. const fun = async ()=>{ 
  2.     try { 
  3.         await Promise.reject("ERROR"); 
  4.     } catch (error) { 
  5.          
  6.  
  7.     } 
  8.     return await Promise.resolve("success"); 
  9.  
  10. } 
  11. fun().then( 
  12.     value=>console.log(value),reason=>console.log(reason,"error")// 
  13. ).catch( 
  14.     error=>console.log(error)//ERROR 
  15. ); 

另一種方法是await后面的 Promise 對象再跟一個catch方法，處理前面可能出現(xiàn)的錯誤。

  1. const fun = async ()=>{ 
  2.     await Promise.reject("error").catch(e=>console.log(e)); 
  3.     return await Promise.resolve("success"); 
  4. } 
  5. fun().then(v=>console.log(v));//success 

錯誤處理

第一點：如果await后面的異步操作出錯，那么等同于async函數(shù)后面的promise對象被reject。

  1. const fun = async()=>{ 
  2.     await new Promise((resolve,reject)=>{ 
  3.         throw new Error("error") 
  4.     }) 
  5. } 
  6. fun().then(v=>console.log(v)).catch(e=>console.log(e)); 

第二點：多個await命令后面的異步操作，如果不存在繼發(fā)關(guān)系，最好讓他們同時進(jìn)行觸發(fā)。

  1. const [fun1,fun2] = await Promise.all([getFun(),getFoo()]); 
  2.  
  3. const fooPromise = getFoo(); 
  4. const funPromise = getFun(); 
  5. const fun1 = await fooPromise(); 
  6. const fun2 = await funPromise(); 

第三點：await命令只能用在async函數(shù)之中，如果用在普通函數(shù)，就會報錯。

  1. async function dbFuc(db) { 
  2.   let docs = [{}, {}, {}]; 
  3.  
  4.   // 報錯 
  5.   docs.forEach(function (doc) { 
  6.     await db.post(doc); 
  7.   }); 
  8. } 

第四點：async 函數(shù)可以保留運(yùn)行堆棧。

小結(jié)在這篇文章中我們總結(jié)了異步編程和回調(diào)函數(shù)的解決方案Promise，以及回調(diào)終結(jié)者aysnc/await。

  • Promise有三個狀態(tài)：pending、rejected、resolved。
  • Promise的狀態(tài)改變，只能改變一次，只有兩種改變：pending變?yōu)閞esolved/fullfilled、pending變?yōu)閞ejected。
  • Promise最大優(yōu)點就是可以進(jìn)行鏈?zhǔn)秸{(diào)用。
  • async用來表示函數(shù)是異步的，定義的async函數(shù)返回值是一個promise對象。
  • 函數(shù)中只要使用await，則當(dāng)前函數(shù)必須使用async修飾。
  • 回調(diào)函數(shù)的終結(jié)者就是async/await。

參考文章

  • 《異步終結(jié)者 async await，了解一下》
  • 《一次性讓你懂a(chǎn)sync/await，解決回調(diào)地獄》
  • 《面試精選之Promise》
  • 《BAT前端經(jīng)典面試問題：史上最最最詳細(xì)的手寫Promise教程》
  • 《Promise實現(xiàn)原理(附源碼)》
  • 《JavaScript高級程序設(shè)計(第四版)》
  • 《你不知道的JavaScript(中卷)》
  • 阮一峰《ES6 入門教程》

本文轉(zhuǎn)載自微信公眾號「前端萬有引力」，可以通過以下二維碼關(guān)注。轉(zhuǎn)載本文請聯(lián)系前端萬有引力公眾號。

 

責(zé)任編輯：姜華 來源： 前端萬有引力
PromiseAsyncAwait
相關(guān)推薦

2023-10-08 10:21:11

JavaScriptAsync

2021-06-07 09:44:10

JavaScript開發(fā)代碼

2017-04-10 15:57:10

AsyncAwaitPromise

2024-09-02 14:12:56

2023-03-29 10:19:44

異步編程AsyncPromise

2017-06-19 09:12:08

JavaScriptPromiseAsync

2022-11-21 09:01:00

Swift并發(fā)結(jié)構(gòu)

2021-06-09 07:01:30

前端CallApply

2021-09-06 08:13:35

APM系統(tǒng)監(jiān)控

2014-07-15 10:08:42

異步編程In .NET

2021-07-15 14:29:06

LRU算法

2014-07-15 10:31:07

asyncawait

2024-02-01 09:39:02

asyncawaitPromise

2016-11-22 11:08:34

asyncjavascript

2024-03-05 18:15:28

AsyncAwait前端

2022-06-24 08:33:13

ECMAScriptjavaScript

2020-09-27 08:04:57

前端

2012-07-22 15:59:42

Silverlight

2021-07-20 10:26:12

JavaScriptasyncawait

2022-08-27 13:49:36

ES7promiseresolve
點贊
收藏

51CTO技術(shù)棧公眾號

主站蜘蛛池模板： 日韩一级免费观看 | 国产午夜在线观看 | 在线观看亚洲精品 | 国产美女视频一区 | 欧美色图另类 | 国产精品色一区二区三区 | 久久精品国产久精国产 | 一区二区在线观看免费视频 | 91精品在线看 | re久久| 国产精品久久性 | av天天干 | 天天干天天爱天天 | 一区二区三区在线免费观看视频 | 国产成人在线视频播放 | 成人精品毛片国产亚洲av十九禁 | 黄色片免费看视频 | 中文字幕影院 | 一级毛片成人免费看a | 中文字幕一区在线观看视频 | 男人天堂国产 | 中文字幕一区在线观看视频 | 亚洲欧美日韩国产综合 | 亚洲天堂中文字幕 | 亚洲欧美日韩精品久久亚洲区 | 国产精品亚洲第一区在线暖暖韩国 | 久久www免费视频 | 久久五月婷 | 国产精品免费av | 99热视| 亚洲精品99 | 欧美大片一区二区 | 99视频在线 | 成人免费福利视频 | 在线观看www视频 | 日本视频一区二区 | 色精品视频 | 日韩精品在线免费观看 | 国产高清在线观看 | 91在线免费观看 | 伊人伊成久久人综合网站 |