Chaper 09 深入理解Promise

2024-09-02 07:28
文章标签 深入 理解 promise 09 chaper

本文主要是介绍Chaper 09 深入理解Promise,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

文章目录

  • 前言
  • 一、异步编程
  • 二、Promise


前言

在JavaScript中,异步编程是一个重要的概念。随着应用程序的复杂性增加,处理异步操作的方式也变得更加复杂。Promise是一种用于处理异步操作的对象,它提供了一种更清晰和更强大的方式来管理异步代码。本章详细讲解了Promise的基本用法以及链式调用。

一、异步编程

①定义
异步编程是一种编程范式,它允许程序在执行某些操作时不阻塞主线程,从而提高应用程序的效率和响应性。在异步编程中,程序可以在等待某些操作(如网络请求、文件读取或数据库查询)完成的同时继续执行其他任务。

②关键概念

  • 非阻塞:在异步编程中,程序不会等待某个操作完成后再继续执行,而是可以同时处理多个操作。即使某个操作需要较长时间,程序仍然可以响应用户输入或执行其他任务。
  • 回调函数:传统的异步编程通常使用回调函数来处理异步操作的结果。当异步操作完成时,回调函数会被调用。这种方式可能导致“回调地狱”,使代码难以阅读和维护。
  • Promise:Promise是JavaScript中处理异步操作的一种方式。它表示一个可能在未来某个时间点完成的操作,并提供了thencatch方法来处理成功和失败的结果。
  • async/awaitasyncawait是ES2017引入的语法糖,使得异步代码看起来更像同步代码。使用async关键字定义一个异步函数,并在函数内部使用await来等待Promise的结果。

【示例】
以下是一个简单的异步编程示例,使用setTimeout模拟异步操作:

console.log("开始");setTimeout(() => {console.log("异步操作完成");
}, 2000);console.log("结束");

运行结果:
开始
结束
异步操作完成

【分析】
setTimeout 函数设置了一个异步操作,该操作会在2秒后执行,输出“异步操作完成”。

二、Promise

①基本概念
Promise是一个表示异步操作最终完成(或失败)及其结果值的对象。Promise有以下三种状态:

  • Pending(待定): 初始状态,既不是成功,也不是失败。
  • Fulfilled(已兑现): 操作成功完成。
  • Rejected(已拒绝): 操作失败。

一旦Promise的状态从Pending变为Fulfilled或Rejected,就不能再改变。

②基本用法

