十二、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学习笔记

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

SQL Server2008附加数据库失败

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

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

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

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…
阅读更多...
python3爬虫验证码识别——超级鹰打码平台的使用实战：识别古诗文网登录页面中的验证码

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

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

python爬虫模拟登录人人网

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

python爬虫——代理IP

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

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的简单应用

UWP中的Attached Property即附加属性&#xff0c;在实际开发中是很常见的&#xff0c;比如Grid.Row: <Grid Background"{ThemeResource ApplicationPageBackgroundThemeBrush}"><Grid.RowDefinitions><RowDefinition></RowDefinition><Ro…
阅读更多...
一、bootstrap4基础（布局系统、栅格系统、显示与隐藏、对齐与排列、内容排版、代码与图文、表格样式、颜色和边框、工具类）

一、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;以及显示的位…
阅读更多...
二、bootstrap4基础（flex布局）

二、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"…
阅读更多...
三、bootstrap4 组件（警告和提示框、徽章和面包屑、按钮按钮组、卡片、列表组、导航和选项卡、分页和进度条、巨幕和旋转图标、轮播图、折叠菜单、下拉菜单、导航条、滚动监听、轻量弹框、模态框、表单）

三、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&…
阅读更多...
十三、axios框架学习

十三、axios框架学习

一、axios的基本使用 1.1 安装axios 执行命令&#xff1a;npm install axios --save 1.2 发送get请求演示 1.3 发送并发请求 有时候, 我们可能需求同时发送两个请求 使用axios.all, 可以放入多个请求的数组.axios.all([]) 返回的结果是一个数组&#xff0c;使用 axios.sp…
阅读更多...
LeetCode解题汇总目录

LeetCode解题汇总目录

此篇为学习完《数据结构与算法之美》后&#xff0c;在LeetCode刷题的汇总目录&#xff0c;方便大家查找&#xff08;CtrlFind&#xff09;&#xff0c;一起刷题&#xff0c;一起PK交流&#xff01;如果本文对你有帮助&#xff0c;可以给我点赞加油&#xff01; Updated on 2022…
阅读更多...
一、node.js搭建最简单的服务器

一、node.js搭建最简单的服务器

node.js搭建最简单的服务器 代码演示&#xff1a; // 1. 加载http核心模块 var http require(http)// 2. 使用http.createServer()方法创建一个Web服务器 // 返回一个Server实例 var server http.createServer()// 3. 服务器干嘛&#xff1f; // 提供服务&#xff1a; 对数…
阅读更多...
DDD 领域驱动设计－如何 DDD？

DDD 领域驱动设计－如何 DDD？

注&#xff1a;科比今天要退役了&#xff0c;我是 60 亿分之一&#xff0c;满腹怀念&#xff5e;??? 前几天看了园友的一篇文章《我眼中的领域驱动设计》&#xff0c;文中有段话直击痛点&#xff1a;有人误认为项目架构中加入 Repository&#xff0c;Domain&#xff0c;Valu…
阅读更多...
二、搭建Apache服务器 模板引擎

二、搭建Apache服务器 模板引擎

1. 案例&#xff1a;搭建简单的Apache服务器 var http require(http) var fs require(fs)var server http.createServer()var wwwDir D:\\CWork\\node.js黑马程序员\\study_nodejs\\day02\\code\\wwwserver.on(request, function(req, res) {var url req.urlfs.readFile(…
阅读更多...
三、案例：留言板 url.parse()

三、案例：留言板 url.parse()

1. url.parse()的使用 2. 留言板案例 index.html: <!DOCTYPE html> <!-- saved from url(0027)http://192.168.150.76:3000/ --> <html lang"en"><head><meta http-equiv"Content-Type" content"text/html; charsetUTF-8…
阅读更多...
一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）

一、AJAX学习笔记——原生AJAX （ajax简介、XML简介、ajax优缺点、ajax的使用）

第 1 章&#xff1a;原生 AJAX 1.1 AJAX 简介 AJAX 全称为 Asynchronous JavaScript And XML&#xff0c;就是异步的 JS 和 XML。 通过 AJAX 可以在浏览器中向服务器发送异步请求&#xff0c; 最大的优势&#xff1a;无刷新获取数据。 AJAX 不是新的编程语言&#xff0c;而是…
阅读更多...
App安全之网络传输安全

App安全之网络传输安全

移动端App安全如果按CS结构来划分的话&#xff0c;主要涉及客户端本身数据安全&#xff0c;Client到Server网络传输的安全&#xff0c;客户端本身安全又包括代码安全和数据存储安全。所以当我们谈论App安全问题的时候一般来说在以下三类范畴当中。 App代码安全&#xff0c;包括…
阅读更多...
推荐文章
最新文章

Copyright @ 2022~2023