Promise 中 then 和 catch 方法参数的使用技巧

面试官:小伙子,你的代码为什么这么丝滑?

Promise 在前端开发中被广泛应用,通过 Promise 帮助我们处理异步操作,避免回调陷阱和层层嵌套。then 和 catch 方法是 Promise 的两个常用方法,本文将从具体应用和实际效果出发,深入解读 then 和 catch 方法的参数使用技巧,以提高代码质量和开发效率。

then 方法参数

then 方法的参数有两个:一个是成功状态的回调函数,一个是失败状态的回调函数。在 then 方法执行的过程中,会根据 Promise 的当前状态来执行相应的回调函数。正确的 then 方法的使用技巧可以使代码的可维护性、可读性、可测试性得到提升。

成功状态回调函数

成功状态回调函数是 then 方法的第一个参数,一般来说,后续的操作都在这个回调函数中进行。其参数即为 Promise 所 resolve 的值,可以根据该值来完成后续的操作。

-------- --------------- -
  ------ --------------
    -------------- -- ----------------
    ---------- -- -
      ------------------
      -- -------
    ---
-

在 fetchUserData 函数中,我们通过 fetch 方法向服务端发送请求,成功后将接口返回的 JSON 数据作为当前 Promise 的 resolve 值,并进入下一个 then 操作。在 then 操作中,我们打印出日志以便调试,并进行下一步数据处理。

失败状态回调函数

失败状态回调函数是 then 方法的第二个参数,在 Promise 的状态变为 reject 时执行。在使用 then 方法的时候,没有传入失败状态回调函数,Promise 异常会被传递到下一个 catch 方法中,通常用于对异常的统一处理。

-------- --------------- -
  ------ --------------
    -------------- -- ----------------
    ---------- -- -
      ------------------
      -- -------
    -- ----- -- -
      ---------------------
      -- -------
    ---
-

在 fetchUserData 函数中,我们添加了失败状态回调函数,用于捕获并处理接口请求失败的异常。如果请求失败,将打印具体的错误信息,并执行处理失败的流程。

catch 方法参数

catch 方法是 Promise 原型链上的方法,它用于处理 Promise 执行产生的 reject,接收参数即为 reject 的原因(Error 类型)。catch 方法有一个最大的优点:能够处理直接抛出异常的函数。

-------- --------------- -
  ------ --------------
    -------------- -- ----------------
    ---------- -- -
      ------------------
      -- -------
      ----- --- ---------------- --- -----------
    --
    ------------ -- -
      ---------------------
      -- ----
    ---
-

在 fetchUserData 函数中,我们通过 throw 来模拟抛出一个未知异常。在 catch 方法中,我们将无差别地捕获所有的异常,并进行相应的处理。

抛错

then 方法和 catch 方法都会返回一个新的 Promise 对象。如果回调函数中抛出了任何异常,后续的 catch 方法会捕获到该异常,并将 Promise 状态变为 reject。

-------- ----------- -
  ------ -------------
    -------------- -- ----------------
    ---------- -- -
      -- ------- -
        ----- --- --------- --------
      -
      ------ -----
    --
    ------------ -- -
      ---------------------
      ----- ------
    ---
-

-----------
  ---------- -- -
    ------------------
  --
  ------------ -- -
    ---------------------
  ---

在 fetchData 函数中,我们首先通过 fetch 方法异步请求 API,然后将响应体转化为 JSON 数据,并判断数据是否为空。如果数据为空,则抛出 No data! 的异常。在 catch 方法中,我们捕获并打印异常,并向调用者 rethrow 异常。在调用 fetchData 的 then 方法时,我们接收到 fetchData 返回的 Promise,然而其状态为 reject,进入下一个 catch 操作,并打印异常日志。

结论

综上,then 方法和 catch 方法是 Promise 的常用方法之一,正确的使用方式可提高代码质量、可维护性和可读性。根据实际业务需求来选择适合的回调函数,可以让代码逻辑更加清晰。在项目开发时,不妨尝试从不同的角度出发,不断探究和引入更多的 JavaScript 技巧,来优化编码流程和提高开发效率。

来源:JavaScript中文网 ,转载请联系管理员! 本文地址:https://www.javascriptcn.com/post/670a36a3d91dce0dc87fb610


