Promise 讲解,js知识,es6

文章目录

  • 一、Promise的三种状态
    • 1. 初始态pending
    • 2. 成功态fulfilled,调用resolve方法
    • 3. 失败态rejected,调用reject方法
  • 二、Promise的方法
    • then方法
    • catch方法
  • 三、async和await
    • async 函数
    • await 表达式
  • 四、代码举例帮助理解
    • 1、Promise的值通过then方法获取
    • 2、reject的值通过catch方法获取
    • 3、Promise得到状态之后,状态不可改变
    • 4、then和catch方法执行之后会返回一个相同状态值为fulfilled(成功)的Promise对象
    • 5、then方法的返回值会进入到Promise对象中的PromiseResult
    • 6、then方法的连续调用
    • 7、Promise对象可以反复使用,调用then方法并不会改变对象本身
    • 8、让then和catch方法返回一个resolved(错误)状态的Promise对象
    • 封装ajax请求
  • 参考文档

一、Promise的三种状态

1. 初始态pending

  • pending。它的意思是 “待定的,将发生的”,相当于是一个初始状态。创建Promise对象时,且没有调用resolve或者是reject方法,相当于是初始状态。这个初始状态会随着你调用resolve,或者是reject函数而切换到另一种状态。

2. 成功态fulfilled,调用resolve方法

  • resolved。表示解决了,就是说这个承诺实现了。 要实现从pending到resolved的转变,需要在 创建Promise对象时,在函数体中调用了resolve方法(即第一个参数)。

3. 失败态rejected,调用reject方法

  • rejected。拒绝,失败。表示这个承诺没有做到,失败了。要实现从pending到rejected的转换,只需要在创建Promise对象时,调用reject函数。

在这里插入图片描述

二、Promise的方法

then方法

  • 在then方法的参数函数中,通过形参使用Promise对象的结果
  • then方法返回一个新的Promise实例,状态是pending
  • 在then方法中,通过return将返回的Promise实例改为fulfilled状态
  • 在then方法中,出现代码错误,将返回的Promise实例改为rejected状态

catch方法

  • 当Promise的状态改为rejcted.被执行
  • 当Promise执行过程出现代码错误时,被执行

三、async和await

async 函数

  • 函数的返回值为 promise 对象
  • promise 对象的结果由 async 函数执行的返回值决定

await 表达式

  • await 右侧的表达式一般为 promise 对象, 但也可以是其它的值
  • 如果表达式是 promise 对象, await 返回的是 promise 成功的值
  • 如果表达式是其它值, 直接将此值作为 await 的返回值

四、代码举例帮助理解

1、Promise的值通过then方法获取

const firstPromise001 = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
})
firstPromise001.then((res)=>{console.log('resolve中的值为='+res)
})

在这里插入图片描述

const firstPromise002 = new Promise((resolve,reject)=>{reject("这是我的失败状态")
})
firstPromise002.then((res)=>{console.log('resolve(正确)中的值为='+res)
},(err)=>{console.log('reject(错误)中的值为='+err)
})

在这里插入图片描述

2、reject的值通过catch方法获取

  • 只能获取rejected状态的值
const firstPromise001 = new Promise((resolve,reject)=>{reject("这是我的失败状态")
})
firstPromise001.catch((err)=>{console.log('reject中的值为='+err)
})

在这里插入图片描述

3、Promise得到状态之后,状态不可改变

a=0
const firstPromise = new Promise((resolve,reject)=>{a++//状态不能改变,执行了resolve方法之后状态就确定了。//但是不代表执行了resolve之后,方法就结束了,reject也会正常执行(不会报错),只不过是无效执行而已,所以控制台的a=3resolve("这是我的成功状态")a++reject("这是我的失败状态")a++
})
console.log(firstPromise)
console.log(a)

在这里插入图片描述

4、then和catch方法执行之后会返回一个相同状态值为fulfilled(成功)的Promise对象

  • 无论是什么状态的Promise对象都能调用then方法,但是只有rejected(失败)状态的才能调用catch方法
  • 作者为什么要探究这个呢?因为 then方法返回的对象是一个状态为fulfilled(成功)的Promise,所以then方法调用结束之后可以继续调用then方法。但是catch不行,catch方法结束之后只能调用then方法,不能调用catch方法,因为调用catch方法的条件是状态为rejected(失败)。
const thenPromise = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
}).then((res)=>{console.log('resolve中的值为='+res)
})
const catchPromise = new Promise((resolve,reject)=>{reject("这是我的失败状态")
}).catch((err)=>{console.log('reject中的值为='+err)
})
console.log(thenPromise)
console.log(catchPromise)

