如何在Promise链中处理Promise.reject()抛出的错误?

简介: 如何在Promise链中处理Promise.reject()抛出的错误?

在Promise链中,可以通过多种方式处理Promise.reject()抛出的错误,以下是一些常见的方法:

使用catch方法

在Promise链中,catch方法专门用于捕获链中任何一个Promise被拒绝时抛出的错误。当Promise.reject()被调用时,控制流会立即跳转到最近的catch方法。

Promise.reject(new Error('这是一个错误'))
 .then(() => {
   
    // 这里不会被执行
    console.log('成功');
  })
 .catch((error) => {
   
    console.log('捕获到错误:', error.message);
  });

使用finally方法

finally方法无论Promise是成功还是失败都会执行,通常用于执行一些清理操作,但也可以在finally中处理错误状态,不过它不能阻止错误继续向上传播。

Promise.reject(new Error('这是一个错误'))
 .finally(() => {
   
    // 可以在这里进行一些资源释放等操作
    // 也可以根据需要重新抛出错误或进行其他处理
    try {
   
      // 尝试执行一些可能会出错的清理操作
    } catch (error) {
   
      console.log('finally中捕获到错误:', error.message);
    }
  });

在多个then中处理

每个then方法都可以接受两个参数,第一个是成功回调,第二个是失败回调。可以在失败回调中处理Promise.reject()抛出的错误。

Promise.reject(new Error('这是一个错误'))
 .then(
    () => {
   
      // 成功回调,不会执行
      console.log('成功');
    },
    (error) => {
   
      console.log('捕获到错误:', error.message);
    }
  );

多层Promise链处理

在多层Promise链中,错误会一直向上传播,直到被catch捕获。

const promise1 = Promise.reject(new Error('第一层错误'));

const promise2 = promise1.then(() => {
   
  // 这里不会被执行
  return '成功';
});

const promise3 = promise2.catch((error) => {
   
  console.log('第二层捕获到错误:', error.message);
  // 可以选择在这里继续返回一个Promise,或者处理完错误后返回一个值
  return '错误已处理';
});

promise3.then((result) => {
   
  console.log('最终结果:', result);
});

使用async/await结合try/catch

async/await语法可以让异步代码看起来更像同步代码,使用try/catch可以方便地捕获Promise.reject()抛出的错误。

async function test() {
   
  try {
   
    await Promise.reject(new Error('这是一个错误'));
  } catch (error) {
   
    console.log('捕获到错误:', error.message);
  }
}

test();
相关文章
|
存储 开发工具 git
Vscode 拉取代码时出现 在签出前 请先清理仓库工作树
Vscode 拉取代码时出现 在签出前 请先清理仓库工作树
3912 0
|
10月前
|
JSON JavaScript Android开发
原生与 Uniapp 的通信机制是如何实现双向调用的?
原生与 Uniapp 的通信机制是如何实现双向调用的?
1229 137
|
10月前
|
canal 关系型数据库 MySQL
数据同步神器-Canal
Canal是阿里巴巴开源的MySQL增量日志解析工具,通过模拟MySQL主从复制机制,实时捕获数据库变更,实现数据同步至Kafka、Elasticsearch等系统,广泛应用于数据同步、监控、备份与迁移场景。
7226 5
|
存储 缓存 JavaScript
NPM怎样清空缓存
NPM怎样清空缓存
|
前端开发 JavaScript 应用服务中间件
前端跨域问题解决Access to XMLHttpRequest at xxx from has been blocked by CORS policy
跨域问题是前端开发中常见且棘手的问题,但通过理解CORS的工作原理并应用合适的解决方案,如服务器设置CORS头、使用JSONP、代理服务器、Nginx配置和浏览器插件,可以有效地解决这些问题。选择合适的方法可以确保应用的安全性和稳定性,并提升用户体验。
9634 90
|
JavaScript
echarts_自定义graph关系图
echarts_自定义graph关系图
1182 0
|
JavaScript 前端开发 算法
高效工作流:用Mermaid绘制你的专属流程图;如何在Vue3中导入mermaid绘制流程图
mermaid是一款非常优秀的基于 JavaScript 的图表绘制工具,可渲染 Markdown 启发的文本定义以动态创建和修改图表。非常适合新手学习或者做一些弱交互且自定义要求不高的图表 除了流程图以外,mermaid还支持序列图、类图、状态图、实体关系图等图表可供探索。 博客不应该只有代码和解决方案,重点应该在于给出解决方案的同时分享思维模式,只有思维才能可持续地解决问题,只有思维才是真正值得学习和分享的核心要素。如果这篇博客能给您带来一点帮助,麻烦您点个赞支持一下,还可以收藏起来以备不时之需,有疑问和错误欢迎在评论区指出~
|
资源调度 JavaScript API
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
【Vue2 / Vue3】 一个贼nb,贼强大的自定义打印插件
14068 120