Promise与async/await异步编程实战_js现代开发-js教程-PHP中文网

Promise与async/await异步编程实战_js现代开发

紅蓮之龍

发布： 2025-11-01 15:32:02

原创

346人浏览过

Promise和async/await是现代JavaScript异步编程的核心。Promise通过resolve/reject控制状态，避免回调地狱；async/await以同步语法处理异步操作，提升可读性。实战中用Promise.all实现并发，避免串行阻塞，并结合try/catch确保错误捕获，增强代码健壮性。

promise与async/await异步编程实战_js现代开发

在现代 JavaScript 开发中，异步编程是绕不开的核心概念。早期我们依赖回调函数处理异步操作，但容易陷入“回调地狱”。随着语言的发展，Promise 和 async/await 成为更清晰、可控的解决方案。下面通过实战角度深入理解它们的用法与优势。

Promise：摆脱回调嵌套的基础工具

Promise 表示一个异步操作的最终完成或失败。它有三种状态：pending（进行中）、fulfilled（成功）和 rejected（失败）。一旦状态改变，就不会再变，这保证了异步逻辑的可预测性。

创建一个 Promise 很简单：

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    const success = true;
    if (success) {
      resolve("数据获取成功");
    } else {
      reject("请求失败");
    }
  }, 1000);
});

fetchData
  .then(result => console.log(result))
  .catch(error => console.error(error));

登录后复制

实际开发中，我们常封装网络请求：

立即进入“豆包AI人工智官网入口”；

立即学习“豆包AI人工智能在线问答入口”；

function getJSON(url) {
  return new Promise((resolve, reject) => {
    const xhr = new XMLHttpRequest();
    xhr.open('GET', url);
    xhr.onload = () => {
      if (xhr.status === 200) {
        resolve(JSON.parse(xhr.responseText));
      } else {
        reject(new Error(`请求失败: ${xhr.status}`));
      }
    };
    xhr.onerror = () => reject(new Error('网络错误'));
    xhr.send();
  });
}

登录后复制

使用 .then() 链式调用可以串联多个异步任务：

getJSON('/api/user')
  .then(user => getJSON(`/api/posts?uid=${user.id}`))
  .then(posts => console.log(posts))
  .catch(err => console.error('出错了:', err));

登录后复制

async/await：让异步代码看起来像同步

async 函数本质上是基于 Promise 的语法糖，可以让异步代码写起来更直观，减少 then 的链式嵌套。

将上面的例子改造成 async/await：

async function loadUserData() {
  try {
    const user = await getJSON('/api/user');
    const posts = await getJSON(`/api/posts?uid=${user.id}`);
    console.log(posts);
  } catch (err) {
    console.error('加载失败:', err);
  }
}

loadUserData();

登录后复制

注意点：

豆包AI编程

豆包推出的AI编程助手

483

查看详情

async 函数总是返回一个 Promise
await 只能在 async 函数内部使用
错误需用 try/catch 捕获，否则会静默失败

并发控制与异常处理实战技巧

真实项目中，经常需要同时发起多个请求并等待全部完成。这时可以用 Promise.all：

async function loadAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      getJSON('/api/users'),
      getJSON('/api/posts'),
      getJSON('/api/comments')
    ]);
    console.log({ users, posts, comments });
  } catch (err) {
    console.error('其中一个请求失败:', err);
  }
}

登录后复制

如果希望任一成功即返回，可用 Promise.race；若要所有结果无论成败都返回，使用 Promise.allSettled。

对于顺序执行多个相似任务（如批量上传），可结合数组遍历：

async function uploadFiles(fileList) {
  for (let file of fileList) {
    try {
      await upload(file); // 逐个上传
      console.log(`${file.name} 上传成功`);
    } catch (err) {
      console.error(`${file.name} 上传失败:`, err);
    }
  }
}

登录后复制

常见陷阱与最佳实践

避免滥用 await 导致不必要的串行化。比如两个无关请求应并行执行：

// ❌ 错误：串行等待
const a = await getA();
const b = await getB();

// ✅ 正确：并行发起
const [a, b] = await Promise.all([getA(), getB()]);

登录后复制

始终为 async 函数添加错误处理，尤其是在生产环境中。未捕获的 Promise 错误会触发 unhandledrejection 事件，可能导致应用崩溃。

在前端框架（如 React、Vue）中，通常在副作用中使用 async/await，例如 useEffect 或 onMounted 中启动数据加载，并注意组件卸载时的清理逻辑。

基本上就这些。掌握 Promise 和 async/await 不仅能写出更健壮的异步代码，也为理解现代 JS 生态（如 fetch、EventSource、Web Workers）打下基础。

以上就是Promise与async/await异步编程实战_js现代开发的详细内容，更多请关注php中文网其它相关文章！

大家都在看：

Vue 响应式变量在 Vue 应用中导航不生效的排查与解决 Vue应用中响应式状态丢失？理解全页面刷新与客户端路由对Vue状态管理的影响 Vue 3与Bootstrap 5动态更新Tooltip文本教程 Vue 3动态组件：实现子组件数据回传与状态同步的最佳实践 Vue/Vuetify文本输入框内容溢出检测教程