十二、Promise的学习笔记(Promise的基本使用、链式编程、all())

一、认识Promise

ES6中一个非常重要和好用的特性就是Promise

  • 但是初次接触Promise会一脸懵逼,这TM是什么东西?
  • 看看官方或者一些文章对它的介绍和用法,也是一头雾水。

Promise到底是做什么的呢?

  • Promise是异步编程的一种解决方案。

那什么时候我们会来处理异步事件呢?

  • 一种很常见的场景应该就是网络请求了。
  • 我们封装一个网络请求的函数,因为不能立即拿到结果,所以不能像简单的3+4=7一样将结果返回。
  • 所以往往我们会传入另外一个函数,在数据请求成功时,将数据通过传入的函数回调出去。
  • 如果只是一个简单的网络请求,那么这种方案不会给我们带来很大的麻烦。

但是,当网络请求非常复杂时,就会出现回调地狱。
OK,我以一个非常夸张的案例来说明。
我们来考虑下面的场景(有夸张的成分):

  • 我们需要通过一个url1从服务器加载一个数据data1,data1中包含了下一个请求的url2
  • 我们需要通过data1取出url2,从服务器加载数据data2,data2中包含了下一个请求的url3
  • 我们需要通过data2取出url3,从服务器加载数据data3,data3中包含了下一个请求的url4
  • 发送网络请求url4,获取最终的数据data4

在这里插入图片描述
上面的代码有什么问题吗?

  • 正常情况下,不会有什么问题,可以正常运行并且获取我们想要的结果。
  • 但是,这样额代码难看而且不容易维护。

我们更加期望的是一种更加优雅的方式来进行这种异步操作。
如何做呢?

  • 就是使用Promise。
  • Promise可以以一种非常优雅的方式来解决这个问题。

二、Promise的基本使用

2.1 定时器的异步事件

我们先来看看Promise最基本的语法。

这里,我们用一个定时器来模拟异步事件:

  • 假设下面的data是从网络上1秒后请求的数据
  • console.log就是我们的处理方式。
    在这里插入图片描述

上图是我们过去的处理方式,我们将它换成Promise代码:
在这里插入图片描述
这个例子会让我们感觉脱裤放屁,多此一举

  • 首先,下面的Promise代码明显比上面的代码看起来还要复杂。
  • 其次,下面的Promise代码中包含的resolve、reject、then、catch都是些什么东西?

我们先不管第一个复杂度的问题,因为这样的一个屁大点的程序根本看不出来Promise真正的作用。

2.2 定时器异步事件解析

我们先来认认真真的读一读这个程序到底做了什么?

  • new Promise很明显是创建一个Promise对象
  • 小括号中((resolve, reject) => {})也很明显就是一个函数,而且我们这里用的是之前刚刚学习过的箭头函数。

但是resolve, reject它们是什么呢?

  • 我们先知道一个事实:在创建Promise时,传入的这个箭头函数是固定的(一般我们都会这样写)
  • resolve和reject它们两个也是函数,通常情况下,我们会根据请求数据的成功和失败来决定调用哪一个。

成功还是失败?

  • 如果是成功的,那么通常我们会调用resolve(messsage),这个时候,我们后续的then会被回调。
  • 如果是失败的,那么通常我们会调用reject(error),这个时候,我们后续的catch会被回调。

OK,这就是Promise最基本的使用了。

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 1.使用setTimeout// setTimeout(() => {//     console.log('Hello world!');// }, 1000)// new Promise(参数) 参数->函数(resolve,reject)// resolve,reject它们本身又是函数// 链式编程/*new Promise((resolve,reject) => {// 第一次发生网络请求的代码setTimeout(() => {// console.log('Hello world!');resolve()}, 1000)}).then(() => {// 第一次拿到结果后的处理代码console.log('Hello world!');console.log('Hello world!');return new Promise((resolve, reject) => {// 第二次发生网络请求的代码setTimeout(() => {resolve()}, 1000)}).then(() => {// 第二次拿到结果后的处理代码console.log('Hello vuejs!');console.log('Hello vuejs!');return new Promise((resolve, reject) => {// 第三次发生网络请求的代码setTimeout(() => {resolve()}, 1000)}).then(() => {// 第三次拿到结果后的处理代码console.log('Hello promise!');console.log('Hello promise!');})})})*/// 什么情况下会用到Promise?// 一般情况下是有异步操作时,会使用Promise对这个异步操作进行封装new Promise((resolve, reject) => {setTimeout(() => {// 成功的时候调用resolve// resolve('hello data')// 失败的时候调用rejectreject('error message')}, 1000)}).then((data) => {console.log(data);console.log(data);console.log(data);console.log(data);}).catch((err) => {console.log(err);})</script>
</body>
</html>
  1. then()处理成功,catch()处理失败:
    在这里插入图片描述

  2. 不写catch(),把处理成功和失败的两个函数都作为then()函数的参数传进去:
    在这里插入图片描述