猜你喜欢

  • 使用 Deno 构建一个简单的电子商务网站

    介绍 Deno 是一个由 Ryan Dahl 创建的运行时环境,用于在 JavaScript 和 TypeScript 上构建可扩展的网络应用程序。它是 Node.js 的替代品,通常被称为“安全 N...

    5 天前
  • TypeScript 和 React 的高和低股票交易应用程序

    随着全球股票市场的不断发展,越来越多的人开始尝试在股票市场中获得利润。这也导致了越来越多的人开始关注股票交易应用程序的开发。在本文中,我们将介绍 TypeScript 和 React 结合开发的高和低...

    5 天前
  • Serverless 架构考虑的事项

    Serverless 架构是一种新型的技术架构,它将服务器抽象化,由云服务商负责底层架构管理。在这种架构下,开发者能够通过编写业务逻辑代码,而无需关心底层服务器的部署、配置和维护等问题。

    5 天前
  • Docker 容器中如何实现数据备份和还原

    引言 Docker 是目前最流行的容器技术,它解决了传统应用部署的很多问题,比如运行环境的不一致,应用间的冲突等。但是,在容器中使用数据时需要更多的注意,因为数据是容器中最重要的资产之一,因此,备份和...

    5 天前
  • RxJS 中的快排操作符使用指南

    前言 RxJS 是一个很有用的库,用于处理事件流。RxJS 提供了许多操作符,其中包括一个快排操作符,可以实现一个非常快速和高效的排序功能。本文将详细介绍 RxJS 中的快排操作符的使用,为学习 Rx...

    5 天前
  • CSS Grid 实现响应式布局全面指南

    CSS Grid 是一个用于网格化布局的 CSS 模块,它可以让你创建复杂的布局并轻松地控制各个部分的位置和大小。通过 CSS Grid,你可以快速创建响应式布局,这意味着你的布局可以自适应不同设备和...

    5 天前
  • Mocha 测试框架中遇到的 “Error: timeout of 2000ms exceeded” 的解决方法

    在前端开发中,测试是非常重要的一环节。Mocha 是一款流行的 JavaScript 测试框架,它提供了丰富的 API 和插件来帮助开发人员编写自动化测试用例。然而,在使用 Mocha 进行测试时,有...

    5 天前
  • Web Components 跨浏览器兼容性问题探究与解决

    Web Components 是一种新的网页组件开发技术,它将 HTML、CSS 和 JavaScript 组合在一起,实现了可复用的、独立的组件。Web Components 设计之初就考虑到跨浏览...

    5 天前
  • JavaScript 中深拷贝和浅拷贝的实现方法及其区别

    在 JavaScript 编程中,深拷贝和浅拷贝是两个重要的概念。深拷贝指的是将一个对象的所有属性值都复制到一个新的对象中,而浅拷贝则只是将对象的引用复制到一个新的对象中。

    5 天前
  • Redis 优化:如何压缩内存占用

    Redis 优化:如何压缩内存占用 Redis 是一款非常流行的高性能键值存储系统,它能够支持各种不同的数据结构,如字符串、列表、集合、哈希表和有序集合等。同时,Redis 在数据存储的同时还提供了各...

    5 天前
  • 用 CSS Reset 来平滑你的样式体验

    在进行前端开发时,我们会使用 CSS 来为网页添加样式。但是由于不同浏览器对于 HTML 元素默认样式的不同,使得在不同浏览器中显示的样式有所差异,这会严重影响用户对网页的体验。

    5 天前
  • MongoDB 中的集合分区详解

    MongoDB 是一个非常流行的 NoSQL 数据库,在大数据处理方面有很好的表现。它可以支持非常高的读写能力,以及大规模的数据存储。然而,在处理大规模数据时,单节点 MongoDB 的性能很容易受到...

    5 天前
  • 如何使用 GraphQL 进行数据层的开发工作

    GraphQL 是一种比传统 REST API 更为灵活和高效的数据查询语言,当今前端开发中越来越受到欢迎。它可以帮助我们快速地定义数据模型和数据查询方式,并且让前端开发者更能够在数据交互方面发挥自己...

    5 天前
  • 正确理解 Node.js 中先进后出的栈数据结构

    在 Node.js 中,栈是一个常见的数据结构。栈通常被用来解决程序中有哪些操作被最后执行的问题,或者需要按照相反的顺序排列数据的问题。本文将详细介绍 Node.js 中的栈数据结构,并提供示例代码和...

    5 天前
  • SASS 编译器的选择与使用推荐

    在前端开发中,CSS 是非常重要的一个部分。然而,纯 CSS 代码书写起来往往繁琐,且难以维护,这时就需要一种能够帮助我们提高效率和代码可维护性的工具。SASS 就是这样一种工具,它是 CSS 的扩展...

    5 天前
  • 如何评测 Web 应用的无障碍访问

    引言 随着互联网的普及,越来越多的人使用 Web 应用程序。然而,很多人可能不知道,其中一部分用户因生理、感知、认知等原因,无法像大多数人一样自由地访问 Web 应用程序。

    5 天前
  • SSE 使用中的坑:浏览器异常断开请求和 WebSocket 并用等

    简介 SSE(Server-Sent Events)是一种轻量级的服务器推送技术,允许 Web 服务器向浏览器发送数据,实现了服务器与前端的实时数据交互。相较于 WebSocket,SSE 的实现更为...

    5 天前
  • 如何使用 React 构建可复用的 UI 组件库

    前言 React 是目前最流行的前端 UI 库之一,它具有高效、可维护的特性,允许开发人员构建复杂的应用程序。在实际项目开发中,随着项目规模的扩大,很多时候需要设计并构建一些可复用的组件,方便在不同场...

    5 天前
  • Jest 测试中的 Global Setup 与 Teardown 技术详解

    前言 在前端开发中,测试是极其重要的一项工作。无论是为了保证代码质量、提高生产效率还是预防程序出 bug,都需要进行各种测试。而 Jest 是目前前端测试中非常流行的框架,它除了可以进行单元测试、集成...

    5 天前
  • 如何使用 Fastify 应用程序与 MongoDB 数据库交互

    在前端开发中,与数据库进行交互是必不可少的。在这篇文章中,我们将学习如何使用 Fastify 应用程序与 MongoDB 数据库进行交互,以便快速构建出一个高性能的应用程序。

    5 天前

相关推荐

    暂无文章