ECMAScript笔记——Promise

最新推荐文章于 2024-07-26 20:46:33 发布
最新推荐文章于 2024-07-26 20:46:33 发布
阅读量159 收藏
点赞数
分类专栏： 前端 文章标签： javascript
版权声明：本文为博主原创文章，遵循 CC 4.0 BY-SA 版权协议，转载请附上原文出处链接和本声明。
本文链接：https://blog.csdn.net/LinHt_CSDN/article/details/108349210
版权

Promise 概述

  • Promise是ES6中提供的优化异步操作的解决方案。解决了ES6之前异步操作，反复嵌套回调函数所导致的回调地狱问题。
  • 从语法上来讲，Promise是一个构造函数，它可以获取异步操作的请求，且返回一个结果。Promise有三种状态：pending(等待)，fulfiled(成功)，rejected(失败)。状态一旦改变，就不会再变。创造Promise实例后，它会立即执行。

什么是回调地狱

在开发中，会遇到一个异步请求后再执行另一个异步请求的情况。例如请求一个列表数据，之后根据列表找到索引，再去请求分类…一直请求，每一次异步请求，都需要反复嵌套回调函数，导致代码可读性大大降低，后期难以维护。

创建Promise实例

  • 创建一个Promise对象。
  • 调用then()和catch()去处理结果。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

fullPromise.catch((res) => {
	console.log(res);
})

创建成功的Promise对象——简写resolve

let p = Promise.resolve('Success Promise');

创建失败的Promise对象——简写reject

let p = Promise.reject('Error Promise');

Resolve()，Reject()

  • Promise对象是由关键字new及其构造函数来创建的，构建函数后，会把一个叫做“处理器函数”（executor function）的函数作为它的参数，并且传入两个参数：resolve，reject，当异步任务顺利完成返回结果时，会调用resolve，而当异步任务失败返回结果时（通常是一个错误对象），会调用reject。
  • 其实这里用“成功”和“失败”来描述并不准确，按照标准来讲，resolve是将Promise的状态置为fullfiled，reject是将Promise的状态置为rejected。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

这里if设置为true，也就是输出resolve('Success Promise')。

打印结果:
在这里插入图片描述
将if设置为false，也就是输出reject('Error Promise')。

let fullPromise = new Promise((resolve,reject) => {
	if (false) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

打印结果:
在这里插入图片描述
可以看到，通过调用resolve()和reject()改变了Promise对象的状态。

Then()的用法

  • then()是定义在原型上的 Promise.prototype 。
  • then()之后会返回一个新的promise对象。
  • then()中可以传入两个参数，是函数。第一个对应resolve的回调，第二个对应reject的回调。
let fullPromise = new Promise((resolve,reject) => {
	if (true) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

打印结果：
在这里插入图片描述
可以看到then()对应resolve()获取到了结果res。

将if设置为false:

let fullPromise = new Promise((resolve,reject) => {
	if (false) {
		resolve('Success Promise');
	} else {
		reject('Error Promise');
	}
})

console.log(fullPromise);

fullPromise.then((res) => {
        console.log('resolved',res);
    },(err) => {
        console.log('rejected',err);
    }
)

打印结果：
在这里插入图片描述
可以看到then()对应reject()获取到了结果err。

通过then()就能把原来的回调写法分离出来，在异步操作执行完后，用链式调用的方式执行回调函数。

链式操作的用法

  • 从表面上看，Promise只是能够简化层层回调的写法，而实质上，Promise的精髓是“状态”，用维护状态、传递状态的方式来使得回调函数能够及时调用，它比传递callback函数要简单、灵活的多。
  • 可以在then()中继续写Promise对象并返回，然后继续调用then()来进行回调操作。

所以使用Promise的正确场景是这样的：

function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP Success');
		},2000);
	});

	return timeP;
}

runTimeP()
.then((res) => {
        console.log('resolved1',res);
        return runTimeP();
    },(err) => {
        console.log('rejected1',err);
    }
)
.then((res) => {
        console.log('resolved2',res);
        return runTimeP();
    },(err) => {
        console.log('rejected2',err);
    }
)
.then((res) => {
        console.log('resolved3',res);
        return runTimeP();
    },(err) => {
        console.log('rejected3',err);
    }
)

打印结果：
在这里插入图片描述

  • 在上面的代码中，执行了一个异步操作setTimeout()，2秒后，调用resolve()。
  • 在runTimeP()中传给resolve的数据，通过直接returnPromise对象，能在接下来的then()中拿到。
  • 实现了按顺序每隔两秒输出异步请求返回的结果，而且解决了回调地狱的问题。

Catch()的用法

  • catch()和then()的第二个参数一样，用来指定reject的回调，效果和写在then()第二个参数里面一样。
  • catch()还有另外一个作用：在执行resolve的回调时，还会捕捉resolved抛出的异常。
function runTimeP(){
	let timeP = new Promise((resolve,reject) => {
		if (true) {
			setTimeout(function(){
				resolve('TimeP Success');
			},2000);
		} else {
			reject('Time Error');
		}
	});

	return timeP;
}

