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 调用逻辑

aspx1财付通支付接口源码
aspx1财付通支付接口源码

本支付接口的特点,主要是用xml文件来记录订单详情和支付详情。代码比较简单,只要将里面的商户号、商户key换成你自己的,将回调url换成你的网站,就可以使用了。通过这个实例也可以很好的了解一般在线支付接口的基本工作原理。其中的pay.config文件记录的是支付详情,order.config是订单详情

下载

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的成功失败调用逻辑,可以灵活的进行调整。
理解核心知识,先用起来,慢慢整合吸收知识。

相关专题

更多
js获取数组长度的方法
js获取数组长度的方法

在js中,可以利用array对象的length属性来获取数组长度,该属性可设置或返回数组中元素的数目,只需要使用“array.length”语句即可返回表示数组对象的元素个数的数值,也就是长度值。php中文网还提供JavaScript数组的相关下载、相关课程等内容,供大家免费下载使用。

553

2023.06.20

js刷新当前页面
js刷新当前页面

js刷新当前页面的方法:1、reload方法,该方法强迫浏览器刷新当前页面,语法为“location.reload([bForceGet]) ”;2、replace方法,该方法通过指定URL替换当前缓存在历史里(客户端)的项目,因此当使用replace方法之后,不能通过“前进”和“后退”来访问已经被替换的URL,语法为“location.replace(URL) ”。php中文网为大家带来了js刷新当前页面的相关知识、以及相关文章等内容

374

2023.07.04

js四舍五入
js四舍五入

js四舍五入的方法:1、tofixed方法,可把 Number 四舍五入为指定小数位数的数字;2、round() 方法,可把一个数字舍入为最接近的整数。php中文网为大家带来了js四舍五入的相关知识、以及相关文章等内容

731

2023.07.04

js删除节点的方法
js删除节点的方法

js删除节点的方法有:1、removeChild()方法,用于从父节点中移除指定的子节点,它需要两个参数,第一个参数是要删除的子节点,第二个参数是父节点;2、parentNode.removeChild()方法,可以直接通过父节点调用来删除子节点;3、remove()方法,可以直接删除节点,而无需指定父节点;4、innerHTML属性,用于删除节点的内容。

477

2023.09.01

JavaScript转义字符
JavaScript转义字符

JavaScript中的转义字符是反斜杠和引号,可以在字符串中表示特殊字符或改变字符的含义。本专题为大家提供转义字符相关的文章、下载、课程内容,供大家免费下载体验。

394

2023.09.04

js生成随机数的方法
js生成随机数的方法

js生成随机数的方法有:1、使用random函数生成0-1之间的随机数;2、使用random函数和特定范围来生成随机整数;3、使用random函数和round函数生成0-99之间的随机整数;4、使用random函数和其他函数生成更复杂的随机数;5、使用random函数和其他函数生成范围内的随机小数;6、使用random函数和其他函数生成范围内的随机整数或小数。

990

2023.09.04

如何启用JavaScript
如何启用JavaScript

JavaScript启用方法有内联脚本、内部脚本、外部脚本和异步加载。详细介绍:1、内联脚本是将JavaScript代码直接嵌入到HTML标签中;2、内部脚本是将JavaScript代码放置在HTML文件的`<script>`标签中;3、外部脚本是将JavaScript代码放置在一个独立的文件;4、外部脚本是将JavaScript代码放置在一个独立的文件。

656

2023.09.12

Js中Symbol类详解
Js中Symbol类详解

javascript中的Symbol数据类型是一种基本数据类型,用于表示独一无二的值。Symbol的特点:1、独一无二,每个Symbol值都是唯一的,不会与其他任何值相等;2、不可变性,Symbol值一旦创建,就不能修改或者重新赋值;3、隐藏性,Symbol值不会被隐式转换为其他类型;4、无法枚举,Symbol值作为对象的属性名时,默认是不可枚举的。

551

2023.09.20

Golang gRPC 服务开发与Protobuf实战
Golang gRPC 服务开发与Protobuf实战

本专题系统讲解 Golang 在 gRPC 服务开发中的完整实践,涵盖 Protobuf 定义与代码生成、gRPC 服务端与客户端实现、流式 RPC(Unary/Server/Client/Bidirectional)、错误处理、拦截器、中间件以及与 HTTP/REST 的对接方案。通过实际案例,帮助学习者掌握 使用 Go 构建高性能、强类型、可扩展的 RPC 服务体系,适用于微服务与内部系统通信场景。

8

2026.01.15

热门下载

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

精品课程

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

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