三、Promise三种状态

首先, 当我们开发中有异步操作时, 就可以给异步操作包装一个Promise

异步操作之后会有三种状态,我们一起来看一下这三种状态:
在这里插入图片描述

  1. pending:等待状态,比如正在进行网络请求,或者定时器没有到时间。
  2. fulfill:满足状态,当我们主动回调了resolve时,就处于该状态,并且会回调.then()
  3. reject:拒绝状态,当我们主动回调了reject时,就处于该状态,并且会回调.catch()

在这里插入图片描述

四、Promise的链式编程

在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body>
<script>// 1.使用setTimeout// setTimeout(() => {//     console.log('Hello world!');// }, 1000)// new Promise(参数) 参数->函数(resolve,reject)// resolve,reject它们本身又是函数// 链式编程new Promise((resolve,reject) => {// 第一次发生网络请求的代码setTimeout(() => {// console.log('Hello world!');resolve()}, 1000)}).then(() => {// 第一次拿到结果后的处理代码console.log('Hello world!');console.log('Hello world!');return new Promise((resolve, reject) => {// 第二次发生网络请求的代码setTimeout(() => {resolve()}, 1000)}).then(() => {// 第二次拿到结果后的处理代码console.log('Hello vuejs!');console.log('Hello vuejs!');return new Promise((resolve, reject) => {// 第三次发生网络请求的代码setTimeout(() => {resolve()}, 1000)}).then(() => {// 第三次拿到结果后的处理代码console.log('Hello promise!');console.log('Hello promise!');})})})
</script>
</body>
</html>
<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// 网络请求: aaa -> 处理代码(10行代码)// 处理:aaa111 -> 处理代码(10行代码)// 处理:aaa111222 -> 处理代码(10行代码)// new Promise((resolve, reject) => {})/* new Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {// 1.自己处理10行代码console.log(res, '第一层的10行处理代码')// 2.对结果进行第一次处理return new Promise((resolve, reject) => {resolve(res + '111')})}).then(res => {console.log(res, '第二层的10处理代码');return new Promise((resolve, reject) => {resolve(res + '222')})}).then(res => {console.log(res, '第三层的10处理代码');})*/// 2.// new Promise((resolve, reject) => {//     setTimeout(() => {//         resolve('aaa')//     }, 1000)// }).then(res => {//     // 1.自己处理10行代码//     console.log(res,'第一层的10行处理代码')////     // 2.对结果进行第一次处理//     // return new Promise((resolve, reject) => {//     //         resolve(res + '111')//     //     })//     return Promise.resolve(res + '111')//     }).then(res => {//         console.log(res, '第二层的10处理代码');////         return Promise.resolve(res + '222')////         }).then(res => {//             console.log(res, '第三层的10处理代码');//         })// 链式调用中间某一层出现reject的情况,会直接执行最后面的catch()// new Promise((resolve, reject) => {//     setTimeout(() => {//         resolve('aaa')//     }, 1000)// }).then(res => {//     // 1.自己处理10行代码//     console.log(res, '第一层的10行处理代码')////     // 2.对结果进行第一次处理//     // return new Promise((resolve, reject) => {//     //         resolve(res + '111')//     //     })//     return Promise.reject('error message')// }).then(res => {//     console.log(res, '第二层的10处理代码');////     return Promise.resolve(res + '222')//// }).then(res => {//     console.log(res, '第三层的10处理代码');// }).catch(err => {//     console.log(err);// })// thrownew Promise((resolve, reject) => {setTimeout(() => {resolve('aaa')}, 1000)}).then(res => {// 1.自己处理10行代码console.log(res, '第一层的10行处理代码')// 2.对结果进行第一次处理// return new Promise((resolve, reject) => {//         resolve(res + '111')//     })throw 'error message'}).then(res => {console.log(res, '第二层的10处理代码');return Promise.resolve(res + '222')}).then(res => {console.log(res, '第三层的10处理代码');}).catch(err => {console.log(err);})// 3.省略掉Promise.resolve// new Promise((resolve, reject) => {//     setTimeout(() => {//         resolve('aaa')//     }, 1000)// }).then(res => {//     // 1.自己处理10行代码//     console.log(res, '第一层的10行处理代码')////     return res + '111'// }).then(res => {//     console.log(res, '第二层的10处理代码');////     return res + '222'//// }).then(res => {//     console.log(res, '第三层的10处理代码');// })</script>
</body>
</html>

