使用 await 需要async js 封装

使用 await 需要async js 封装

在JavaScript中，async 和 await 关键字是用来处理异步操作的一个非常方便的方式。async 关键字用于声明一个函数是异步的，而 await 关键字用于等待一个 Promise 完成。

使用 async 和 await

1.  

   声明异步函数：使用 async 关键字在函数声明前，这表明该函数内部可以使用 await。

    

    

2.  

   等待异步操作：在函数内部，可以使用 await 关键字在异步操作前，这会使 JavaScript 等待该 Promise 完成后再继续执行。

    

    

示例

假设我们有一个返回 Promise 的函数 fetchData()，我们可以这样使用 async 和 await：

 

// 异步函数，返回一个 Promise
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据加载成功！");
        }, 2000); // 模拟网络延迟
    });
}
 
// 使用 async 和 await
async function getData() {
    try {
        const data = await fetchData(); // 等待 Promise 完成
        console.log(data); // 输出结果
    } catch (error) {
        console.error('获取数据时发生错误:', error);
    }
}
 
// 调用异步函数
getData();

封装异步操作

如果你想要封装一个返回 Promise 的函数，并希望在外部以同步的方式使用它（即使用 await），你可以这样做：

// 封装一个返回 Promise 的函数
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            resolve("数据加载成功！");
        }, 2000); // 模拟网络延迟
    });
}
 
// 使用 async 和 await 封装外部调用
async function loadData() {
    try {
        const data = await fetchData(); // 等待 Promise 完成
        console.log(data); // 使用数据
        return data; // 可以返回结果给调用者，如果有需要的话
    } catch (error) {
        console.error('加载数据时发生错误:', error);
    }
}
 
// 调用封装后的函数，并使用 await（在另一个 async 函数中）
async function main() {
    const result = await loadData(); // 等待 loadData() 完成并获取结果
    console.log('主函数中的结果:', result); // 使用结果
}
 
main(); // 启动主函数

在这个例子中，loadData() 函数封装了对 fetchData() 的调用，使得外部代码可以通过 await 以同步的方式等待异步操作完成。这种方式使得代码更加清晰和易于管理。