Promise的理解与使用(一)

一、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方法中直接抛出异常,即执行失败的的函数

hello

127 声望
10 粉丝
0 条评论
推荐阅读
关于预处理器 sass 的超全用法
随着用户需求的增加,应用于页面的 css 代码越来越复杂越发臃肿难以维护,但是又没有 css 的替代品,css 预处理器作为 css 的扩展,出现在前端技术中。

一颗冰淇淋阅读 520

ESlint + Stylelint + VSCode自动格式化代码(2023)
安装插件 ESLint,然后 File -> Preference-> Settings(如果装了中文插件包应该是 文件 -> 选项 -> 设置),搜索 eslint,点击 Edit in setting.json

谭光志34阅读 20.9k评论 9

安全地在前后端之间传输数据 - 「3」真的安全吗?
在「2」注册和登录示例中,我们通过非对称加密算法实现了浏览器和 Web 服务器之间的安全传输。看起来一切都很美好,但是危险就在哪里,有些人发现了,有些人嗅到了,更多人却浑然不知。就像是给门上了把好锁,还...

边城32阅读 7.4k评论 5

封面图
涨姿势了,有意思的气泡 Loading 效果
今日,群友提问,如何实现这么一个 Loading 效果:这个确实有点意思,但是这是 CSS 能够完成的?没错,这个效果中的核心气泡效果,其实借助 CSS 中的滤镜,能够比较轻松的实现,就是所需的元素可能多点。参考我们...

chokcoco24阅读 2.3k评论 3

你可能不需要JS!CSS实现一个计时器
CSS现在可不仅仅只是改一个颜色这么简单,还可以做很多交互,比如做一个功能齐全的计时器?样式上并不复杂,主要是几个交互的地方数字时钟的变化开始、暂停操作重置操作如何仅使用 CSS 来实现这样的功能呢?一起...

XboxYan25阅读 1.8k评论 1

封面图
在前端使用 JS 进行分类汇总
最近遇到一些同学在问 JS 中进行数据统计的问题。虽然数据统计一般会在数据库中进行,但是后端遇到需要使用程序来进行统计的情况也非常多。.NET 就为了对内存数据和数据库数据进行统一地数据处理,发明了 LINQ (L...

边城17阅读 2.1k

封面图
过滤/筛选树节点
又是树,是我跟树杠上了吗?—— 不,是树的问题太多了!🔗 相关文章推荐:使用递归遍历并转换树形数据(以 TypeScript 为例)从列表生成树 (JavaScript/TypeScript) 过滤和筛选是一个意思,都是 filter。对于列表来...

边城18阅读 7.9k评论 3

封面图

hello

127 声望
10 粉丝
宣传栏