JSasyncawait怎么用_JavaScriptasync与await异步处理方法教程

async函数自动返回Promise，await用于等待Promise结果，使异步代码更清晰；需用try...catch处理错误，并用Promise.all()优化并行任务。

async 和 await 是 JavaScript 中处理异步操作的语法糖，让异步代码看起来像同步代码，更易读、更易维护。它们建立在 Promise 的基础上，使用起来比传统的 then/catch 链更直观。

什么是 async 函数

在函数前加上 async 关键字，表示这个函数是异步的，它会自动返回一个 Promise。

示例：

async function getData() {
  return "Hello, async!";
}

getData().then(console.log); // 输出: Hello, async!

await 的作用

await 只能在 async 函数内部使用，用于等待一个 Promise 完成。它会让 JavaScript 暂停函数的执行，直到 Promise 返回结果，期间不会阻塞主线程。

立即学习“Java免费学习笔记（深入）”；

比如请求数据：

async function fetchUser() {
  const response = await fetch('https://api.example.com/user');
  const user = await response.json();
  console.log(user);
}

上面代码中，await 让我们避免了嵌套的 .then()，逻辑更清晰。

Interior AI

AI室内设计，上传室内照片自动帮你生成多种风格的室内设计图

下载

错误处理：使用 try...catch

因为 await 会“暂停”Promise，所以如果 Promise 被拒绝（rejected），需要用 try...catch 捕获异常。

async function fetchUserSafely() {
  try {
    const response = await fetch('https://api.example.com/user');
    if (!response.ok) throw new Error('网络错误');
    const user = await response.json();
    console.log(user);
  } catch (error) {
    console.error('获取用户失败:', error.message);
  }
}

这样可以优雅地处理网络失败或 JSON 解析错误。

并行执行多个异步任务

如果多个异步操作互不依赖，不要逐个 await，那样会串行执行，变慢。

应该先启动所有任务，再用 await Promise.all() 等待全部完成。

async function fetchMultiple() {
  const promise1 = fetch('/api/data1').then(res => res.json());
  const promise2 = fetch('/api/data2').then(res => res.json());
  const promise3 = fetch('/api/data3').then(res => res.json());

  const [data1, data2, data3] = await Promise.all([promise1, promise2, promise3]);
  console.log(data1, data2, data3);
}

这样做三个请求几乎同时发出，效率更高。

基本上就这些。async/await 让异步编程更接近自然语言逻辑，掌握它对现代 JS 开发至关重要。不复杂但容易忽略细节，比如错误处理和并行优化。