在这里插入图片描述

5、then方法的返回值会进入到Promise对象中的PromiseResult

const firstPromise = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
}).then((res)=>{console.log('第一次then输出的状态='+res)return "第一次调用then的返回";
})

在这里插入图片描述

6、then方法的连续调用

const firstPromise = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
}).then((res)=>{console.log('第一次then输出的状态='+res)return "第一次调用then的返回";
}).then((res)=>{console.log('第二次then输出的状态='+res)return "北京"
}).then((res)=>{console.log('第三次then输出的状态='+res)
})

在这里插入图片描述

7、Promise对象可以反复使用,调用then方法并不会改变对象本身

const firstPromise = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
})console.log(firstPromise)firstPromise.then((res)=>{console.log('resolve中的值为='+res)
})
firstPromise.then((res)=>{console.log('resolve中的值为='+res)
})
firstPromise.then((res)=>{console.log('resolve中的值为='+res)
})console.log(firstPromise)

在这里插入图片描述

8、让then和catch方法返回一个resolved(错误)状态的Promise对象

  • 错误信息会封装到Promise对象中的PromiseResult
const firstPromise = new Promise((resolve,reject)=>{resolve("这是我的成功状态")
}).then((res)=>{throw new Error('作者用于测试的程序错误')console.log('第一次then输出的状态='+res)return "第一次调用then的返回";
})console.log(firstPromise)firstPromise.catch((err)=>{console.log('把错误信息打印到控制台='+err)
})

在这里插入图片描述

封装ajax请求