4.1 链式调用

  • 我们在看Promise的流程图时,发现无论是then还是catch都可以返回一个Promise对象。

  • 所以,我们的代码其实是可以进行链式调用的:
    在这里插入图片描述

  • 这里我们直接通过Promise包装了一下新的数据,将Promise对象返回了

  1. Promise.resovle():将数据包装成Promise对象,并且在内部回调resolve()函数
  2. Promise.reject():将数据包装成Promise对象,并且在内部回调reject()函数

4.2 链式调用简写

简化版代码:
如果我们希望数据直接包装成Promise.resolve,那么在then中可以直接返回数据

  • 注意下面的代码中,我将return Promise.resovle(data)改成了return data,结果依然是一样的

在这里插入图片描述

4.3 all方法的使用

当需要多个网络请求都成功后才能进行下一步操作时,可以使用Promise的all方法:
在这里插入图片描述

<!DOCTYPE html>
<html lang="en">
<head><meta charset="UTF-8"><title>Title</title>
</head>
<body><script>// Promise.all([// new Promise((resolve, reject) => {//     $ajax({//         url: 'url1',//         success: function (data) {//             resolve(data)//         }//     })// }),//// new Promise((resolve, reject) => {//     $ajax({//         url: 'url2',//         success: function (data) {//             resolve(data)//         }//     })// })Promise.all([new Promise((resolve, reject) => {setTimeout(() => {resolve('result1')},2000)}),new Promise((resolve, reject) => {setTimeout(() => {resolve('result2')},1000)})]).then(results => {console.log(results);})</script>
</body>
</html>

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/news/470842.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

十三、Vuex学习笔记

一、Vuex是做什么的? 官方解释&#xff1a;Vuex 是一个专为 Vue.js 应用程序开发的状态管理模式。 它采用 集中式存储管理 应用的所有组件的状态&#xff0c;并以相应的规则保证状态以一种可预测的方式发生变化。Vuex 也集成到 Vue 的官方调试工具 devtools extension&#xf…

SQL Server2008附加数据库失败

今天旁晚时分&#xff0c;我准备把老师在上课时候发给我们的一个数据库附加到我的SQL Server2008上面去&#xff0c;本来在学校机房用的SQL Server2000是很顺利地就成功了&#xff0c;但是把*.mdf文件附加到我的08上就不行了&#xff0c;出现了下面的问题&#xff08;图是我 百…

数据解析学习笔记(正则解析、bs4解析、xpath解析)

聚焦爬虫:爬取页面中指定的页面内容。 - 编码流程&#xff1a; - 指定url - 发起请求 - 获取响应数据 - 数据解析 - 持久化存储 数据解析分类&#xff1a; 正则bs4xpath&#xff08;***&#xff09; 数据解析原理概述&#xff1a; - 解析的局部的文本内容都会在标签之间或者标…

Rasa NLU 实践

文章目录1. 目录结构2. nlu.yml3. config.yml4. domain.yml5. 实践learn from https://github.com/Chinese-NLP-book/rasa_chinese_book_code 1. 目录结构 2. nlu.yml version: "3.0" nlu:- intent: greetexamples: |- 你好- hello- hi- 喂- 在么- intent: goodbye…

字符串数组判断数字,字母汉字,

