一、Promise是什么?
Promise是JS中进行异步操作的新的解决方案(旧的方案是回调函数的形式,回调函数里嵌套函数)
从语法上来说,Promise是一个构造函数。
从功能上来说,用Promise的实例封装异步操作并获取结果。

二、为什么要用Promise?
在旧的回调函数的形式中,当后一个异步请求的参数依赖于前一个异步请求的结果时,就会出现层层嵌套的情况,使得代码维护性变得比较差,Promise可以很好的解决这个问题,then的链式调用使得Promise的结构层次很清晰,async和await能使代码的运行变成同步。
下面的图片里的伪代码可以进行一个简单演示。

三、Promise的基本流程
我们使用Promise这个构造函数,创建它的实例对象,在入参中传入回调函数,回调函数中执行异步操作,并返回Promise的执行结果成功(resolve)或失败(reject)或抛出异常,then方法中定义成功(onResolved)及失败(onRejected)的函数,来对Promise的返回结果进行处理。要注意,promise.then也是一个promise。

基本语法如下:

new Promise((resolve, reject)=>{
// 执行异步操作,操作完成后将执行结果返回
setTimeout(()=>{
resolve(1)
}, 2000)
}).then(value=>{
// 当返回为resolve时,执行成功的处理结果
console.log('success', value)
}, reason=>{
// 当返回为reject时,执行失败的处理结果
console.log('fail', reason)
})

简单图示如下

四、Promise的重要概念
1、Promise三种状态,等待中 pending、成功 resolved/fulfilled、失败 rejected,当Promise实例创建时,即为pending状态,如何改变promise的状态
(1) resolve(value) ---- 如果当前是pending就会变为resolved
(2) reject(reason) ---- 如果当前是pending就会变为rejected
(3) 抛出异常           ---- 如果当前是pending就会变为rejected

2、Promise的状态不可逆,一旦由等待--->成功,或者由等待--->失败,就不能再变更为其它的状态。

3、Promise通过.then来获取promise的执行结果,第一个参数传入成功的处理函数,第二个参数传入失败的处理函数,失败还可以通过catch进行异常穿透,最后处理。

4、promise.then也是promise,所以then才能进行链式调用,then的返回结果取决于then方法里的执行结果
(1) then方法返回任意的非promise的值时,此时链式调用下一个then方法里执行的是成功的函数,(包括没有返回值,此时返回的undefined)
(2) then方法里返回promise,then的返回结果由promise的执行结果决定,resolve即执行成功的函数,reject即执行失败的函数
(3) then方法中直接抛出异常,即执行失败的的函数

