ECMAScript 6 学习:Promise篇

2024-05-09 18:48
文章标签 学习 promise ecmascript

本文主要是介绍ECMAScript 6 学习:Promise篇,希望对大家解决编程问题提供一定的参考价值,需要的开发者们随着小编来一起学习吧!

 

Promise是异步编程的一种解决方案。Promise对象,可以将异步操作以同步操作的流程表达出来,避免了层层嵌套的回调函数。

从0到1实现Promise 这篇文章详细地介绍了Promise的实现,值得细细研读。

 

 

1、Promise 新建后就会立即执行

 

2、调用 resolve 或 reject 并不会终结 Promise 的参数函数的执行

// 调用resolve(1)以后,后面的console.log(2)还是会执行,并且会首先打印出来
new Promise((resolve, reject) => {resolve(1);console.log(2);
}).then(r => {console.log(r);
});
// 2
// 1

 

3、Promise 内部的错误不会影响到 Promise 外部的代码

const someAsyncThing = function() {return new Promise(function(resolve, reject) {// 下面一行会报错,因为x没有声明resolve(x + 2);});
};someAsyncThing().then(function() {console.log('everything is great');
});setTimeout(() => { console.log(123) }, 2000);// 浏览器打印出错误提示后,不会退出进程、终止脚本执行,2 秒之后还是会输出123// Uncaught (in promise) ReferenceError: x is not defined
// 123

 

4、finally 方法的回调函数不接受任何参数,本质上是 then 方法的特例

finally是某些库对Promise实现的一个扩展方法,无论是resolve还是reject,都会走finally方法

下面是对finally方法的简单实现:

MyPromise.prototype.finally = function(fn) {return this.then(value => {fn();return value;}, reason => {fn();throw reason;});
};

finally 方法总是返回原来的值

// resolve 的值是 undefined
Promise.resolve(2).then(() => {}, () => {})// resolve 的值是 2
Promise.resolve(2).finally(() => {})// reject 的值是 undefined
Promise.reject(3).then(() => {}, () => {})// reject 的值是 3
Promise.reject(3).finally(() => {})

 

5、Promise.reject()方法的参数,会原封不动地作为 reject 的理由,变成后续方法的参数

// Promise.reject方法的参数是一个thenable对象
// 执行以后,后面catch方法的参数不是reject抛出的“出错了”这个字符串,而是thenable对象
const thenable = {then(resolve, reject) {reject('出错了');}
};Promise.reject(thenable)
.catch(e => {console.log(e === thenable)
})
// true

 

6、Generator 函数与 Promise 的结合

function getFoo() {// console.log('执行getFoo');return new Promise(function (resolve, reject) {resolve('foo');});
}const g = function* () {try {// next方法将指针移到getFoo()才执行函数getFoo// 第一次调用next方法,执行到getFoo()结束,此时还没有给foo赋值console.log(111);const foo = yield getFoo();// yield表达式本身没有返回值,或者说总是返回undefined。// next方法可以带一个参数,该参数就会被当作上一个yield表达式的返回值// 第二次调用next方法(此时带参数'foo'),才给foo赋值,并打印fooconsole.log(foo);} catch (e) {console.log(e);}
};function run(generator) {const it = generator(); // 生成遍历器对象function go(result) {// console.log('result', result);if (result.done) return result.value;return result.value.then(function (value) {// console.log('value', value);return go(it.next(value));}, function (error) {return go(it.throw(error));});}go(it.next());
}run(g);

 

7、如何停止一个Promise链

假设这样一个场景,我们有一个很长的Promise链式调用,这些Promise是依次依赖的关系,如果链条中的某个Promise出错了,就不需要再向下执行了,默认情况下,我们是无法实现这个需求的,因为Promise无论是then还是catch都会返回一个Promise,都会继续向下执行thencatch。举例:

new Promise(function(resolve, reject) {resolve(1111)
}).then(function(value) {// "ERROR!!!"
}).catch().then().then().catch().then()

有没有办法让这个链式调用在ERROR!!!的后面就停掉,完全不去执行链式调用后面所有回调函数呢?

我们自己封装一个Promise.stop方法。

MyPromise.stop = function() {return new Promise(function() {});
};

stop中返回一个永远不执行resolve或者rejectPromise,那么这个Promise永远处于pending状态,所以永远也不会向下执行thencatch了。这样我们就停止了一个Promise链。

new MyPromise(function(resolve, reject) {resolve(1111)
}).then(function(value) {// "ERROR!!!"MyPromise.stop();
}).catch().then().then().catch().then()

但是这样会有一个缺点,就是链式调用后面的所有回调函数都无法被垃圾回收器回收。

 

8、如何解决Promise链上返回的最后一个Promise出现错误

看如下例子:

new Promise(function(resolve) {resolve(42)
}).then(function(value) {a.b = 2;
});

这里a不存在,所以给a.b赋值是一个语法错误,onFulfilled回调函数是包在try...catch中执行的,错误会被catch到,但是由于后面没有thencatch了,这个错误无法被处理,就会被Promise吃掉,没有任何异常,这就是常说的Promise有可能会吃掉错误

那么我们怎么处理这种情况呢?

方法一

使用done()

new Promise(function(resolve) {resolve(42)
}).then(function(value) {a.b = 2;
}).done();

done()方法相当于一个catch,但是却不再返回Promise了,注意done()方法中不能出现语法错误,否则又无法捕获了。

done方法作为Promise链式调用的最后一步,用来向全局抛出没有被Promise内部捕获的错误,并且不再返回一个Promise。一般用来结束一个Promise链。

下面是done()方法的简单实现:

MyPromise.prototype.done = function() {this.catch(reason => {console.log('done', reason);throw reason;});
};

 

方法二

普通错误监听windowerror事件可以实现捕获

window.addEventListener('error', error => {console.log(error); // 不会触发
});

Promise没有被onRejected()处理的错误需要监听unhandledrejection事件

window.addEventListener('unhandledrejection', error=>
{console.log(error); // 打印"Hello, Fundebug!"
});function foo()
{Promise.reject('Hello, Fundebug!');
}foo();

 

PromiseA+规范

JavaScript Promise迷你书(中文版)

 

这篇关于ECMAScript 6 学习:Promise篇的文章就介绍到这儿,希望我们推荐的文章对编程师们有所帮助!



http://www.chinasem.cn/article/974202

相关文章

Java学习手册之Filter和Listener使用方法

《Java学习手册之Filter和Listener使用方法》:本文主要介绍Java学习手册之Filter和Listener使用方法的相关资料,Filter是一种拦截器,可以在请求到达Servl... 目录一、Filter(过滤器)1. Filter 的工作原理2. Filter 的配置与使用二、Listen

Java进阶学习之如何开启远程调式

《Java进阶学习之如何开启远程调式》Java开发中的远程调试是一项至关重要的技能,特别是在处理生产环境的问题或者协作开发时,:本文主要介绍Java进阶学习之如何开启远程调式的相关资料,需要的朋友... 目录概述Java远程调试的开启与底层原理开启Java远程调试底层原理JVM参数总结&nbsMbKKXJx

Javascript访问Promise对象返回值的操作方法

《Javascript访问Promise对象返回值的操作方法》这篇文章介绍了如何在JavaScript中使用Promise对象来处理异步操作,通过使用fetch()方法和Promise对象,我们可以从... 目录在Javascript中,什么是Promise1- then() 链式操作2- 在之后的代码中使

Java深度学习库DJL实现Python的NumPy方式

《Java深度学习库DJL实现Python的NumPy方式》本文介绍了DJL库的背景和基本功能,包括NDArray的创建、数学运算、数据获取和设置等,同时,还展示了如何使用NDArray进行数据预处理... 目录1 NDArray 的背景介绍1.1 架构2 JavaDJL使用2.1 安装DJL2.2 基本操

HarmonyOS学习(七)——UI(五)常用布局总结

自适应布局 1.1、线性布局(LinearLayout) 通过线性容器Row和Column实现线性布局。Column容器内的子组件按照垂直方向排列,Row组件中的子组件按照水平方向排列。 属性说明space通过space参数设置主轴上子组件的间距,达到各子组件在排列上的等间距效果alignItems设置子组件在交叉轴上的对齐方式,且在各类尺寸屏幕上表现一致,其中交叉轴为垂直时,取值为Vert

Ilya-AI分享的他在OpenAI学习到的15个提示工程技巧

Ilya(不是本人,claude AI)在社交媒体上分享了他在OpenAI学习到的15个Prompt撰写技巧。 以下是详细的内容: 提示精确化:在编写提示时,力求表达清晰准确。清楚地阐述任务需求和概念定义至关重要。例:不用"分析文本",而用"判断这段话的情感倾向:积极、消极还是中性"。 快速迭代:善于快速连续调整提示。熟练的提示工程师能够灵活地进行多轮优化。例:从"总结文章"到"用

【前端学习】AntV G6-08 深入图形与图形分组、自定义节点、节点动画(下)

【课程链接】 AntV G6:深入图形与图形分组、自定义节点、节点动画(下)_哔哩哔哩_bilibili 本章十吾老师讲解了一个复杂的自定义节点中,应该怎样去计算和绘制图形,如何给一个图形制作不间断的动画,以及在鼠标事件之后产生动画。(有点难,需要好好理解) <!DOCTYPE html><html><head><meta charset="UTF-8"><title>06

学习hash总结

2014/1/29/   最近刚开始学hash,名字很陌生,但是hash的思想却很熟悉,以前早就做过此类的题,但是不知道这就是hash思想而已,说白了hash就是一个映射,往往灵活利用数组的下标来实现算法,hash的作用:1、判重;2、统计次数;

零基础学习Redis(10) -- zset类型命令使用

zset是有序集合,内部除了存储元素外,还会存储一个score,存储在zset中的元素会按照score的大小升序排列,不同元素的score可以重复,score相同的元素会按照元素的字典序排列。 1. zset常用命令 1.1 zadd  zadd key [NX | XX] [GT | LT]   [CH] [INCR] score member [score member ...]

【机器学习】高斯过程的基本概念和应用领域以及在python中的实例

引言 高斯过程(Gaussian Process,简称GP)是一种概率模型,用于描述一组随机变量的联合概率分布,其中任何一个有限维度的子集都具有高斯分布 文章目录 引言一、高斯过程1.1 基本定义1.1.1 随机过程1.1.2 高斯分布 1.2 高斯过程的特性1.2.1 联合高斯性1.2.2 均值函数1.2.3 协方差函数(或核函数) 1.3 核函数1.4 高斯过程回归(Gauss