c中判断字符串是否为数字的方法:cout << "请输入一个整数数组&#xff08;不超过1000个&#xff09;&#xff1a;" << endl;17 cin >> arr[0];18 while (getchar() ! \n)19 {20 cin >> arr[num];21 num;22 …

python3爬虫验证码识别——超级鹰打码平台的使用实战:识别古诗文网登录页面中的验证码

一、验证码和爬虫之间的爱恨情仇&#xff1f; 反爬机制&#xff1a;验证码.识别验证码图片中的数据&#xff0c;用于模拟登陆操作。 二、识别验证码的操作&#xff1a; 人工肉眼识别。&#xff08;不推荐&#xff09;第三方自动识别&#xff08;推荐&#xff09; - 超级鹰打…

Rasa Core实践 报时机器人

文章目录1. 领域 domain2. 故事 story用户消息机器人动作与事件辅助符号3. 动作 action回复动作表单默认动作自定义动作4. 词槽 slot词槽和对话行为词槽类型词槽映射5. 策略 policy6. 端点 endpoints.yml7. rasa SDK、自定义动作自定义动作运行自定义动作8. rasa 支持的客户端9…

python爬虫模拟登录人人网

模拟登录&#xff1a;爬取基于某些用户的用户信息。 需求1&#xff1a;对人人网进行模拟登录。 点击登录按钮之后会发起一个post请求post请求中会携带登录之前录入的相关的登录信息&#xff08;用户名&#xff0c;密码&#xff0c;验证码…&#xff09;验证码&#xff1a;每次…

在centos7环境下建立MariaDB多实例

环境全部基于vmware player 12 os: centos7 mariadb: mariadb-10.1.12-linux-x86_64.tar.gz 主要根据MariaDB给出的帮助文档&#xff0c;以及网上的这篇帖子进行操作 中间碰到了无数问题&#xff0c;在google的帮助下都一一解决了 耗费好几个小时&#xff0c;我真是个鶸 su roo…

python爬虫——代理IP

代理&#xff1a;破解封IP这种反爬机制。 什么是代理&#xff1a; 代理服务器。 代理的作用&#xff1a; 突破自身IP访问的限制。隐藏自身真实IP 代理相关的网站&#xff1a; - 快代理 西祠代理www.goubanjia.comhttps://ip.jiangxianli.com/?page1 代理ip的类型&#…

centos7 通过kvm+vnc 实现远程桌面虚拟化和创建windows、Linux虚拟机

感谢朋友支持本博客。欢迎共同探讨交流&#xff0c;因为能力和时间有限。错误之处在所难免&#xff0c;欢迎指正&#xff01;假设转载。请保留作者信息。博客地址&#xff1a;http://blog.csdn.net/qq_21398167 原博文地址&#xff1a;http://blog.csdn.net/qq_21398167/articl…

ES 安装、search、index、doc

文章目录1. 安装2. search3. index4. doc CRUDop_type获取 doc 元字段只获取 doc 源数据删除 docupdate doc1. 安装 https://www.elastic.co/cn/ 下载 https://www.elastic.co/cn/downloads/past-releases/elasticsearch-8-5-3 https://www.elastic.co/cn/downloads/past-rele…

UWP开发入门(十一)——Attached Property的简单应用

UWP中的Attached Property即附加属性&#xff0c;在实际开发中是很常见的&#xff0c;比如Grid.Row: <Grid Background"{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.RowDefinitions><RowDefinition></RowDefinition><Ro…

一、bootstrap4基础(布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类)

1.1 Bootstrap简单介绍 1.2 Bootstrap结构 1.3 Bootstrap安装和测试 1.4 布局系统 1.5 栅格系统 4.6 栅格等级 1.7 显示与隐藏 1.7 对齐与排列 1.8 内容排版 1.9 代码与图文 1.9.1 设置图片居中显示 1.9.1 设置图片响应式显示 1.9.2 设置图片缩略图显示&#xff0c;以及显示的位…

ES mget、bulk、mappings

文章目录1. mget 批量查询2. bulk 批量写入3. 条件删除4. 条件更新5. 映射 mappings6. 自动映射7. 显式映射1. mget 批量查询 批量查询 GET _mget {"docs": [{"_index": "test_index","_id": 1},{"_index": "kibana_…

ACM/ICPC 之 四道MST-Prim解法(POJ1258-POJ1751-POJ2349-POJ3026)

四道MST&#xff0c;适合Prim解法&#xff0c;也可以作为MST练习题。 题意包括在代码中。 POJ1258-Agri Net 水题 1 //Prim-没什么好说的2 //接受一个邻接矩阵&#xff0c;求MST3 //Time:0Ms Memory:220K4 #include<iostream>5 #include<cstring>6 #include<…

二、bootstrap4基础(flex布局)

1.1 Flex弹性布局&#xff08;一&#xff09; <div class"d-flex flex-column border border-danger justify-content-end mb-5" style"height: 200px;"><div class"p-2 border border-success">one</div><div class"…

《数据结构与算法之美》学习汇总

此篇文章是对自己学习这门课程的一个总结和课后的一些练习&#xff0c;做一个汇总&#xff0c;希望对大家有帮助。本人是半路程序员&#xff0c;2018年2月开始学习C的&#xff0c;下面的代码基本都是C11版本的&#xff0c;代码有错误的地方请不吝留言赐教。附有部分练习LeetCod…

android简单的夜间模式

现在android项目values下打 attrs.xml <?xml version"1.0" encoding"utf-8"?> <resources><attr name"bookimage" format"reference|color" /><attr name"tvcolor" format"reference|color&quo…

三、bootstrap4 组件(警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单)

1.1 警告提示框 1.2 徽章和面包屑 1.3 按钮和按钮组 1.4 卡片 1.5 列表组 1.6 导航和选项卡 1.7 分页和进度条 1.8 巨幕和旋转图标 1.9 轮播图 1.10 折叠菜单 1.11 下拉菜单 <!DOCTYPE html> <html><head><meta charset"utf-8" /><title&…