資料結構
網路
關係資料庫管理系統 (RDBMS)
作業系統
Java
MS Excel
iOS
HTML
CSS
Android
Python
C語言程式設計
C++
C#
MongoDB
MySQL
Javascript
PHP
物理學
化學
生物學
數學
英語
經濟學
心理學
社會學
服裝設計
法律研究如何在JavaScript中鏈式呼叫非同步函式？
JavaScript是一種單執行緒同步函式，執行操作。這是一個耗時的操作，會阻塞執行緒的其他操作。
我們可以使用JavaScript提供的**非同步**程式設計，執行函式而不會阻塞執行緒的其他操作。這可以透過非同步程式碼（如Promise或async函式（基本上是更簡潔的Promise））來實現。
**非同步**函式很酷，但它們的執行時間不確定，這可能會造成問題。此外，跟蹤非同步函式的任何潛在錯誤也並非易事。
在本文中，我們將探討使用**ES2015+特性**（如async函式、箭頭函式等）來鏈式呼叫非同步函式。
示例1
在下面的示例中，我們有3個非同步函式。
# index.html
<html>
<head>
<title>Chaining Async functions</title>
<script type = "text/javascript">
<!--
function showTutorial(name) {
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<h1 style="color: green;">Welcome To Tutorials Point</h1>
<script type="text/javascript">
async function getUserData() {
console.log('Data fetched successfully.');
}
async function cleanUserData(userData) {
console.log('Cleaning the data');
}
async function saveToDataBase(userData) {
console.log('Data saved successfully to DB.');
}
const userData = getUserData();
const cleanedData = cleanUserData(userData);
saveToDataBase(cleanedData);
</script>
</body>
</html>輸出
上面的程式將在控制檯中生成與以下螢幕截圖類似的結果：
示例2：使用Promise
在下面的示例中，我們使用Promise和**then()**來鏈式呼叫非同步函式。
# index.html
<html>
<head>
<title>Chaining Async functions</title>
<script type = "text/javascript">
<!--
function showTutorial(name) {
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script type="text/javascript">
async function getUserData() {
console.log('Data fetched successfully');
}
async function cleanUserData(userData) {
console.log('Cleaning the data');
}
async function saveToDataBase(userData) {
console.log('Saving to DB');
}
getUserData()
.then((userData) => cleanUserData(userData))
.then((cleanedData) => saveToDataBase(cleanedData))
.then(() => console.log('All work done'))
</script>
</body>
</html>輸出
上面的程式將在控制檯中生成與以下螢幕截圖類似的結果：
示例3：使用async | await
在下面的示例中，我們將使用async和await函式，這是一種更好、更簡潔的執行鏈式呼叫的方法。await()函式只能在async()函式內部使用。因此，我們需要將其包裝在一個包裝函式中。
# index.html
<html>
<head>
<title>Chaining Async functions</title>
<script type = "text/javascript">
<!--
function showTutorial(name) {
document.myform.stage.value = name
}
//-->
</script>
</head>
<body>
<h1 style="color: green;">
Welcome To Tutorials Point
</h1>
<script type="text/javascript">
async function getUserData() {
console.log('Data Fetched successfully');
}
async function cleanUserData(userData) {
console.log('Cleaning the data');
}
async function saveToDataBase(userData) {
console.log('Saving to DB');
}
async function cleanAndSaveUserData() {
let userData = await getUserData();
let cleanedData = await cleanUserData(userData);
await saveToDataBase(cleanedData);
console.log('All work done');
}
cleanAndSaveUserData(); // does all the work
</script>
</body>
</html>輸出
上面的程式將在控制檯中生成與以下螢幕截圖類似的結果：
更新於：2022年4月22日
1K+瀏覽量
廣告