数据结构
网络
关系型数据库管理系统 (RDBMS)
操作系统
Java
MS Excel
iOS
HTML
CSS
Android
Python
C语言编程
C++
C#
MongoDB
MySQL
Javascript
PHP
物理学
化学
生物学
数学
英语
经济学
心理学
社会研究
时尚研究
法律研究如何在 JavaScript 中创建异步函数？
JavaScript 异步函数是在独立于程序主流程运行的函数。这允许程序在异步函数运行时继续执行其他代码。`async` 用于声明异步函数，该函数异步运行；`await` 用于暂停函数的执行，直到完成特定的异步任务。
创建异步函数的方法
使用 async 关键字
创建异步函数最简单的方法是在函数声明前使用 `async` 关键字。请参见以下语法：
语法
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/1');
const data = await response.json();
console.log(data);
}
在这个例子中，`fetchData` 函数使用 `await` 关键字等待从服务器获取数据，然后将其记录到控制台。
示例
以下是如何在 JavaScript 中使用异步函数从服务器获取数据并在 HTML 页面上显示数据的示例：
<!DOCTYPE html>
<html>
<head>
<title>async</title>
</head>
<body>
<p>Click below button to see the result</p>
<button id="get-data">Get</button>
<div id="data-box"></div>
<script>
// Asynchronous function to fetch data
async function fetchData() {
const response = await fetch('https://jsonplaceholder.typicode.com/todos/3');
const data = await response.json();
return data;
}
// Add click event listener to the button
const button = document.getElementById('get-data');
button.addEventListener('click', async () => {
// Call the asynchronous function
const data = await fetchData();
// Use the data to update the HTML
const dataBox = document.getElementById('data-box');
dataBox.innerHTML = `<p>Id: ${data.id}</p><p>Title: ${data.title}</p>`;
});
</script>
</body>
</html>
在这个例子中，我们有一个 ID 为 "get-button" 的 HTML 按钮和一个 ID 为 "data-box" 的 div 容器。我们向按钮添加了一个事件监听器，因此当单击它时，它会调用异步函数 `fetchData`，该函数使用 `fetch` API 从服务器检索数据。数据返回后，它用于使用检索到的数据的标题和已完成状态更新 ID 为 "data-box" 的 div 容器的 HTML 内容。
注意 - 以上代码的输出可能会随时间而变化，因为数据来自外部 API。
使用 Promise
创建异步函数的另一种方法是使用 Promise 对象。Promise 是一个表示异步操作最终完成（或失败）及其结果值的 对象。
语法
function fetchData() {
return new Promise((resolve, reject) => {
fetch('yoururl.com')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}
在语法中，`fetchData` 函数返回一个新的 Promise，该 Promise 从服务器获取数据，并使用数据解析或使用错误拒绝。`then` 和 `catch` 方法用于处理 Promise 的解析或拒绝。
示例
以下是如何在 JavaScript 中使用 Promise 从服务器获取数据并在 HTML 页面上显示数据的示例：
<html>
<body>
<p>Click below button to see the result</p>
<button id="get-button">Get</button>
<div id="data-box"></div>
<script>
// Async promise function to fetch data
function fetchData() {
return new Promise((resolve, reject) => {
fetch('https://jsonplaceholder.typicode.com/todos/3')
.then(response => response.json())
.then(data => resolve(data))
.catch(error => reject(error));
});
}
// Add click event listener to the button
const button = document.getElementById('get-button');
button.addEventListener('click', () => {
// Call the promise
fetchData()
.then(data => {
// Use the data to update the HTML
const dataBox = document.getElementById('data-box');
dataBox.innerHTML = `<p>Id: ${data.id}</p><p>Status: ${data.completed}</p>`;
})
.catch(error => console.log(error));
});
</script>
</body>
</html>
在这个例子中，我们有一个 ID 为 "get-button" 的 HTML 按钮和一个 ID 为 "data-box" 的 div 容器。我们向按钮添加了一个事件监听器，因此当单击它时，它会调用函数 `fetchData`，该函数使用 `fetch` API 从服务器检索数据并返回一个 Promise。Promise 解析后，它用于使用检索到的数据的 ID 和已完成项更新 ID 为 "data-box" 的 div 容器的 HTML 内容。如果 Promise 被拒绝，它会在控制台中记录错误。
注意 - 以上代码的输出可能会随时间而变化，因为数据来自外部 API。
使用 async/await 与 Promise.all
Promise.all 方法返回一个 Promise，当作为可迭代对象传递的所有 Promise 都已解析时，该 Promise 将解析；如果第一个传递的 Promise 被拒绝，则该 Promise 将被拒绝，并使用拒绝的原因。
语法
async function fetchData() {
const response = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2')
]);
const data = await Promise.all(response.map(res => res.json()));
console.log(data);
}
在这个例子中，`fetchData` 函数使用 `Promise.all` 方法从服务器获取多个数据，并使用 `await` 关键字等待所有响应，然后将数据记录到控制台。
示例
以下是如何在 JavaScript 中使用 async/await 与 Promise.all 从服务器获取多个数据并在 HTML 页面上显示数据的示例：
<html>
<body>
<p>Click below button to see the result</p>
<button id="get-button">Get</button>
<div id="data-box"></div>
<script>
// Asynchronous function to fetch data
async function fetchData() {
const response = await Promise.all([
fetch('https://jsonplaceholder.typicode.com/todos/1'),
fetch('https://jsonplaceholder.typicode.com/todos/2')
]);
const data = await Promise.all(response.map(res => res.json()));
return data;
}
// Add click event listener to the button
const fetchButton = document.getElementById('get-button');
fetchButton.addEventListener('click', async () => {
// Call the async function
const data = await fetchData();
// Use the data to update the HTML
const dataBox = document.getElementById('data-box');
dataBox.innerHTML = `
<p>Id 1: ${data[0].id}</p>
<p>Title 1: ${data[0].title}</p>
<p>Status 1: ${data[0].completed}</p>
<p>Id 2: ${data[1].id}</p>
<p>Title 2: ${data[1].title}</p>
<p>Status 2: ${data[1].completed}</p>
`;
});
</script>
</body>
</html>
在这个例子中，我们有一个 ID 为 "get-button" 的 HTML 按钮和一个 ID 为 "data-box" 的 div 容器。我们向按钮添加了一个事件监听器，因此当单击它时，它会调用异步函数 `fetchData`，该函数使用 `fetch` API 和 `Promise.all` 方法从服务器检索多个数据。现在它使用 `await` 关键字等待所有响应，然后返回数据，然后使用检索到的数据的 id、标题和已完成项更新 ID 为 "data-box" 的 div 容器的 HTML 内容。
注意 - 以上代码的输出可能会随时间而变化，因为数据来自外部 API。
结论
JavaScript 提供了几种创建异步函数的方法，包括使用 `async` 关键字、Promise 对象以及 async/await 与 Promise.all。每种方法都有其自身的优点和用例。`async` 关键字和 `await` 关键字用于执行需要很长时间才能完成的任务，例如从服务器获取数据等。
2K+ 次浏览
