JavaScript 如何在异步函数外部使用await

在本文中，我们将试图以理论解释和编码示例的方式，理解我们如何在JavaScript中在异步函数外部使用await。

让我们首先理解下面展示的部分，其中以简明的方式阐述了声明promise、执行promise和使用async-await关键字的所有语法：

语法： 以下展示的语法用于在JavaScript中声明promise：

let new_promise_variable = 
    new Promise ((resolve, reject) => {
        // either use resolve()
        // or use reject() method
});

以下显示的语法将帮助我们理解在JavaScript中如何执行一个声明的promise：

new_promise_variable.then((data) => {
    // Either use console.log() for data
    // or use return statement
}).catch((error) => {
    // Catch the error, if caught
})

另外一种显示语法将帮助我们了解如何使用 async-await 关键字来声明异步函数，然后使用 await 关键字正确地获取数据：

async function function_name () {
    let data_to_be_retrieved = **await** data_function();
    // Do something with the fetched data
}

现在在分析上述所有的语法之后（如上所示），让我们来看一下下面阐明的示例，这将帮助我们正确定理这些语法。

示例1：

在这个示例中，我们将简单地创建一个方法，方法内部将返回一个promise，该promise将实际上使用resolve()方法来成功显示数据。
然后，我们将把从同一个方法中接收到的值（准确来说是promise值）存储在一个新变量中。
此外，我们将使用then()方法来显示我们的值为外部的，并且我们还将附加一个catch()方法，如果在数据执行的任何阶段捕捉到错误，则会显示错误。

JavaScript

<script> 
    let getData = () => { 
        return new Promise((resolve, reject) => { 
            resolve("This article is available "
                + "on GeeksforGeeks..."); 
        }); 
    }; 
  
    let data = getData(); 
    data 
        .then((result) => { 
            console.log(result); 
        }) 
        .catch((error) => { 
            console.log(error); 
        }); 
</script>

输出：

This article is available on GeeksforGeeks...

示例2：

在这个示例中，我们将声明与之前声明的相同的方法，实际上包含一个promise，但是在这里我们会以稍微改变的方式执行它。
在这里，我们将使用async关键字声明另一个方法，这个关键字标记该方法可以成功处理所有异步数据操作。
在此之后，我们将在该方法内部声明一个try-catch块，在try块中，我们将声明一个变量，在其中使用await关键字获取包含在方法中的数据。
然后使用console.log()方法将结果显示为输出，并进一步附加一个catch()方法，以便在任何阶段捕获到的错误。

JavaScript

<script> 
    let getData = () => { 
        return new Promise((resolve, reject) => { 
            resolve("This article is available"
                + " on GeeksforGeeks..."); 
        }); 
    }; 
  
    let fetchData = async () => { 
        try { 
            let data = await getData(); 
            console.log(data); 
        } catch (error) { 
            console.log(error); 
        } 
    }; 
  
    fetchData(); 
</script>

输出：

This article is available on GeeksforGeeks...

我们现在已经深入和详细地理解了事物，接下来让我们来看一下下面的启发式示例，它将帮助我们理解我们的主要任务，即如何在async函数之外使用await。

示例3：

首先，需要注意的重要一点是await不能直接在async函数之外使用，但为了方便起见，我们将尝试使用IIFE（立即调用函数表达式）来实现。
在这个示例中，我们将再次创建一个方法，该方法实际上将返回一个新的promise变量，并且这一次为了更好地理解，我们将使用reject()方法而不是resolve()方法。
然后，对于promise数据执行，我们将声明一个IIFE，虽然其本质上是async，并且在执行过程中我们将使用try-catch块。
在try块中，我们将声明一个变量，它将利用await关键字从外部获取我们的数据，然后我们将附加一个catch()方法，该方法将捕获我们在promise的reject()方法中传递的错误。

Javascript

<script> 
    let getData = () => { 
        return new Promise((resolve, reject) => { 
            reject("Something went wrong!!..."); 
        }); 
    }; 
  
    (async () => { 
        try { 
            let data = await getData(); 
            console.log(data); 
        } catch (error) { 
            console.log(error); 
        } 
    })(); 
</script>

输出：