0

0

实例解析ES6 Promise的原理和使用

藏色散人

藏色散人

发布时间:2022-08-09 15:49:41

|

1824人浏览过

|

来源于csdn

转载

1. Promise 之前

1.1 回调函数

回调函数:把函数A当作参数传递给另一个函数B调用,那么A就是回调函数。【推荐:JavaScript视频教程

一些例子
具名回调

function 你有几只狗(fn){
    fn('一只狗')
}function 数狗(数量){
    console.log(数量)
}
你有几只狗(数狗)   // 一只狗

匿名回调

function 你有几只狗(fn){
    fn('一只狗')
}
你有几只狗(function(数量){console.log(数量) 
})         //  一只狗

常见的例子
jQuery中使用回调函数,这里用的是匿名回调的方式

$("#btn").click(function(){
    console.log('点到我了')
})

1.2 回调地狱(回调缺点1)

回调地狱:指的是回调嵌套过多的情况,导致代码很难被看懂。

let info = []function 你有几只狗(fn){
    fn('一只狗')
}function 你有几只猫(fn){
    fn('一只猫')
}function 知道了(数量,callback){
    info.push(数量)
    console.log(info)    if(callback){
        callback()
    }
}// 开始调用 如果比这再多几层,就不容易看懂了你有几只狗(function(狗数){
    console.log(狗数)
    知道了(狗数, function(){
        你有几只猫(function(猫数){
            console.log(猫数)
            知道了(猫数)
        })
    })
})

1.3 不使用Promise,如何解决

利用具名函数代替匿名函数

let info = []function 你有几只狗(fn){
    fn('一只狗')
}function 你有几只猫(fn){
    fn('一只猫')
}function 知道了(数量,callback){
    info.push(数量)
    console.log(info)    if(callback){
        callback()
    }
}function 告诉你猫的个数(猫数){
    console.log(猫数)
    知道了(猫数)
}function 继续数(){
    你有几只猫(告诉你猫的个数)
}function 告诉你狗的个数(狗数){
    console.log(狗数)
    知道了(狗数, 继续数)
}
你有几只狗(告诉你狗的个数)  // 好像也没好到哪去。。。

1.4 回调方式各不相同,需要单独记忆(回调缺点2)

readFile('C:\1.txt',function (error, data) {   // node.js 读取文件方法中的回调
        if(error) {
            console.log('成功')
            console.log(data.toString())
        } else {
            console.log('读取文件失败')
        }
    })

$.ajax({                              // jQuery中ajax方法中的回调
    url:'/2.txt'
    success: function(response) {
        console.log('成功')
    },
    error: function(){
        console.log('失败')
    }
})

2. Promise 的目的

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

3. Promise 的原理

3.1 实现原理

ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。通过在函数内部return 一个 Promise对象的实例,这样就可以使用Promise的属性和方法进行下一步操作了。

function 函数名(){    return new Promise(function(resolve, reject) {
        // ... some code          if (/* 异步操作成功 */){
            resolve(value);   // 异步操作成功时调用,把结果作为参数传递出去
          } else {
            reject(error);     // 异步失败时调用,把错误作为参数传递出去
          }

    })
}

3.2 调用逻辑

Insou AI
Insou AI

Insou AI 是一款强大的人工智能助手,旨在帮助你轻松创建引人入胜的内容和令人印象深刻的演示。

下载

3.2.png
S1和E1两个都没有报错,执行S2(resolve执行,系统认为搞定了,没报错)
S1和E1任何一个有报错,执行E2(reject执行,系统认为没搞定,报错了)

4. Promise 的使用

4.1 Promise 的属性与方法

属性
Promise.prototype 表示 Promise 构造器的原型
方法
Promise.prototype.then()
返回一个 Promise 。它最多需要有两个参数:Promise 的成功和失败情况的回调函数。
Promise.prototype.catch()
返回一个Promise,并且处理拒绝的情况。等价于Promise.prototype.then(undefined, onRejected)
Promise.prototype.finally()
finally() 方法返回一个Promise,在执行then()和catch()后,都会执行finally指定的回调函数。避免同样的语句需要在then()和catch()中各写一次的情况。
Promise.all(iterable)
返回一个 Promise 实例,iterable参数内所有的 promise 都resolved后,才回调完成resolve。
Promise.race(iterable)
返回一个 promise ,并伴随着 promise对象解决的返回值或拒绝的错误原因, 只要 iterable 中有一个 promise 对象”解决(resolve)”或”拒绝(reject)”。
Promise.resolve()
返回一个以给定值解析后的Promise对象。但如果这个值是个thenable(即带有then方法),返回的promise会“跟随”这个thenable的对象,采用它的最终状态(指resolved/rejected/pending/settled);如果传入的value本身就是promise对象,则该对象作为Promise.resolve方法的返回值返回;否则以该值为成功状态返回promise对象。
Promise.reject()
返回一个带有拒绝原因reason参数的Promise对象。

4.2 将回调地狱中的例子,改写为Promise的形式

4.2-1.png
可以看到使用 Promise后,逻辑变得非常直观
写得更完整一些
4.2-2.png
Promise套Promise时,也就是Promise链的时候——注意信息的传递
一个失败的例子,当我们使用Promise链的时候,如果每一步都需要上一步的数据时,就需要传参,成功通过resolve传参,失败通过reject传参,如果忘记传参,就得不到想要的结果。
resolve把成功的数据返回给下一个回调
reject把失败的数据返回给下一个回调。
4.2-3.png
给这里的resolve传一个参
4.2-4.png
改成失败的例子
先不给reject传参,如果失败的话,下一个回调拿不到数据
4.2-5.png
给 reject传参
4.2-6.png
我们可以看到,即使是走的失败回调,下一个成功回调还是执行了,由于 不知道() 默认返回undefined, 相当于失败已经处理了,在成功和失败都被处理的情况下,下一个回调会执行的。
改成符合预期的,即失败不调用。
4.2-7.png
失败不调用的简写形式
4.2-8.png
上述情况执行后 .then(除了狗呢)里面的成功回调没有执行,我们增加一个失败回调看看
4.2-9.png
同样也可以返回 resolve,让后面成功回调可以执行
4.2-10.png

