理解Promise的三種姿勢

2022-01-29 13:58:01 字數 2244 閱讀 5100

譯者按:對於promise,也許你會用了,卻並不理解;也許你理解了,卻只可意會不可言傳。這篇部落格將從3個簡單的視角理解promise,應該對你有所幫助。

示例1中,asyncfunc()函式返回的是乙個promise例項:

// 示例1

function asyncfunc()

, 100);

});}asyncfunc()

.then(function(x)

);

1秒之後,promise例項的狀態變為resolved,就會觸發then繫結的**函式,列印resolve值,即"hello, fundebug!"。

那麼,什麼是promise呢?

示例2可以幫助我們理解阻塞

// 示例2

function asyncfunc()

, 1000);

});}async function main()

main();

以上**是採用async/await語法寫的,與示例1完全等價。await的中文翻譯即為"等待",這裡可以"望文生義"。因此,相比於使用promise實現,它更加直觀地展示了什麼是阻塞

事實上,使用promise實現時,也需要等待asyncfunc()執行,之後再呼叫then繫結的**函式。因此,呼叫promise時,**也是阻塞的。

如果某個函式返回promise例項,則這個promise最初相當於乙個空白的容器,當函式執行結束時,其結果將會放進這個容器。示例3通過陣列模擬了這個過程:

// 示例3

function asyncfunc()

, 1000);

return blank;

}const blank = asyncfunc();

console.log(blank); // 列印""

settimeout(function()

, 2000);

開始時,blank為空陣列,1秒之後,"hello, fundebug!"被新增到陣列中,為了確保成功,我們需要在2秒之後從blank陣列中讀取結果。

對於promise,我們不需要通過陣列或者其他變數來傳遞結果,then所繫結的**函式可以通過引數獲取函式執行的結果。

示例4模擬了事件:

// 示例4

function asyncfunc()

; settimeout(function()

}, 1000);

return eventemitter;

}asyncfunc()

.success.push(function(x)

);

呼叫asyncfunc()之後,sucesss陣列其實是空的,將**函式push進陣列,相當於繫結了事件的**函式。1秒之後,settimeout定時結束,則相當於事件觸發了,這時sucess陣列中已經註冊了**函式,於是列印"hello, fundebug!"。

promise成功resolve時,會觸發then所繫結的**函式,這其實就是事件。

理解Promise的3種姿勢

譯者按 對於promise,也許你會用了,卻並不理解 也許你理解了,卻只可意會不可言傳。這篇部落格將從3個簡單的視角理解promise,應該對你有所幫助。示例1中,asyncfunc 函式返回的是乙個promise例項 示例1 function asyncfunc 100 asyncfunc the...

js的非同步載入及promise的三種狀態

恢復內容開始 我們平時經常使用的就是這種同步載入的形式 同步模式,又稱阻塞模式,會阻止瀏覽器的後續處理,停止了後續的解析,因此停止了後續的檔案載入 如影象 渲染 執行。js 之所以要同步執行,是因為 js 中可能有輸出 document 內容 修改dom 重定向等行為,所以預設同步執行才是安全的。以...

正確開啟Mockjs的三種姿勢 入門參考(一)

閱讀本文章需要注意以下幾點 想主要介紹如何使用mockjs,是因為發現網上針對這方面的資料好像並不多,並且比較分散。想要做一次總結,希望能幫助解決入門mockjs的新人使用的一些疑惑 1.1 簡單介紹一下mock.js 眾所周知mock.js因為兩個重要的特性風靡前端 文章會用到的api 也是moc...