讲师中心 微信公众号

工具推荐

视频效率加速
立刻MV
立刻MV

低成本歌曲 MV、视频生成

Laper
Laper

剧本策划到成片协作

AniShort
AniShort

AI短剧协同制作平台

Seko
Seko

AI短剧一键生成成片

JavaScript异步编程_掌握Promise与Async/Await

星静君_9416

星静君_9416

发布时间:2025-11-27 18:52:02

|

906人浏览过

|

来源于php中文网

原创

JavaScript异步编程核心是Promise和Async/Await。1. Promise解决回调地狱,有pending、fulfilled、rejected三种状态,通过then/catch链式调用;2. Async/Await基于Promise,用同步语法写异步代码,需配合try/catch处理错误;3. 实际使用中,Promise.all用于并发请求,Promise.race/any获取最快结果,建议始终用try/catch捕获异常,确保代码健壮性。

javascript异步编程_掌握promise与async/await

JavaScript 是单线程语言,为了不阻塞主线程,异步编程是处理耗时操作(如网络请求、文件读取)的核心机制。随着语言的发展,Promise 和 Async/Await 极大地提升了异步代码的可读性和可维护性。掌握它们是现代前端开发的必备技能。

理解 Promise:解决回调地狱的基础

在 ES6 之前,异步操作依赖回调函数,多层嵌套容易形成“回调地狱”,代码难以维护。Promise 的出现让异步逻辑更清晰。

Promise 是一个对象,表示异步操作的最终完成或失败。它有三种状态:

  • pending:初始状态,既未成功也未失败
  • fulfilled:操作成功完成
  • rejected:操作失败

一旦状态改变,就不会再变,这保证了可靠性。

立即学习“Java免费学习笔记(深入)”;

创建一个 Promise 示例:

const fetchData = new Promise((resolve, reject) => {
  if (/* 操作成功 */) {
    resolve("数据获取成功");
  } else {
    reject("请求失败");
  }
});

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

使用 then 处理成功,catch 处理失败。链式调用还能实现多个异步操作顺序执行:

fetchData
  .then(step1)
  .then(step2)
  .then(step3)
  .catch(err => console.log("出错:", err));

Async/Await:让异步代码像同步一样直观

Async/Await 是基于 Promise 的语法糖,使代码更简洁、更易理解。函数前加上 async,内部可用 await 等待 Promise 完成。

HISUI 前端框架开发指南(IRIS版)
HISUI 前端框架开发指南(IRIS版)

HISUI 前端框架基础开发指南。HISUI 是基于 easyui 二次开发的 jQuery UI 组件库,专为医疗信息系统设计。当涉及 HISUI 组件开发、jQuery easyui 表格/表单/布局/窗口、医疗系统前端页面编写时使用此 skill。 涵盖 40 个组件的官方文档参考,支持声明式与编程式两种初始化方式,提供 $cm/$m 数据访问方法。

下载

基本写法:

async function getData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error("请求异常:", error);
  }
}
getData();

优点很明显:避免了层层 then,错误统一用 try/catch 捕获,逻辑更线性。

注意:await 只能在 async 函数 内部使用,否则会报错。

常见使用场景与最佳实践

实际开发中,结合 Promise 和 Async/Await 能高效处理各种异步任务。

比如并发请求,可以用 Promise.all 等待多个请求全部完成:

async function loadAllData() {
  try {
    const [users, posts, comments] = await Promise.all([
      fetch('/api/users').then(res => res.json()),
      fetch('/api/posts').then(res => res.json()),
      fetch('/api/comments').then(res => res.json())
    ]);
    return { users, posts, comments };
  } catch (error) {
    console.error("加载失败:", error);
  }
}

如果只关心最快的结果,可用 Promise.race 或 Promise.any,按需选择。

错误处理建议始终使用 try/catch 包裹 await 语句,避免未捕获的 Promise rejection。

基本上就这些。Promise 奠定了现代异步结构,Async/Await 让写法更优雅。两者结合,能写出清晰、健壮的异步代码。

相关文章

编程速学教程(入门课程)
编程速学教程(入门课程)

