数据结构
网络
关系数据库管理系统
操作系统
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 次查看
