在前端开发中，异步编程是一个非常重要的技能。JavaScript 一直是一门异步编程的语言，而更近期的 async 和 await 关键字使异步 JavaScript 代码的编写更加容易和简化了异步编程的风格。
在本文中，我将为您详细介绍 async 和 await，并提供一些示例代码，以帮助您了解如何在 JavaScript 中使用它们。
async 和 await 概述
async 和 await 是在 ES7（或 ES2016）中引入的。async 和 await 关键字可以让我们在 JavaScript 中更方便地使用异步代码。简单来说，async 和 await 允许您编写以同步方式运行的异步代码，从而更好地表现异步代码的行为。
async 关键字告诉 JavaScript 引擎，这是一个异步函数，并且它正在返回一个 promise 对象。await 关键字可用于暂停异步函数的执行，直到潜在的 promise 对象已完成。
以下是 async 函数的语法：
async function myAsyncFunc() {
// async 函数体
}以下是 await 关键字的语法：
async function myAsyncFunc() {
await promise;
}如何使用 async 和 await
下面我们将为您提供一些示例代码，以更好地解释如何使用 async 和 await：
示例 1 - 异步函数返回值
您可以使用 async 关键字来定义一个异步函数，并使用 return 关键字返回异步功能的结果。在这种情况下，返回的值将被包装在 promise 对象中并异步返回。
以下是示例代码：
async function myAsyncFunc() {
return 'Hello World!';
}
myAsyncFunc()
.then(result => console.log(result));运行以上代码会输出 "Hello World!"。
示例 2 - 带有 await 的异步功能
在这个示例中，我们将使用一个真实的 API 请求来演示如何使用 await 关键字。我们使用 XMLHttpRequest 对象发出 GET 请求，我们在 await 关键字后使用的 promise 返回的是 XMLHttpRequest 请求的响应文本。
以下是示例代码：
// javascriptcn.com 代码示例
async function makeHttpRequest(url) {
let response = await fetch(url); // 使用 await 暂停函数执行直到请求完成
let data = await response.text(); // 使用 await 暂停函数执行直到响应文本解析完毕
return data;
}
makeHttpRequest('https://jsonplaceholder.typicode.com/todos/1')
.then(data => console.log(data));示例 3 - 处理多个异步调用
在这个示例中，我们将展示如何在异步函数中处理多个异步调用。我们将使用 Promise.all，它可以让您在一组 promise 对象完成时完成一个 promise 对象。
以下是示例代码：
// javascriptcn.com 代码示例
async function processMultipleAsyncCalls() {
let urls = [
'https://jsonplaceholder.typicode.com/todos/1',
'https://jsonplaceholder.typicode.com/todos/2',
'https://jsonplaceholder.typicode.com/todos/3'
];
let promises = urls.map(url => fetch(url)); // 发起一个映射到 promise 的请求
let responses = await Promise.all(promises); // 解析所有请求
let data = await Promise.all(responses.map(response => response.text())); // 解析所有响应文本
return data;
}
processMultipleAsyncCalls()
.then(data => console.log(data));运行以上代码会输出包含三个响应文本的数组。
总结
在本文中，我们学习了什么是 async 和 await，以及为什么 async 和 await 是 JavaScript 中的重要话题。我们还提供了一些示例代码，以帮助您了解如何使用这两个关键字。
在你的下一个 Web 应用中，使用 async 和 await，充分利用它们为您提供的强大功能！
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/653b23d47d4982a6eb577972