编程怎么学习?编程怎么入门?编程在哪学?编程怎么学才快?不用担心,这里为大家提供了编程速学教程(入门课程),有需要的小伙伴保存下载就能学习啦!

下载

本站声明:本文内容由网友自发贡献,版权归原作者所有,本站不承担相应法律责任。如您发现有涉嫌抄袭侵权的内容,请联系admin@php.cn

热门AI工具

更多
PixTV
PixTV Hot

PixTV是一款面向AIGC内容创作的AI视频生成工具。

VibeKnow
VibeKnow Hot

一款AI视频创作工具,主要用于全球首个AI知识视频创作平台,文档、文章、网页,一键生成视频,适合需要提升相关任务效率的用户。

墨刀AI
墨刀AI Hot

一款AI图像与设计工具,主要用于产品经理的专属智能体,适合需要提升相关任务效率的用户。

二狗PPT
二狗PPT Hot

一款AI演示文稿工具,主要用于专为中式职场打造的AI PPT生成工具,适合需要提升相关任务效率的用户。

咔片AIPPT

一款在线AI演示文稿制作工具,可根据主题和内容需求辅助生成PPT结构与页面,提高演示材料制作效率。

DeepSeek

DeepSeek是一款面向对话、写作、编程和推理场景的AI大模型工具。

豆包大模型

豆包大模型是一款由字节跳动推出的企业级大语言模型服务平台。

Laper
Laper Hot

Laper是专为编剧、导演和制片人推出的 AI 原生剧本创作工具。

WorkBuddy

一款AI办公效率工具,主要用于腾讯云推出的AI原生桌面智能体工作台,适合需要提升相关任务效率的用户。

相关专题

更多
json数据格式
json数据格式

JSON是一种轻量级的数据交换格式。本专题为大家带来json数据格式相关文章,帮助大家解决问题。

2295

2023.08.07

json是什么
json是什么

JSON是一种轻量级的数据交换格式,具有简洁、易读、跨平台和语言的特点,JSON数据是通过键值对的方式进行组织,其中键是字符串,值可以是字符串、数值、布尔值、数组、对象或者null,在Web开发、数据交换和配置文件等方面得到广泛应用。本专题为大家提供json相关的文章、下载、课程内容,供大家免费下载体验。

3762

2023.08.23

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

1256

2023.10.13

go语言处理json数据方法
go语言处理json数据方法

本专题整合了go语言中处理json数据方法,阅读专题下面的文章了解更多详细内容。

4359

2025.09.10

es6新特性
es6新特性

es6新特性有:1、块级作用域变量;2、箭头函数;3、模板字符串;4、解构赋值;5、默认参数;6、 扩展运算符;7、 类和继承;8、Promise。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

305

2023.07.17

es6新特性有哪些
es6新特性有哪些

es6的新特性有:1、块级作用域;2、箭头函数;3、解构赋值;4、默认参数;5、扩展运算符;6、模板字符串;7、类和模块;8、迭代器和生成器;9、Promise对象;10、模块化导入和导出等等。本专题为大家提供es6新特性的相关的文章、下载、课程内容,供大家免费下载体验。

406

2023.08.04

JavaScript ES6新特性
JavaScript ES6新特性

ES6是JavaScript的根本性升级,引入let/const实现块级作用域、箭头函数解决this绑定问题、解构赋值与模板字符串简化数据处理、对象简写与模块化提升代码可读性与组织性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

395

2025.12.24

scripterror怎么解决
scripterror怎么解决

scripterror的解决办法有检查语法、文件路径、检查网络连接、浏览器兼容性、使用try-catch语句、使用开发者工具进行调试、更新浏览器和JavaScript库或寻求专业帮助等。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

1069

2023.10.18

Postman身份认证怎么配置
Postman身份认证怎么配置

本专题从实际API接口调试场景出发,讲解Postman身份认证的完整配置流程,包括常见认证协议介绍、授权参数设置、访问令牌填写、OAuth 2.0授权及认证失败排查,帮助用户正确完成接口授权与访问验证。

60

2026.11.06

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
Workerman官方手册
Workerman官方手册

共0课时 | 0人学习

Swoole手册
Swoole手册

共0课时 | 0人学习

关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn