极客教程JavaScript 如何异步函数之外使用await
在JavaScript中，async-await关键字是用来使函数异步化的。如果我们让任何函数成为异步函数，它就会像多线程一样工作，并行地执行代码，这有助于我们提高应用程序的性能。
在这里，我们将学习如何在异步函数之外使用await关键字。
立即调用函数
我们将在这种方法中使用表达式来立即调用函数。我们可以在函数内部的承诺或任何其他函数中使用 await 关键字。
语法
用户可以按照下面的语法来使用函数表达式来立即调用函数。
(async () => {
let result = await fetchData();
})();
在上面的语法中，我们还没有创建函数，但在大括号内，我们写了带有async和await关键字的箭头函数语法。
例子1
在下面的例子中，我们在定义完函数后立即调用了它。在表达式中，我们定义了箭头函数。在箭头函数的代码块中，我们使用await关键字和axios来从API中获取数据。
我们在<head>部分添加了CDN以使用axios。在输出中，用户可以看到我们从API获得的数据。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>await</i> with immediately invoking function expression.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(async () => {
let result = await axios.get("https://dummyjson.com/products/1");
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})();
</script>
</body>
</html>
使用promise
我们可以使用promise代替异步函数来等待，直到我们从服务器获得响应或暂停代码的执行。
语法
用户可以按照下面的语法来使用JavaScript中的promise。
promise.then((response) => {
// use response
})
.catch((err) => {
// handle the errors
})
在上面的语法中，我们使用了then()和catch()块与承诺来处理响应和错误。
例2
在下面的例子中，我们所做的事情与例子1相同。在例子1中，我们用axios的async-await语法来获取数据。在这里，我们使用 promise 和 axios 来获取数据。axios.get()方法返回承诺，我们使用then()和catch()块来解决这个问题。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
(() => {
axios.get("https://dummyjson.com/products/1").then((result) => {
output.innerHTML += "The results from the API is <br/>";
for (let key in result.data) {
output.innerHTML += key + " : " + result.data[key] + "<br/>";
}
})
.catch((err) => {
output.innerHTML += "The error is " + err;
})
})();
</script>
</body>
</html>
例3
在这个例子中，我们使用带有new关键字的Promise()构造函数创建了一个承诺。我们正在拒绝这个承诺。
之后，我们用SamplePromise承诺变量的then()和catch()块来获取承诺中的响应或错误。用户可以观察到，由于我们已经拒绝了错误，所以在输出中控制权转到了catch()块。
<html>
<head>
<script src = "https://cdnjs.cloudflare.com/ajax/libs/axios/1.2.3/axios.min.js"> </script>
</head>
<body>
<h2>Using the <i>promises</i> instead of async-await.</h2>
<div id = "output"> </div>
<script>
let output = document.getElementById('output');
let SamplePromise = new Promise((resolve, reject) => {
reject("Promise is rejected without any error");
})
SamplePromise.then((response)=>{
output.innerHTML += "Response from the promise is " + response;
})
.catch((err)=>{
output.innerHTML += "The error message is - " + err;
})
</script>
</body>
</html>
本教程教会了用户在异步函数之外使用 await 关键字。此外，我们还解释了使用承诺（promises）来使用async-await关键字的替代方法。