runTimeP()
.then((res) => {
	console.log(message);	//未定义message
	console.log(res);
})
.catch((res) => {
	console.log('rejected');
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 上方代码中，在then()中打印了一个未声明的变量message，本来应该报错，但是Js没有报错，而且还运行了catch()中的内容。

All()的使用

  • Promise的all()提供了并行执行异步操作的能力，并且在所有异步操作执行完后才执行回调。
  • all()的参数是对象数组。数组内所有的Promise对象状态为fulfiled时，该对象就为fulfiled。只要数组中有任意一个Promise对象状态为rejected，该对象就为rejected。
let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP2 Success');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.all([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 三个Promise对象都为fulfiled，设置了setTimeout()，分别是3秒后，5秒后，10秒后。
  • 可以看到，使用了all()之后，所有异步操作执行完后才执行回调。

其中Promise对象存在rejected的情况：

let num = 0;
let timer = setInterval(function(){
	num++;
	console.log(num);
},1000)

function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			reject('TimeP2 Error');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.all([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})
.catch((res) => {
	clearInterval(timer);
	console.log(res);
})

打印结果：
在这里插入图片描述

  • 因为其中有一个Promise对象的状态为rejected，导致all()的状态也为rejected，结果并没有返回。
  • 有了all()，就可以并行执行多个异步操作，并且在一个then()中处理所有的返回数据。

Race()的用法

  • all()是在所有异步操作执行完后才执行回调。与all()相反，第一个异步操作执行完后，以它为准执行回调，这就是race()。
  • race()的用法和all()一样，race()的参数也是数组对象，当数组中所有的Promise对象，有一个先执行了何种状态，该对象就为何种状态，并执行相应函数。
function runTimeP1(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP1 Success');
		},3000);
	})
	return timeP;
}
function runTimeP2(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			reject('TimeP2 Error');
		},5000);
	})
	return timeP;
}
function runTimeP3(){
	let timeP = new Promise((resolve,reject) => {
		setTimeout(function(){
			resolve('TimeP3 Success');
		},10000);
	})
	return timeP;
}

Promise.race([runTimeP1(),runTimeP2(),runTimeP3()])
.then((res) => {
	clearInterval(timer);
	console.log(res);
})
.catch((res) => {
	console.log(res);
})

打印结果：
在这里插入图片描述

  • race()执行了最早运行的runTimeP1()。
  • race()可以用在请求获取上，设置setTimeout()，当获取超时，race()就会执行setTimeout()。