// 封装ajax请求
function getData(url, data = {}){return new Promise((resolve, reject) => {$.ajax({// 发送请求类型type: "GET",url: url,data: data,success: function (res) {// 修改Promise状态为成功, 修改Promise的结果resresolve(res)},error:function (res) {// 修改Promise的状态为失败,修改Promise的结果resreject(res)}})}
}// 调用函数
getData("data1.json").then((data) => {// console.log(data)const { id } = datareturn getData("data2.json", {id})}).then((data) => {// console.log(data)const { usename } = datareturn getData("data3.json", {usename})}).then((data) => {console.log(data)})

参考文档

  • Promise的三种状态
  • Promise

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

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

相关文章

网络设备身份鉴别使用TACACS+和RADIUS

TACACS(Terminal Access Controller Access Control System Plus)和RADIUS(Remote Authentication Dial-In User Service)是两种常用的网络认证协议,用于管理网络设备的用户身份验证和访问控制。 TACACS是一种基于TCP/…

在vsCode 中执行Electron 项目时,出现中文乱码问题

问题:vscode 中执行Electron 项目时,控制台出现乱码 解决方法: 在 terminal 修改编码格式:65001代表UTF-8,936代表GBK

IC设计从业者必备的宝藏网站!

对于IC设计从业者而言,获取准确的学习资源,行业资讯直观重要,今日我们推荐ic行业专业的宝藏网站,希望对从业者有所帮助。 01-找开源项目的网站 GitHub除了Git代码仓库托管及基本的 Web管理界面以外,还提供了订阅、讨论…

关于SVC和PendSV

这两个都属于异常而不是中断,所谓异常就是ARM内核中断这两个中断都是由用户代码主动触发的,即软件触发,没有其它触发源SVC:系统服务调用,进入该异常可以进入特权模式,即在需要进行各种系统操作的时候主动触…

用 Generative AI 构建企业专属的用户助手机器人

原文来源: https://tidb.net/blog/a9cdb8ec 关于作者:李粒,PingCAP PM TL;DR 本文介绍了如何用 Generative AI 构建一个使用企业专属知识库的用户助手机器人。除了使用业界常用的基于知识库的回答方法外,还尝试使用模型在 fe…

树形dp记录路径 CF1779F Xorcerer’s Stones

CF1779F Xorcerer’s Stones 树形dp记录路径 首先我们分析一下操作。 对于奇树,进行一次操作后,其异或和不变;对于偶树,进行一次操作后,其异或和为0。 如果我们能让所有点异或和为0,只要在根节点再进行一次…

JAVA面试总结-Redis篇章(三)——缓存雪崩

JAVA面试总结-Redis篇章(三)——缓存雪崩

go性能分析工具之trace

参考文章: https://eddycjy.gitbook.io/golang/di-9-ke-gong-ju/go-tool-trace https://mp.weixin.qq.com/s__bizMzUxMDQxMDMyNg&mid2247484297&idx1&sn7a01fa4f454189fc3ccdb32a6e0d6897&scene21#wechat_redirect 你有没有考虑过,你的g…

【计算机编程语言】HTML-前端基础知识

文章目录 HTML1.初识HTML1.1什么是HTML 2.网页基本标签2.1标题标签2.2段落标签2.3换行标签2.4水平线标签2.5字体样式标签2.6注释和特殊符号 3.图像、超链接、网页布局3.1图像3.2链接标签3.3网页布局 4、列表、表格、媒体元素4.1列表4.2表格4.3媒体元素 5.页面结构分析6.iframe内…

运维英语基础语法-一般现在时

一般现在时的陈述句-你、我、他: 公式:代词be动词名词 代词: 代词用来代替名词,以避免重复。常见的代词有I, you, he, she, it, we, they, me, him, her, us, them等。 Be动词 am(用于第一人称单数&#x…

0基础学习VR全景平台篇 第70篇:VR直播-如何设置付费观看、试看

对于拥有优质内容的VR直播,可以通过付费观看的方式进行内容变现,是当下非常流行的商业模式。 付费价格>0时便会自动弹出“试看时间”的设置项。试看时间=0秒时,用户进入直播间需要先付费才可观看;试看时间&…

Python中字符串拼接有哪些方法

目录 什么是字符串拼接 为什么要进行字符串拼接 Python中字符串拼接有哪些方法? 什么是字符串拼接 字符串拼接是将多个字符串连接在一起形成一个新的字符串的操作。在编程中,字符串拼接经常用于将不同的字符串组合在一起,以创建更长或更有…

Elasticsearch 映射Mappings (三)

文章目录 前言一、Mapping简介查看索引映射 二、自动映射 dynamic mapping自动类型推断mapping注意点 三、手动映射 Expllicit mapping创建索引 四、自动映射模板 Dynamic Templates定义映射模板规则判定:conditlonsmatch_mapping_typematch、unmatchpath_match、pa…

勘探开发人工智能技术:地震层位解释

1 地震层位解释 层位解释是地震构造解释的重要内容,是根据目标层位的地震反射特征如振幅、相位、形态、连续性、特征组合等信息在地震数据体上进行追踪解释获得地震层位数据的方法。 1.1 地震信号、层位与断层 图1.1 所示为地震信号采集的过程,地面炮…

图像处理之canny边缘检测(非极大值抑制和高低阈值)

Canny 边缘检测方法 Canny算子是John F.Canny 大佬在1986年在其发表的论文 《Canny J. A computational approach to edge detection [J]. IEEE Transactions on Pattern Analysis and Machine Intelligence, 1986 (6): 679-698.》提出来的。 检测目标: 低错误率…

xml中的转义字符

xml中的转义字符 &amp;对应的字符是&<对应的字符是<>对应的字符是>&quot;对应的字符是"&apos;对应的字符是 转义的实体引用虽然简单易用&#xff0c;但是需要记忆&#xff0c;而且如果字符串中包含大量的特殊字符&#xff0c;还需要进行逐一替…

学好Elasticsearch系列-Mapping

本文已收录至Github&#xff0c;推荐阅读 &#x1f449; Java随想录 文章目录 Mapping 的基本概念查看索引 Mapping 字段数据类型数字类型基本数据类型Keywords 类型Dates&#xff08;时间类型&#xff09;对象类型空间数据类型文档排名类型文本搜索类型 两种映射类型自动映射&…

动手学DL——深度学习预备知识随笔【深度学习】【PyTorch】

文章目录 2、预备知识2.1、数据操作2.2、线性代数&矩阵计算2.3、导数2.4、基础优化方法 2、预备知识 2.1、数据操作 batch&#xff1a;以图片数据为例&#xff0c;一次读入的图片数量。 小批量样本可以充分利用GPU进行并行计算提高计算效率。 数据访问 数组&#xff1a;np…

Android 实现阅读用户协议的文字控件效果

开发中&#xff0c;经常要用到一些阅读隐私协议的场景&#xff0c;原生的textview控件很难做到在一个控件里有两个点击事件&#xff0c;那现在就来安利一个强大的组件——SpannableStringBuilder。 先看看效果&#xff1a; 直接上代码&#xff0c;布局文件&#xff1a; <Li…

【图像处理】使用自动编码器进行图像降噪(改进版)

阿里雷扎凯沙瓦尔兹 一、说明 自动编码器是一种学习压缩和重建输入数据的神经网络。它由一个将数据压缩为低维表示的编码器和一个从压缩表示中重建原始数据的解码器组成。该模型使用无监督学习进行训练&#xff0c;旨在最小化输入和重建输出之间的差异。自动编码器可用于降维、…