資料結構
網路
關係資料庫管理系統
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C 程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
時尚研究
法律研究JavaScript 中的 Async/Await 函式
處理非同步任務對於網路程式設計至關重要。在 JavaScript 中，大多數情況下，我們請求的資料與我們的系統不同步。為了處理非同步系統，我們可以在 JavaScript 中使用 Async 和 Await 函式。`async` 關鍵字與函式一起使用，將 JavaScript 函式限定為非同步函式。
Async 函式
Async 函式與 JavaScript 中的普通函式非常相似。語法如下：從語法中可以清楚地看出，只有“async”關鍵字被新增到函式簽名中。
語法
async function name(param1, param2, ...paramN) {
// function body
}
示例
讓我們來看一個 JavaScript 中 Async 函式的簡單示例。
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { async function myAsyncFunction() { content += "From Async function body" return Promise.resolve(1); } myAsyncFunction(); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
從這個示例輸出中，我們看不出與普通函式輸出有任何區別。但是，當使用 `async` 關鍵字時，它會返回一個 Promise 物件。透過這個 Promise，我們可以應用方法鏈來使用 `then()` 函式。下面的示例展示了這一點。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { async function myAsyncFunction() { content += "From Async function body" + '<br>' return Promise.resolve(1000); } myAsyncFunction().then(function (result) { content += result + "<br>" opDiv.innerHTML = content }); } catch (err) { error += err } finally { // display on output console .innerHTML = error } </script> </body> </html>
此示例與上一個示例類似，但它使用 `then()` 函式來檢查函式是否已解析，如果是，則直接從其中返回輸出。
Await 關鍵字
在最後一個示例中，我們沒有看到 Async 函式的任何特殊操作，這是因為要看到 Async 的效果，我們需要為非同步系統設定環境。我們可以透過加入額外的延遲來做到這一點。在實際示例中，檔案訪問或從 Web 下載較大的檔案需要更長的時間，這將是非同步的，在這種情況下，Async 函式將變得非常有用。
為了在一段時間後處理 Promise，我們需要指定它必須等待一段時間。因此，使用了 `await` 關鍵字。讓我們看看語法和一些基本示例。
語法
let object = await <some promise>;
示例
讓我們來看一個 `await` 關鍵字的簡單示例。
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { // Creating a promise let myPromise = new Promise(function (resolve, reject) { setTimeout(function () { resolve('Promise resolved') }, 4000); // resolve after 4 seconds }); // define one async function async function myAsyncFunction() { content += "Wait for some time..." + '<br>' opDiv.innerHTML = content // wait until the promise resolves let result = await myPromise; content += result + '<br>' content += 'The promise has been resolved' + '<br>' opDiv.innerHTML = content } myAsyncFunction(); } catch (err) { error += err } finally { // display on output console opErrDiv.innerHTML = error } </script> </body> </html>
直接檢視此輸出意義不大。如果您自己執行此程式碼，您可以看到第一行“等待一段時間...”首先打印出來，然後它等待 4 秒（4000 毫秒）以生成下一個輸出。這是因為我們建立了一個在 4 秒後解析並返回“Promise 已解析”字串的 Promise。
從 Async 函式處理錯誤
從 Async 函式引發錯誤是一件常見的事情。例如，如果我們嘗試從 Web 下載某些物件，它會透過 Promise 物件開始下載。但在一段時間後，出現網路故障或許可權問題或任何其他問題，因此這將無法成功完成其任務並引發錯誤。可以使用 `catch()` 或基本的 try-catch 塊直接處理此錯誤。
語法
asyncFunc().catch( // handle error coming from async function )
示例
讓我們來看一個在使用 Promise 和 Async 函式時捕獲錯誤的示例。
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { // Creating a promise function fetchUser(id) { if (typeof id !== 'number' || id <= 0) { throw new Error('ID is invalid, check again'); } return new Promise((resolve, reject) => { resolve({ id: id, username: 'someUser' }); }); } fetchUser('id1') .then(user => content += JSON.stringify(user.username)) .catch(err => error += err); } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
在上面的示例中，我們使用 `.catch()` 方法鏈捕獲了錯誤。這將直接從 Promise 中檢查錯誤。我們還可以從外部捕獲和處理錯誤。這可以透過使用 JavaScript 中的異常處理方法（try-catch）語句來完成。
示例
<!DOCTYPE html> <html> <head> <title>HTML Console</title> </head> <body> <h3> Output Console </h3> <p> Output: </p> <div id="output"> </div> <div id="opError" style="color : #ff0000"> </div> <script> var content = '' var error = '' var opDiv = document.querySelector('#output') var opErrDiv = document.querySelector('#opError') // actual javascript code try { // Creating a promise function fetchUser(id) { if (typeof id !== 'number' || id <= 0) { throw new Error('ID is invalid, check again'); } return new Promise((resolve, reject) => { resolve({ id: id, username: 'someUser' }); }); } try { fetchUser('id1') .then(user => content += JSON.stringify(user.username)) .catch(err => error += err); } catch (er) { error += er } } catch (err) { error += err } finally { // display on output console opDiv.innerHTML = content opErrDiv.innerHTML = error } </script> </body> </html>
結論
處理非同步任務是網路程式設計中最常見的任務之一。JavaScript 使用 `async` 和 `await` 關鍵字來限定基本函式為非同步函式。當我們從 Web 下載資料或讀取與我們的系統不同步的大檔案時，我們可以告訴編譯器請不要在它工作時停止，它將在後臺工作。當它完成後，執行程式碼中指定的其餘部分。為此，`async` 和 `await` 關鍵字是 JavaScript 中最常用的功能。
738 次檢視
