9-2 有备无患-异步编程与异常处理实践

汇报人：xxx时间：2026二号任务有备无患——异步编程与异常处理实践任务说明01本任务将基于已有的图片上传与Canvas图像处理功能，新增异步网络请求模拟目标检测数据、性能计时和异常处理功能。通过单击按钮，用户可以在图像上看到目标检测的边框标注，同时在控制台和页面上获取请求耗时及错误信息，完成异步编程与异常处理实践。二号任务任务说明知识准备0201Promise与异步编程范式目录JS异常处理02JS异常处理最佳实践031.Promise与异步编程范式知识准备（1）异步编程的必要性在开始深入学习Promise之前，我们需要理解为什么JS需要异步编程。想象一个生活中的场景：当你在快餐店点餐时，你必须站在柜台前等待食物准备完毕才能离开——这就像同步编程；而在一家服务不错的餐厅，点完单后你可以先坐下来做其他事情，等食物准备好服务员会送到你的桌前——这就是异步编程的思想。在前端开发中，很多操作都可能需要相对较长时间才能完成，比如，从服务器获取数据、读取或处理大文件、处理用户输入、处理复杂计算。如果使用同步方式执行这些操作，网页就会“卡住”，导致用户无法进行任何其他操作。这就是为什么我们需要异步编程。（2）Promise：处理异步操作的优雅方式Promise是JS提供的一种处理异步操作的标准方案。你可以把它想象成一张“承诺票据”，代表了一个未来才会知道结果的操作。让我们通过一个完整的例子来理解Promise的工作机制。1.Promise与异步编程范式知识准备Promise共有以下3种状态。

pending（等待中）：初始状态，既未完成也未失败。fulfilled（已完成）：操作成功完成。

rejected（已失败）：操作失败。

Promise的特点如下。状态一旦改变，就不会再变化。支持链式调用，避免回调“地狱”。提供统一的错误处理机制。可以轻松处理并行操作。1.Promise与异步编程范式知识准备（3）async/await：更直观的异步处理async/await是ES2017引入的语法，它让异步代码看起来更像同步代码，更容易理解。在浏览器控制台中运行以下代码。AI助手给出的代码说明如图所示。1.Promise与异步编程范式知识准备（4）并发控制在实际开发中，我们经常需要同时处理多个异步操作。比如一个电商网站的商品详情页面，我们可能需要同时获取商品基本信息、库存状态、用户评价等多个数据。Promise提供了几种强大的并发控制方法，下面一一介绍。①Promise.all：等待所有任务完成。Promise.all就像是一位耐心的主持人，等待所有表演者都准备就绪才宣布开始演出。它接收一个Promise数组，并返回一个新的Promise，只有当所有Promise都成功时才会成功。②Promise.race：竞速模式。有时我们希望只要有一个任务完成就继续执行，这时可以使用Promise.race。③Promise.allSettled：获取所有结果。如果我们想知道每个Promise的结果（无论成功还是失败），可以使用Promise.allSettled。通过一个示例来展示它们的不同用途和特点，请在浏览器控制台中运行以下代码：教材示例展示了3种关键的Promise并发控制方法，它们的主要特点如下。Promise.all适合当你需要所有请求都成功的场景。Promise.race适合需要获取最快响应的场景。Promise.allSettled适合需要知道每个请求结果的场景，即使部分请求失败。2.异常处理知识准备（1）异常的本质在进行异常处理之前，让我们来了解什么是异常。想象你在使用一台咖啡机。有时水箱可能空了（资源不足错误）。有时可能按错了按钮（操作错误）。有时机器可能会出现故障（系统错误）。 在编程中，异常也是类似的概念——它表示程序在运行过程中遇到了意外情况，对异常进行处理的主要目的是使程序能够在遇到问题时继续稳定运行或安全退出。（2）异常的分类 JS中的异常可以分为以下几类。2.异常处理知识准备（3）异常处理机制想象你正在开车。当你遇到不同的道路状况时，你会采取不同的应对措施：遇到红灯会停下，看到前方施工会绕道，遇到紧急情况会报警。程序的异常处理机制也是类似的原理，处理各种问题后能够重新回到正确的处理流程上。①try...catch...finally基本结构Try...catch...finally结构就像是一个完整的应急预案，说明如下。try块就像是我们正常行驶的道路。catch块就像是遇到问题时的应对措施。finally块就像是无论发生什么都必须完成的收尾工作。2.异常处理知识准备（3）异常处理机制想象你正在开车。当你遇到不同的道路状况时，你会采取不同的应对措施：遇到红灯会停下，看到前方施工会绕道，遇到紧急情况会报警。程序的异常处理机制也是类似的原理，处理各种问题后能够重新回到正确的处理流程上。②异常的传播机制异常传播就像警报系统，从问题发生的地方开始，沿着函数调用链向上传递，直到遇到能够处理它的代码。这个过程称为“异常冒泡”。例如，在一个多层调用函数中，如果底层函数抛出异常但没有处理，异常会传递给调用它的函数；如果该函数也没有处理，异常就会继续向上传递；最终要么被某个函数的catch块捕获，要么到达全局作用域并导致程序崩溃。2.异常处理知识准备（3）异常处理机制想象你正在开车。当你遇到不同的道路状况时，你会采取不同的应对措施：遇到红灯会停下，看到前方施工会绕道，遇到紧急情况会报警。程序的异常处理机制也是类似的原理，处理各种问题后能够重新回到正确的处理流程上。③自定义错误类型JS中的内置错误类型（如Error、TypeError、ReferenceError等）无法覆盖所有的业务场景。因此，通过创建自定义错误类型，我们可以更精确地描述和处理特定场景下的错误。所有自定义错误都应该继承自Error类。一个好的自定义错误应该满足下面几点。提供清晰的错误名称，帮助开发者快速识别错误类型。包含足够的上下文信息，便于调试和处理。维护正确的原型链，确保instanceof检查有效。保留完整的堆栈跟踪信息。3.异常处理最佳实践知识准备任务实现03任务实现1.新增异步目标检测功能编写一个新的检测模块（AsyncDetector类），用于模拟通过网络请求获取目标检测数据。采用Promise与async/await语法，在模拟网络延时后返回检测数据（包括目标的坐标、宽度、高度及标签）。在目标检测请求中，通过console.time与console.timeEnd对检测请求耗时进行计时，并在出现异常时使用try...catch捕获错误，确保请求失败时能向用户提供友好提示。2.改写目标检测数据的Canvas标注为目标标注部分增加异常处理，确保绘制过程中的错误不会影响其他功能。任务实现3.性能监控与异常处理的完善在新增的异步目标检测模块中，通过try...catch捕获网络请求、数据解析等过程中的错误，并记录详细日志。对关键异步操作（如目标检测请求）加入console.time/console.timeEnd计时，方便观察实际耗时，便于后续优化。在用户单击“异步检测目标（模拟数据）”按钮后，将检测请求结果和性能数据显示在页面的结果展示区域，以便用户直观了解操作状态。4.控制按钮事件绑定在原有按钮功能的基础上，新增“异步检测目标”按钮的事件处理。当用户单