async/await如何实现异步操作

### 使用 `async` 和 `await` 实现 JavaScript 异步操作

#### 定义异步函数
通过 `async` 关键字定义的函数会自动返回一个 `Promise` 对象。如果该函数正常结束，则 `Promise` 被解析为函数的返回值；如果有未捕获的异常抛出，则 `Promise` 将被拒绝。

// 1、使用 async 关键字修饰函数，被修饰的函数一定会返回 Promise 对象
async function fetchData() {
    return "数据获取完成";
}

当调用此函数时，实际上是在创建并立即执行一个返回 `Promise` 的表达式[^1]。

#### 处理异步逻辑
为了简化对多个嵌套回调或链式的 `.then()` 方法的操作，可以利用 `await` 来暂停当前函数直到指定的 `Promise` 解析完毕再继续往下执行。

// 2、使用 await 等待 Promise 执行完成后返回结果（注意：await 必须在 async 函数内部使用）
async function displayData() {
    try {
        let data = await fetchData();
        console.log(data);
    } catch (error) {
        console.error(error);
    }
}

displayData();

这段代码展示了如何在一个标记为 `async` 的函数内使用 `await` 来等待另一个异步操作的结果，并且还包含了错误处理机制以应对可能发生的失败情况。

#### 模拟网络请求延迟
为了让例子更加贴近实际应用场景，下面的例子引入了一个模拟的 API 请求过程，其中包含了一定时间内的延迟能够更好地展示真实的异步流程：

// 创建一个带有延迟响应的异步函数
function delay(ms) {
    return new Promise(resolve => setTimeout(resolve, ms));
}

async function fetchUserData(id) {
    // 假设这里有一个真正的API调用来代替setTimeout
    await delay(3000); // 模拟网络请求耗时三秒钟
    
    if (id === 'valid') {
        return { id: id, name: "张三" };
    } else {
        throw Error('用户不存在');
    }
}

async function showUserInfo(userId) {
    try {
        const user = await fetchUserData(userId);
        console.log(`用户名:${user.name}`);
    } catch (err) {
        console.warn(err.message);
    }
}

showUserInfo('valid'); // 输出 用户名:张三
showUserInfo('invalid');// 输出 用户不存在

上述实例不仅说明了怎样运用 `async` / `await` 进行基本的数据抓取工作，同时也体现了良好的实践方式——即总是要考虑到可能出现的各种意外状况，并做好相应的防护措施[^2]。