LinHt_CSDN
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
专栏目录
ECMAScript笔记——Proxy
LinHt_CSDN的博客
09-12 170
代理器（Proxy） 概述 代理器可以理解成在目标对象前架设一个“拦截”层，外界对该对象的访问都必须先通过这层拦截，因此提供了一种机制可以对外界的访问进行过滤和改写。 在Proxy代理的的情况下，目标对象内部的this关键字会指向Proxy代理。 有些原生对象的内部属性只有通过正确的this才能获取，所以Proxy也无法代理这些原生对象的属性。这种情况下可以通过使用bind()解决这个问题。 代理器（Proxy）使用 let p = new Proxy(target, handler); 其中，ta
Promise笔记发布 (1).txt
07-31
为了简化异步编程，ECMAScript 6 引入了`Promise`对象。 **Promise**可以理解为一个容器，它保存着某个未来才会结束的事件（通常是异步操作）的结果。从语法的角度来看，`Promise`是一个对象，通过它可以获取到异步...
Promise 的基础用法
weixin_30629653的博客
05-03 69
Promise 是异步编程的一种解决方案，比传统的解决方案–回调函数和事件－－更合理和更强大。它由社区最早提出和实现，ES6将其写进了语言标准，统一了语法，原生提供了Promise 所谓Promise ，简单说就是一个容器，里面保存着某个未来才回结束的事件(通常是一个异步操作）的结果。从语法上说，Promise是一个对象，从它可以获取异步操作的消息。Promise 对象的状态不受外界影响 三...
ECMAScript6中Promise对象的基本用法
gdjlc的专栏
03-21 142
Promise是处理异步代码的一种方法，避免了层层嵌套的回调函数，且支持链式操作。 Promise 对象代表一个异步操作，有三种状态： pending: 初始状态，不是成功或失败状态。 fulfilled: 意味着操作成功完成。 rejected: 意味着操作失败。 Promise 对象的状态改变，只有两种可能：从 Pending 变为 Resolved 和从 Pending 变为 Rejected。 一、Promise的创建 Promise的构造函数接收一个函数作为参数，该函数的两个参数：resol
从头手写一个Promise
weixin_34062329的博客
05-13 129
前言 在javascript的世界中，所有代码都是单线程执行的。由于这个“缺陷”，导致JavaScript的所有网络操作，浏览器事件，都必须是异步执行。 最开始我们可以用回调函数来解决这个问题， function callBack(){ console.log('回调') } setTimeout(callBack, 1000) // 回调 复制代码但是随着业务的不断深入，难免会像陷入回调地狱这样...
Promise构造函数的错误处理
lxtlog的博客
03-01 259
1. then()方法 then是Promise构造函数的实例方法。第一个参数是成功状态的回调函数，第二个参数是失败状态的回调函数。 new Promise((resolve, reject) => { reject('error') }).then(data => { console.log(data) }, error => { console.log(error) // error }) 2. catch()方法 catch是Promise构造函数的实例方法。实...
ECMAScript6中的promise对象
dawn0718的专栏
10-13 315
　　promise是EAMCScript6中很重要的一个对象，需要掌握一些细节，这是学习promise的笔记。
web开发技术——课程笔记.rar
03-17
ECMAScript（ES）的最新版本引入了许多新特性，如箭头函数、模板字符串、解构赋值、let和const、Promise和async/await等，提升了JavaScript的编写效率和代码质量。 8. 测试与调试： 了解如何使用Chrome DevTools...
狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记
06-20
综上所述，"狂神说——大前端进阶NodeJS、Npm、Es6、Babel、Webpack、模块化使用笔记"这个主题涵盖了现代前端开发的重要技术栈。Node.js作为后端基础，Npm辅助管理依赖，ES6提供了更优雅的语法，Babel确保了新特性的...
前端资源集合——大厂不是梦(doge
04-02
这个名为"前端资源集合——大厂不是梦(doge"的压缩包文件显然包含了帮助开发者提升技能并迈向顶级公司的资源。让我们详细了解一下其中涉及的关键知识点。 首先，HTML（HyperText Markup Language）是网页的基础，...
tool:个人代码库及日常工作中的笔记
05-18
6. **ES6及后续版本**：随着ECMAScript新特性的不断推出，例如箭头函数、Promise、async/await等，学习并运用这些特性能提高代码的可读性和简洁性。 【压缩包子文件的文件名称列表】：tool-master "tool-master"这...
前端知识之promise
qq_37169866的博客
02-25 3952
什么是promise？ promise 是 ES6 中提供的原生对象 promise主要用于异步计算，将异步操作队列化，按照期望的顺序执行以返回符合预期的结果 promise的作用 咱们先了解什么是同步，什么是异步 举个形象的例子： 同步就是你叫我去吃饭，我听到了就和你去吃饭；如果没有听到，你就不停的叫，直到我告诉你听到了，才一起去吃饭。 异步就是你叫我，然后自己去吃饭，我得到消息后可能立即走，也可能等到下班才去吃饭。 还有个简单的例子 打电话是同步 发消息是异步 异步操作的常见语法（ajax） /
ECMAScript6标准Promise的使用
jasonzds的博客
10-27 2638
1， Promise的含义 Promise是异步编程的一种解决方案，比传统的解决方案更合理更强大，es6将其写入语言标准，同意用法，原生提供了Proimse对象，所谓Promise简单的说就是一个容器，里面保存着某个未来才会结束的事件，Promise提供统一的API(https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference
promise
weixin_34290096的博客
03-13 263
一个promise可能有三种状态：等待（pending）、已完成（fulfilled）、已拒绝（rejected） 一个promise的状态只可能从“等待”转到“完成”态或者“拒绝”态，不能逆向转换，同时“完成”态和“拒绝”态不能相互转换 promise必须实现then方法（可以说，then就是promise的核心），而且then必须返回一个promise，同一个promise的then可...
ECMAScript6中的promise用法
style201904的博客
06-14 484
promise用法 <script> /** * promise对象 * promise对象 代表着未来发生的事情 * 这个里面 我们主要在强调一下 异步的操作 * 因为promise对象 一般都是异步的处理方式 * aysnc false 同步的 true 异步的 * 同步 锁死的浏览器 其...
ECMAScript之Promise
阿祥_CSDN
04-20 260
参考资料 https://promisesaplus.com/ https://developer.mozilla.org/en-US/docs/Web/JavaScript/Reference/Global_Objects/Promise 案例 setTimeout 和 Promise 执行顺序 示例代码如下： setTimeout(() =&gt; conso...
ECMAScript-异步编程-Promise
东东爱编码博客
11-23 145
文章目录一、 ECMAScript-异步编程-Promise1. MDN定义2. Promise的几种状态3. 相关静态方法4. 相关案例5. 使用promise来改造ajax 一、 ECMAScript-异步编程-Promise 1. MDN定义 Promise 对象用于表示一个异步操作的最终完成 (或失败)及其结果值。 一个 Promise 对象代表一个在这个 promise 被创建出来时不一定已知的值。它让您能够把异步操作最终的成功返回值或者失败原因和相应的处理程序关联起来。 这样使得异步方法可以像
JavaScript青少年简明教程：函数及其相关知识（下）
最新发布
cnds123的专栏
07-26 652
JavaScript青少年简明教程：函数及其相关知识（下）
ECMAScript的Promise
02-29
ECMAScript的Promise是一种用于处理异步操作的对象。它可以将异步操作封装成一个Promise对象，通过链式调用的方式来处理异步操作的结果。 Promise对象有三种状态：pending（进行中）、fulfilled（已成功）和...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

当前余额3.43元 前往充值 >
需支付：10.00元
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包
实付元
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明：

1.余额是钱包充值的虚拟货币，按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载，可以购买VIP、付费专栏及课程。

余额充值