4.3 应用

加载图片
将图片的加载写成一个Promise,一旦加载完成,Promise的状态就发生变化。

const preloadImage = function (path) {
  return new Promise(function (resolve, reject) {
    const image = new Image();
    image.onload  = resolve;
    image.onerror = reject;
    image.src = path;
  });
};

Generator 函数与 Promise 的结合(详情见参考链接,阮一峰的教程)

5. 干掉Promise中的回调

5.1 await

成功的情况
5.1-1.png
失败的情况
利用 try catch
5.1-2.png
await 配合 try catch使用,比较完整

6. 总结

能利用Promise对象,把普通函数改成返回Promise的形式,解决回调地狱的问题。
明白Promise的成功失败调用逻辑,可以灵活的进行调整。
理解核心知识,先用起来,慢慢整合吸收知识。

热门AI工具

更多
DeepSeek
DeepSeek

幻方量化公司旗下的开源大模型平台

豆包大模型
豆包大模型

字节跳动自主研发的一系列大型语言模型

WorkBuddy
WorkBuddy

腾讯云推出的AI原生桌面智能体工作台

腾讯元宝
腾讯元宝

腾讯混元平台推出的AI助手

文心一言
文心一言

文心一言是百度开发的AI聊天机器人,通过对话可以生成各种形式的内容。

讯飞写作
讯飞写作

基于讯飞星火大模型的AI写作工具,可以快速生成新闻稿件、品宣文案、工作总结、心得体会等各种文文稿

即梦AI
即梦AI

一站式AI创作平台,免费AI图片和视频生成。

ChatGPT
ChatGPT

最最强大的AI聊天机器人程序,ChatGPT不单是聊天机器人,还能进行撰写邮件、视频脚本、文案、翻译、代码等任务。

相关专题

更多
jquery插件有哪些
jquery插件有哪些

jquery插件有jQuery UI、jQuery Validate、jQuery DataTables、jQuery Slick、jQuery LazyLoad、jQuery Countdown、jQuery Lightbox、jQuery FullCalendar、jQuery Chosen和jQuery EasyUI等。本专题为大家提供jquery插件相关的文章、下载、课程内容,供大家免费下载体验。

156

2023.09.12

jquery怎么操作json
jquery怎么操作json

操作的方法有:1、“$.parseJSON(jsonString)”2、“$.getJSON(url, data, success)”;3、“$.each(obj, callback)”;4、“$.ajax()”。更多jquery怎么操作json的详细内容,可以访问本专题下面的文章。

337

2023.10.13

jquery删除元素的方法
jquery删除元素的方法

jquery可以通过.remove() 方法、 .detach() 方法、.empty() 方法、.unwrap() 方法、.replaceWith() 方法、.html('') 方法和.hide() 方法来删除元素。更多关于jquery相关的问题,详情请看本专题下面的文章。php中文网欢迎大家前来学习。

406

2023.11.10

jQuery hover()方法的使用
jQuery hover()方法的使用

hover()是jQuery中一个常用的方法,它用于绑定两个事件处理函数,这两个函数将在鼠标指针进入和离开匹配的元素时执行。想了解更多hover()的相关内容,可以阅读本专题下面的文章。

515

2023.12.04

jquery实现分页方法
jquery实现分页方法

在jQuery中实现分页可以使用插件或者自定义实现。想了解更多jquery分页的相关内容,可以阅读本专题下面的文章。

312

2023.12.06

jquery中隐藏元素是什么
jquery中隐藏元素是什么

jquery中隐藏元素是非常重要的一个概念,在使用jquery隐藏元素之前,需要先了解css样式中关于元素隐藏的属性,比如display、visibility、opacity等属性。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

128

2024.02.23

jquery中什么是高亮显示
jquery中什么是高亮显示

jquery中高亮显示是指对页面搜索关键词时进行高亮显示,其实现办法:1、先获取要高亮显示的行,获取搜索的内容,再遍历整行内容,最后添加高亮颜色;2、使用“jquery highlight”高亮插件。本专题为大家提供相关的文章、下载、课程内容,供大家免费下载体验。

183

2024.02.23

jQuery 正则表达式相关教程
jQuery 正则表达式相关教程

本专题整合了jQuery正则表达式相关教程大全,阅读专题下面的文章了解更多详细内容。

51

2026.01.13

TypeScript类型系统进阶与大型前端项目实践
TypeScript类型系统进阶与大型前端项目实践

本专题围绕 TypeScript 在大型前端项目中的应用展开,深入讲解类型系统设计与工程化开发方法。内容包括泛型与高级类型、类型推断机制、声明文件编写、模块化结构设计以及代码规范管理。通过真实项目案例分析,帮助开发者构建类型安全、结构清晰、易维护的前端工程体系,提高团队协作效率与代码质量。

49

2026.03.13

热门下载

更多
网站特效
/
网站源码
/
网站素材
/
前端模板

精品课程

更多
相关推荐
/
热门推荐
/
最新课程
关于我们 免责申明 举报中心 意见反馈 讲师合作 广告合作 最新更新
php中文网:公益在线php培训,帮助PHP学习者快速成长!
关注服务号 技术交流群
PHP中文网订阅号
每天精选资源文章推送

Copyright 2014-2026 https://www.php.cn/ All Rights Reserved | php.cn | 湘ICP备2023035733号