const myPromise = new Promise((resolve, reject) => {  const success = true; // 模拟成功或失败  if (success) {  resolve("操作成功!");  } else {  reject("操作失败!");  }  
});  myPromise  .then(result => {  console.log(result); // 输出: 操作成功!  })  .catch(error => {  console.error(error); // 输出: 操作失败!  });  
  • new Promise(...):Promise构造函数,用于创建一个新的Promise对象。该构造函数接受一个执行器函数作为参数。
  • (resolve, reject) => { ... }:执行器函数,是一个回调函数,在Promise创建时立即执行,它包含了异步操作的逻辑。
    • 参数resolve: 一个函数,用于将Promise的状态从“待定”(Pending)变为“已兑现”(Fulfilled)。当异步操作成功完成时调用它,并传递结果值。
    • 参数reject: 一个函数,用于将Promise的状态从“待定”(Pending)变为“已拒绝”(Rejected)。当异步操作失败时调用它,并传递错误信息。
  • const success = true;:定义了一个变量success,用于模拟异步操作的结果。
  • resolve("操作成功!");:成功回调。当successtrue时,调用resolve函数并传递字符串“操作成功!”作为结果。此时,Promise的状态变为“已兑现”,并将结果传递给后续的then方法进行处理。
  • reject("操作失败!");:失败回调。当successfalse时,调用reject函数并传递字符串“操作失败!”作为错误信息。此时,Promise的状态变为“已拒绝”,并将错误信息传递给后续的catch方法进行处理。
  • myPromise.then(...):处理成功结果。 then方法用于处理Promise成功兑现后的结果。它接受一个回调函数作为参数,该函数将在Promise成功时被调用,并接收resolve传递的结果。
  • .catch(...):处理失败结果。catch方法用于处理Promise被拒绝后的错误。它接受一个回调函数作为参数,该函数将在Promise失败时被调用,并接收reject传递的错误信息。

【示例】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 使用Promise管理异步任务 */// 1.创建Promise对象const myPromise=new Promise((resolve,reject)=>{// 2.执行异步代码setTimeout(()=>{resolve('模拟AJAX请求——成功结果')},2000)})// 3.获取结果myPromise.then(result=>{console.log(result)}).catch(err=>{console.log(error)})</script>
</body>
</html>

运行结果:
在这里插入图片描述
异步代码修改为如下:

setTimeout(()=>{reject(new Error('模拟AJAX请求——失败结果'))},2000)

运行结果:
在这里插入图片描述

③链式调用
定义:
Promise允许开发者处理异步操作,并通过then()方法返回一个新的Promise,从而实现链式调用。每个then()方法可以接收前一个Promise的结果,并返回一个新的Promise,继续进行后续的操作。

优点:

  • 清晰性:代码没有深层嵌套而是通过链式调用串联在一起,避免了深层嵌套,代码逻辑更清晰。
  • 异步处理:通过链式调用,Promise的每一部分都是独立的,可以轻松处理多个异步操作。
  • 错误处理:如果在任意一个then中抛出错误,整个链的后续部分都可以通过catch()方法捕获和处理,避免了传统回调的错误传递问题。

【注意】
then()回调函数中的返回值,会影响新生成的Promise对象的最终状态和结果

【示例】

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><meta name="viewport" content="width=device-width, initial-scale=1.0"><title>Document</title>
</head>
<body><script>/* 目标:掌握Promise的链式调用需求:把省市的嵌套结构改成链式调用的学校结果*/// 1.创建Promise对象——模拟请求省份名字const p=new Promise((resolve,reject)=>{// 2.执行异步代码setTimeout(()=>{resolve('北京市')},2000)})// 3.获取省份名字const p2=p.then(result=>{console.log(result)// 4.创建Promise对象——模拟请求城市名字// return Promise对象最终状态和结果会影响新的Promise对象return new Promise((resolve,reject)=>{setTimeout(()=>{resolve(result+'---北京')},2000)})})// 5.获取城市名字p2.then(result=>{console.log(result)})</script>
</body>
</html>

运行结果:
在这里插入图片描述
【分析】
这段代码通过链式调用的方式处理异步操作。首先,通过Promise获取省份,然后在获取成功后继续获取城市,保持代码结构清晰可读且不容易出现回调地狱的情况。在这里插入图片描述

这篇关于Chaper 09 深入理解Promise的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/1129359

相关文章

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

认识、理解、分类——acm之搜索

普通搜索方法有两种:1、广度优先搜索;2、深度优先搜索; 更多搜索方法: 3、双向广度优先搜索; 4、启发式搜索(包括A*算法等); 搜索通常会用到的知识点:状态压缩(位压缩,利用hash思想压缩)。

深入探索协同过滤:从原理到推荐模块案例

文章目录 前言一、协同过滤1. 基于用户的协同过滤(UserCF)2. 基于物品的协同过滤(ItemCF)3. 相似度计算方法 二、相似度计算方法1. 欧氏距离2. 皮尔逊相关系数3. 杰卡德相似系数4. 余弦相似度 三、推荐模块案例1.基于文章的协同过滤推荐功能2.基于用户的协同过滤推荐功能 前言     在信息过载的时代,推荐系统成为连接用户与内容的桥梁。本文聚焦于

【生成模型系列(初级)】嵌入(Embedding)方程——自然语言处理的数学灵魂【通俗理解】

【通俗理解】嵌入(Embedding)方程——自然语言处理的数学灵魂 关键词提炼 #嵌入方程 #自然语言处理 #词向量 #机器学习 #神经网络 #向量空间模型 #Siri #Google翻译 #AlexNet 第一节:嵌入方程的类比与核心概念【尽可能通俗】 嵌入方程可以被看作是自然语言处理中的“翻译机”,它将文本中的单词或短语转换成计算机能够理解的数学形式,即向量。 正如翻译机将一种语言

【C++高阶】C++类型转换全攻略:深入理解并高效应用

📝个人主页🌹:Eternity._ ⏩收录专栏⏪:C++ “ 登神长阶 ” 🤡往期回顾🤡:C++ 智能指针 🌹🌹期待您的关注 🌹🌹 ❀C++的类型转换 📒1. C语言中的类型转换📚2. C++强制类型转换⛰️static_cast🌞reinterpret_cast⭐const_cast🍁dynamic_cast 📜3. C++强制类型转换的原因📝

深入手撕链表

链表 分类概念单链表增尾插头插插入 删尾删头删删除 查完整实现带头不带头 双向链表初始化增尾插头插插入 删查完整代码 数组 分类 #mermaid-svg-qKD178fTiiaYeKjl {font-family:"trebuchet ms",verdana,arial,sans-serif;font-size:16px;fill:#333;}#mermaid-svg-

深入理解RxJava:响应式编程的现代方式

在当今的软件开发世界中,异步编程和事件驱动的架构变得越来越重要。RxJava,作为响应式编程(Reactive Programming)的一个流行库,为Java和Android开发者提供了一种强大的方式来处理异步任务和事件流。本文将深入探讨RxJava的核心概念、优势以及如何在实际项目中应用它。 文章目录 💯 什么是RxJava?💯 响应式编程的优势💯 RxJava的核心概念

如何通俗理解注意力机制?

1、注意力机制(Attention Mechanism)是机器学习和深度学习中一种模拟人类注意力的方法,用于提高模型在处理大量信息时的效率和效果。通俗地理解,它就像是在一堆信息中找到最重要的部分,把注意力集中在这些关键点上,从而更好地完成任务。以下是几个简单的比喻来帮助理解注意力机制: 2、寻找重点:想象一下,你在阅读一篇文章的时候,有些段落特别重要,你会特别注意这些段落,反复阅读,而对其他部分

深入理解数据库的 4NF:多值依赖与消除数据异常

在数据库设计中, "范式" 是一个常常被提到的重要概念。许多初学者在学习数据库设计时,经常听到第一范式(1NF)、第二范式(2NF)、第三范式(3NF)以及 BCNF(Boyce-Codd范式)。这些范式都旨在通过消除数据冗余和异常来优化数据库结构。然而,当我们谈到 4NF(第四范式)时,事情变得更加复杂。本文将带你深入了解 多值依赖 和 4NF,帮助你在数据库设计中消除更高级别的异常。 什么是

Java第二阶段---09类和对象---第三节 构造方法

第三节 构造方法 1.概念 构造方法是一种特殊的方法,主要用于创建对象以及完成对象的属性初始化操作。构造方法不能被对象调用。 2.语法 //[]中内容可有可无 访问修饰符 类名([参数列表]){ } 3.示例 public class Car {     //车特征(属性)     public String name;//车名   可以直接拿来用 说明它有初始值     pu