Promise的理解与使用(一)的更多相关文章

  1. promise的理解和使用

    1. Promise是什么 1.1 promise 的理解 1. 抽象表达: Promise 是 JS 中进行异步编程的新的解决方案(旧的是纯回调形式) 2. 具体表达: (1)从语法上说:Promi ...

  2. 「每日一题」面试官问你对Promise的理解?可能是需要你能手动实现各个特性

    关注「松宝写代码」,精选好文,每日一题 加入我们一起学习,day day up 作者:saucxs | songEagle 来源:原创 一.前言 2020.12.23日刚立的flag,每日一题,题目类 ...

  3. promise的理解和应用

    老铁们,我又满血复活了,今天我准备来吹一波我对promise,如有错吴请直接指出,明白了吗?话不多说开始吧 首先我们需要知道啥叫promise,我问了问大佬,他说这个东西是 异步操作的同步代码(but ...

  4. 谈谈你对Promise的理解

    一.Promise是什么? 理解 抽象表达: Promise 是一门新的技术(ES6 规范) Promise 是 JS 中进行异步编程的新解决方案(备注:旧方案是单纯使用回调函数) 具体表达: 从语法 ...

  5. promise的理解

    为什么会有promise,他的作用是什么? promise主要是为了解决js中多个异步回调难以维护和控制的问题. 什么是promise? 从图中,我们可以看出,Promise是一个函数,这个函数上有在 ...

  6. 对Promise的理解?

    ES6原生提供了promise对象 所谓Promise,就是一个对象,用来传递异步操作的消息.它代表了某个未来才会知道结果的事件(通过是一个异步操作),并且这个事件提供统一的API,可供进一步处理 P ...

  7. 一点对Promise的理解与总结

    全手打原创,转载请标明出处:https://www.cnblogs.com/dreamsqin/p/10959411.html,多谢,=.=~ axios用多了就开始疑惑它里面到底是个啥,虽然总被告知 ...

  8. 谈谈我对Promise的理解

    一.Promise是什么? Promise是最早由社区提出和实现的一种解决异步编程的方案,比其他传统的解决方案(回调函数和事件)更合理和更强大. ES6 将其写进了语言标准,统一了用法,原生提供了Pr ...

  9. 简单理解ECMAScript2015中的Promise

    ECMAScript6中新增了Promise对象, 所谓Promise对象,即代表着一个还未完成,但将来某时会完成的操作(通常是异步操作).使用Promise对象,我们就可以避免陷入函数层层嵌套的‘回 ...

  10. 深入理解promise

    如今promise大行其道,关于异步方面的几乎都有它的影子,新的fetch api返回的是promise对象,generator中的yield后面一般也会跟promise对象,async的await后 ...

随机推荐

  1. Laf Assistant:云开发从未如此爽快!

    原文链接:https://forum.laf.run/d/67 工欲善其事,必先利其器.在编写代码时,IDE 也是我们不可或缺的.它可以让我们更高效地完成代码编写,提高开发效率.因此,IDE 是我们编 ...

  2. 2022-10-14:以下go语言代码输出什么?A:0;B:7;C:9;D:不能编译。 package main import “fmt“ func main() { a := []int

    2022-10-14:以下go语言代码输出什么?A:0:B:7:C:9:D:不能编译. package main import "fmt" func main() { a := [ ...

  3. 2021-07-14:接雨水。给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水。

    2021-07-14:接雨水.给定 n 个非负整数表示每个宽度为 1 的柱子的高度图,计算按此排列的柱子,下雨之后能接多少雨水. 福大大 答案2021-07-14: 左右指针向中间移动.左指针是左边柱 ...

  4. Element-DatePicker的宽度

    Element如何修改DatePicker的宽度 方法/步骤 1 打开一个vue文件,添加DatePicker日期选择器组件,设置默认日期为null.如图 2 在组件上添加style样式属性,设置wi ...

  5. 手机app解包

    1.将在网上下载的手机软件放入apps 2.启动 3.查看结果 urls里是网址

  6. vue横向导航条滚动到顶部固定同时瞄点对应内容(copy即用)

    这里监听window 的scroll实现一个页面滚动,导航菜单定位,内容联动的一个简单组件,结合一些案例,按需进行了整合,在此记录一下 效果图如下 具体实现如下 一.先创建一个NavigateTool ...

  7. 记一次BootCDN被黑产挂马导致站点跳转博彩网站的问题

    近期发现公司某些站点出现偶尔跳转博彩网站的现象,经过排查发现该现象为供应链投毒攻击,BootCDN上的静态资源无一例外均被污染, 当外站引入BootCDN的静态资源时,如果请求携带的Referer头为 ...

  8. 2023-06-10:给定一个由 n 个节点组成的网络,用 n x n 个邻接矩阵 graph 表示 在节点网络中,只有当 graph[i][j] = 1 时,节点 i 能够直接连接到另一个节点 j。

    2023-06-10:给定一个由 n 个节点组成的网络,用 n x n 个邻接矩阵 graph 表示 在节点网络中,只有当 graph[i][j] = 1 时,节点 i 能够直接连接到另一个节点 j. ...

  9. Java 网络编程 —— RMI 框架

    概述 RMI 是 Java 提供的一个完善的简单易用的远程方法调用框架,采用客户/服务器通信方式,在服务器上部署了提供各种服务的远程对象,客户端请求访问服务器上远程对象的方法,它要求客户端与服务器端都 ...

  10. 用CSS实现带动画效果的单选框

    预览一下效果:http://39.105.101.122/myhtml/CSS/singlebox2/singleRadio.html 布局结构为: 1 <div class="rad ...