理解Promise的3種姿勢

2022-01-29 16:39:42 字數 2112 閱讀 7242

譯者按:對於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的三種姿勢

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

Promise的理解和使用

官方 1 1.promise物件用於非同步計算 1 2.promise表示乙個現在,將來或用不可能可用的值 理解 2 1.主要用於非同步計算 2 2.可以將非同步操作佇列化,按照期望的順序執行,返回符合預期的結果 2 3.可以在物件之間傳遞和操作promise,幫助我們處理佇列 1.同步 不同的事情...

promise 非同步載入的 自我理解

我認為promise相當於乙個容器,把一些發生未完成的事件儲存在promise容器中,在容器中發生完,在容器中的事件都繫結著三個可能存在的狀態,事件發生的結果影響著這三種的狀態,也只有非同步操作結果可以決定這三種狀態,其他任何操作都無法改變這種操作,一旦這種狀態改變,就不會再發生變化了,任何時候都可...