JavaScript有哪兩種非同步處理方式

青灯夜游
發布: 2022-01-27 16:54:28
原創
1934 人瀏覽過

JavaScript中的兩種非同步處理方式:1、利用「Promise」來處理非同步,它可以幫忙管理非同步方式傳回的程式碼;2、利用「async/await」來處理非同步,可以將非同步事件用同步語法來處理。

JavaScript有哪兩種非同步處理方式

本教學操作環境:windows7系統、javascript1.8.5版、Dell G3電腦。

JavaScript的非同步處理方式

#Promise

(1)promise對象是commonJS工作小組提出的規範,一種模式,目的是為了非同步程式設計提供統一介面。

(2)promise是一種模式,promise可以幫忙管理非同步方式回傳的程式碼。他講程式碼進行封裝並添加一個類似於事件處理的管理層。我們可以使用promise來註冊程式碼,這些程式碼會在promise成功或失敗後運行。

(3)promise完成之後,對應的程式碼也會執行。我們可以註冊任意數量的函數再成功或失敗後運行,也可以在任何時候註冊事件處理程序。

(4)promise有兩種狀態:1、等待(pending);2、完成(settled)。

promise會一直處於等待狀態,直到它所包裝的非同步呼叫返回/逾時/結束。

(5)這時候promise狀態變成完成。完成狀態分成兩類:1、解決(resolved);2、拒絕(rejected)。

(6)promise解決(resolved):意味著順利結束。 promise拒絕(rejected)意味著沒有順利結束。

//promise var p=new Promise(function(resolved)) //在这里进行处理。也许可以使用ajax setTimeout(function(){ var result=10*5; if(result===50){ resolve(50); }else{ reject(new Error('Bad Math')); } },1000); }); p.then(function(result){ console.log('Resolve with a values of %d',result); }); p.catch(function(){ console.error('Something went wrong'); });
登入後複製

(1)程式碼的 關鍵在於setTimeout()的呼叫。

(2)重要的是,他呼叫了函數resolve()和reject()。 resolve()函數告訴promise用戶promise已解決;reject()函數告訴promise用戶promise未能順利完成。

(3)另外還有一些使用了promise程式碼。注意then和catch用法,可以將他們想像成onsucess和onfailure事件的處理程序。

(4)巧妙地方是,我們將promise處理與狀態分開。也就是說,我們可以呼叫p.then(或p.catch)多少次都可以,不管promise是什麼狀態。

(5)promise是ECMAscript 6管理非同步程式碼的標準方式,javascript函式庫使用promise管理ajax,動畫,和其他典型的非同步互動。

簡單的說,它的思想是:每一個非同步任務返回一個promise對象,該對像有一個then方法,允許指定回調函數。例如,f1的回呼函數f2,可以寫成:

f1.then(f2);
登入後複製

f1要進行如下改寫(使用jquery的實作):

function f1(){ var dfd=$.deferred(); settimeout(function(){ //f1的任务代码 dfd.resolve();   },500); return dfd.promise; }
登入後複製

這樣寫的優點:回呼函數寫成了鍊式寫法,程式的流程可以看得很清楚,而且有一整套的配套方法,可以實現很多強大的功能。

例如,指定多個回呼函數

f1().then(f2).then(f3);
登入後複製

再比如,指定發生的錯誤時的回呼函數:

f1().then(f2).fail(f3);
登入後複製

而且,它有一個前面三種方法都沒有的好處:如果一個任務已經完成,再加入回呼函數,則該回呼函數會立即執行。

所以你不用擔心錯過某一個事件或訊號。

這種方法的缺點:寫作和理解都相對比較難。

async await

從ES6 Promise 問世之後,非同步程式碼從回呼地獄逐漸變成了優雅的函數式管道處理,但對於不熟悉度的開發者來說,只不過是從回調地獄變成了Promise 地獄而已。

在ES8 中規範了新的async/await,雖然只是Promise 和Generator Function組合在一起的語法糖,但透過async/await便可以將非同步事件用同步語法來處理,就好像是老樹開新花一樣,寫起來的風格與Promise 完全不同:

function wait(time, fn) { return new Promise(resolve => { setTimeout(() => { console.log('wait:', time) resolve(fn ? fn() : time) }, time) }) } await wait(500, () => console.log('bar')) console.log('foo') // wait: 500 // bar // foo
登入後複製

透過把setTimeout包裝成Promise,再用await關鍵字調用,可以看到結果會是同步執行的先出現bar,再出現foo,也就是開頭提到的將非同步事件寫成同步處理。

再看一個例子:

async function withAsyncAwait() { for(let i = 0; i < 5; i++) { await wait(i*500, () => console.log(i)) } }await withAsyncAwait() // wait: 0 // 0 // wait: 500 // 1 // wait: 1000 // 2 // wait: 1500 // 3 // wait: 2000 // 4
登入後複製

程式碼中實作了withAsyncAwait函數,用for迴圈及await關鍵字重複執行wait函數;此處執行時,迴圈每次會依序等待不同的秒數再執行下一次迴圈。

在使用async/await時,由於await關鍵字只能在async function 中執行,使用時務必記得同時使用。

另外在用循環處理非同步事件時,需要注意ES6 之後提供的許多Array 方法都不支援async/await語法,如果這裡用forEach取代for,結果會變成同步執行,每隔0.5 秒就列印出數字:

【相關推薦:javascript學習教學

#

以上是JavaScript有哪兩種非同步處理方式的詳細內容。更多資訊請關注PHP中文網其他相關文章!

相關標籤:
來源:php.cn
本網站聲明
本文內容由網友自願投稿,版權歸原作者所有。本站不承擔相應的法律責任。如發現涉嫌抄襲或侵權的內容,請聯絡admin@php.cn
最新問題
最新下載
更多>
網站特效
網站源碼
網站素材
前端模板
關於我們 免責聲明 Sitemap
PHP中文網:公益線上PHP培訓,幫助PHP學習者快速成長!