深入理解ES6--11.Promise与异步编程

最新推荐文章于 2022-10-10 20:15:09 发布
最新推荐文章于 2022-10-10 20:15:09 发布
阅读量109 收藏
点赞数
原文链接：https://juejin.im/post/5aeac63d518825672a02c2cf
版权

主要知识点：Promise生命周期、Promise基本操作、Promise链、响应多个Promise以及集成Promise

1. Promise基础

什么是回调地狱？

当使用回调函数来进行事件处理的时候，如果嵌套多层回调函数的时候，就会出现回调地狱，例如：

method1(function(err, result) {
	if (err) {
		throw err;
	} 
	method2(function(err, result) {
		if (err) {
			throw err;
		} 
		method3(function(err, result) {
			if (err) {
				throw err;
			} 
			method4(function(err, result) {
				if (err) {
					throw err;
				} 
				method5(result);
			});
		});
	});
});
复制代码

像本例一样嵌套多个方法调用会创建错综复杂的代码，会难以理解与调试。当想要实现更复 杂的功能时，回调函数也会存在问题。要是你想让两个异步操作并行运行，并且在它们都结 束后提醒你，那该怎么做？要是你想同时启动两个异步操作，但只采用首个结束的结果，那 又该怎么做？而使用Promise就能避免回调地狱的情况。

Promise可以当做是一个占位符，表示异步操作的执行结果。函数可以返回一个Promise，而不必订阅一个事件或者向函数传递一个回调函数。

Promise的生命周期

每个 Promise 都会经历一个短暂的生命周期，初始为挂起状态（pending state） ，这表示异步操作尚未结束。一个挂起的 Promise 也被认为是未决的（unsettled )。一旦异步操作结束， Promise就会被认为是已决的（settled ） ，并进入两种可能状态之一：

  1. 已完成（fulfilled ） ： Promise 的异步操作已成功结束；
  2. 已拒绝（rejected ） ： Promise 的异步操作未成功结束，可能是一个错误，或由其他原因导致。

内部的[[PromiseState]] 属性会被设置为"pending" 、 "fulfilled" 或 "rejected"，以反映Promise的状态。该属性并未在 Promise 对象上被暴露出来，因此你无法以编程方式判断 Promise 到底处于哪种状态。不过你可以使用then()方法在 Promise 的状态改变时执行一些特定操作。

  1. then()方法

    then()方法在所有的 Promise 上都存在，并且接受两个参数。第一个参数是 Promise 被完成时要调用的函数，异步操作的结果数据都会被传入这个完成函数。第二个参数则是 Promise 被拒绝时要调用的函数，与完成函数相似，拒绝函数会被传入与拒绝相关联的任何附加数据。then()方法的两个参数是可选的，因此可以自由组合监听完成和失败的处理函数；

  2. catch()方法

    Promise有catch()方法，等同于只传递拒绝处理函数给then()方法：

     promise.catch(function(err) {
 	// 拒绝
 	console.error(err.message);
 });
 // 等同于：
 promise.then(null, function(err) {
 	// 拒绝
 	console.error(err.message);
 });
复制代码

创建未决的Promise

使用Promise构造器可以创建一个Promise实例，此构造器接收一个参数：一个被称之为执行器（excutor）的函数，该函数包含了resolve()函数和reject()函数这两个参数。resolve()函数在异步任务执行成功时调用，而reject()函数在异步任务执行失败时调用。例如：

let promise = new Promise(function(resolve,reject){
	console.log('hi, promise');
	resolve();

});

promise.then(()=>{
	console.log('hi, then');

});

console.log('hi');

输出：
hi, promise
hi
hi then
复制代码

从输出结果可以看出，Promise构造器中的代码是最先执行的，而then()代码是最后执行的，这是因为只有在Promise中的处理器函数执行结束之后，then()方法中的完成处理函数或者拒绝处理函数才会添加到作业队列的尾部。

创建已决的Promise

  1. 使用Promise.resolve()

Promise.resolve()方法接收一个参数，并会返回一个处于已完成状态的 Promise ，在then()方法中使用完成处理函数才能提取该完成态的Promise传递的值，例如：

let promise = Promise.resolve('hi');
promise.then((value)=>{
	console.log(value); //hi
});
复制代码
  1. 使用Promise.reject()

可以使用Promise.reject()方法来创建一个已拒绝状态的Promise，同样只有在拒绝处理函数中或者catch()方法中才能接受reject()方法传递的值：

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

reject.catch((value)=>{
	console.log(value); //reject
})
复制代码

非Promise的thenable

当一个对象拥有一个能接受resolve与reject参数的then()方法时，该对象就会被认为是一个非Promise的thenable，例如：

let thenable = {

	then:function(resolve,reject){
		resolve('hi');
	}
}
复制代码

Promise.resolve()与Promise.reject()方法都能够接受非Promise的thenable作为参数，当传入了非Promise的thenable时，这些方法会创建一个新的Promise，并且可以使用then()方法对不同状态进行操作：

创建一个已完成的Promise

let thenable = {

	then:function(resolve,reject){
		resolve('hi');
	}
}

let promise = Promise.resolve(thenable);
promise.then((value)=>{
	console.log(value); //hi
});
复制代码

同样利用thenable可以创建一个已拒绝的Promise:

let thenable = {

	then:function(resolve,reject){
		reject('hi');
	}
}

let promise = Promise.resolve(thenable);
promise.then(null,(value)=>{
	console.log(value);
});
复制代码

执行器错误

当执行器内部抛出错误，那么Promise的拒绝处理函数就会被调用，例如：

let promise = new Promise(function(resolve,reject){
	throw new Error('Error!');

})

promise.catch(function(msg){
	console.log(msg); //error
})
复制代码

2. Promise链

除了使用单个Promise外，多个Promise可以进行级联使用，实际上then()方法或者catch()方法会返回一个新的Promise，仅当前一个Promise被决议之后，后一个Promise才会进行处理。

串联Promise

let p1 = new Promise(function(resolve,reject){
	resolve('hi');
});

p1.then((value)=>{
	console.log(value);
	throw new Error('Error!');
}).catch(function(error){
	console.log(error);
})
复制代码

可以看出当p1的then()方法执行结束后会返回一个Promise，因此，在此基础上可以继续执行catch()方法。同时，Promise链允许捕获前一个Promise的错误。

Promise链中传递值

**Promise链的另一个重要方面是能从一个Promise传递数据给另一个Promise的能力。**前一个Promise的完成处理函数的返回值，传递到下一个Promise中。

//Promise链传递值

let p1 = new Promise(function(resolve,reject){
	resolve(1);
})

p1.then(value=>value+1)
.then(value=>{
	console.log(value);
})
复制代码

p1的完成处理函数返回了value+1，也就是2，会传入到下一个Promise的完成处理函数，因此，第二个then()方法中的完成处理函数就会输出2。拒绝处理函数同样可以被用于在Promise链中传递数据。

Promise链中传递Promise

在完成或者拒绝处理函数中可以返回基本类型值，从而可以在Promise链中传递。另外，在Promise链中也可以传递对象，如果传递的是Promise对象，就需要额外的处理：

传递已完成状态的Promise：

let p1 = new Promise(function(resolve,reject){
	resolve(1);
});

let p2 = new Promise(function(resolve,reject){
	resolve(2);
})

p1.then(value=>{
	console.log(value);
	return p2;
}).then(value=>{
	console.log(value);
});
输出：1  2
复制代码

p1中返回了Promise对象p2，当p2完成时，才会调用第二个then()方法，将值value传到完成处理函数中。若Promise对象p2被拒绝后，第二个then()方法中的完成处理函数就不会执行，只能通过拒绝处理函数才能接收到p2传递的值：

let p1 = new Promise(function(resolve,reject){
	resolve(1);
});

let p2 = new Promise(function(resolve,reject){
	reject(2);
})

p1.then(value=>{
	console.log(value);
	return p2;
}).catch(value=>{
	console.log(value);
});
复制代码

3. 响应多个Promise

如果想监视多个Promise的状态，从而决定下一步动作，可以使用ES6提供的两个方法：Promise.all()和Promise.race()；

Promise.all()

Promise.all()方法能接受单个可迭代对象（如数组）作为参数，可迭代对象的元素都是Promise。该方法会返回一个Promise，只有传入所有的Promise都已完成，所返回的Promise才会完成，例如：

//Promise.all()
let p1 = new Promise(function(resolve,reject){
	resolve(1);
})

let p2 = new Promise(function(resolve,reject){
	resolve(2);
})

let p3 = new Promise(function(resolve,reject){
	resolve(3);
})

let p4 = Promise.all([p1,p2,p3]);
p4.then(value=>{
	console.log(Array.isArray(value)); //true
	console.log(value); //[1,2,3]
})
复制代码

对 Promise.all() 的调用创建了新的Promise p4，在 p1 、 p2 与 p3 都被完成后， p4 最终会也被完成。传递给 p4 的完成处理函数的结果是一个包含每个决议值（1 、 2 与 3 ） 的数组，这些值的存储顺序保持了待决议的 Promise 的顺序（与完成的先后顺序无关） ，因此你可以将结果匹配到每个Promise。

若传递给Promise.all() 的某个 Promise 被拒绝了，那么方法所返回的 Promise 就会立刻被拒绝，而不必等待其他的 Promise 结束：

//Promise.all()
let p1 = new Promise(function(resolve,reject){
	resolve(1);
})

let p2 = new Promise(function(resolve,reject){
	reject(2);
})

let p3 = new Promise(function(resolve,reject){
	resolve(3);
})

let p4 = Promise.all([p1,p2,p3]);
p4.catch(value=>{
	console.log(Array.isArray(value)); //true
	console.log(value); //2
})
复制代码

在此例中， p2 被使用数值 2 进行了拒绝，则 p4 的拒绝处理函数就立刻被调用，而不会 等待 p1 或 p3 结束执行（它们仍然会各自结束执行，只是 p4 不等它们） 。

拒绝处理函数总会接受到单个值，而不是一个数组。该值是被拒绝的Promise所返回的拒绝值。

Promise.race()

Promise.race()方法接收一个元素是Promise的可迭代对象，并返回一个新的Promise。一旦传入Promise.race()的可迭代对象中有一个Promise是已决状态，那么返回的Promise对象就会立刻成为已决状态。

而Promise.all()方法得必须等到所有传入的Promise全部变为已决状态，所返回的Promise才会已决。

let p1 = new Promise(function(resolve,reject){
	resolve(1);
})

let p2 = new Promise(function(resolve,reject){
	resolve(2);
})

let p3 = new Promise(function(resolve,reject){
	resolve(3);
})

let p4 = Promise.race([p1,p2,p3]);
p4.then(value=>{
	console.log(Array.isArray(value)); //false
	console.log(value); //1
})
复制代码

Promise.race() 方法传入的Promise中哪一个Promise先变成已完成状态，就会将值传递给所返回的Promise对象的完成处理函数中。若哪一个Promise最先变成已拒绝状态，同样的，会将值传递给p4的拒绝处理函数中。

4. 继承Promise

可以继承Promise实现自定义的Promise，例如：

class MyPromise extends Promise {
	// 使用默认构造器
	success(resolve, reject) {
		return this.then(resolve, reject);
	} 
	failure(reject) {
		return this.catch(reject);
	}
} 
let promise = new MyPromise(function(resolve, reject) {
	resolve(42);
});
promise.success(function(value) {
	console.log(value); // 42
}).failure(function(value) {
	console.log(value);
});
复制代码

在此例中， MyPromise 从 Promise 上派生出来，并拥有两个附加方法。 success() 方法模拟了 resolve() ， failure() 方法则模拟了 reject() 。

5. 总结

  1. Promise 具有三种状态：挂起、已完成、已拒绝。一个 Promise 起始于挂起态，并在成功时转为完成态，或在失败时转为拒绝态。 then() 方法允许你绑定完成处理函数与拒绝处理函数，而 catch() 方法则只允许你绑定拒绝处理函数；

  2. 能够将多个Promise串联起来组成Promise链，并且能够在中间传递值，甚至是传递Promise对象。 then() 的调用都创建并返回了一个新的 Promise ，只有在前一个 Promise 被决议过，新 Promise 也会被决议。 同时也可以使用Promise.all()和Promise.race()方法来管理多个Promise。

weixin_34413357
关注
  • 0
    点赞
  • 踩
  • 0
    收藏
    觉得还不错? 一键收藏
  • 0
    评论
Promise的深入理解
killbee365的博客
07-01 407
一、promise 的认识 1.js的单线程 1）javascript的执行环境是单线程的 2）单线程：指JS引擎中负责解释和执行JavaScript代码的线程只有一个，也就是一次只能完成一项任务，这个任务执行完后才能执行下一个，它会「阻塞」其他任务，这个任务可称为主线程，但是实际上还有其他线程，如事件触发线程、ajax请求线程等 2.同步与异步 1）同步模式：也就是单线程模式，一次只能执行一个任务，函数调用后需等到函数执行结束，返回执行的结果，才能进行下一个任务，如果这个任务执行的时间较长，就会导致线程阻
《深入理解ES6》——Promise异步编程
杜小白的博客
10-07 274
Promise的生命周期     每个promise都会经历一个短暂的生命周期：先是处于进行中（pending）的状态，此时操作尚未完成，所以它也是未处理（unsettled）的；一旦异步操作执行结束，Promise则变为已处理（settled）的状态。已处理的状态又分为以下两种： Fulfilled  Promise异步操作成功完成 Rejected   由于程序错误或其他一些原因，Pro...
Promise深入理解
zgh472365411的博客
09-16 487
Promise深入理解
深入理解Promise
weixin_44955769的博客
01-09 317
ES6提供的Promise对象是异步控制相较于回调的更好的一种方法。包括ES8提供的asyncFunction本质上也是基于Promise和生成器的结合，因此在已经了解Promise对象的常用API基础上，更加深入的去了解如何使用Promise去解决一些常见的难题对于开发将会有一些帮助。 文章阅读前，希望读者已经对Promise的使用及相关api有了一定的了解 。[ 快速学习Promise ] 一、如何对Promise异步任务进行超时监听 任务描述 作为一道开胃小菜，这个问题还是不难解决的。平时对于一些.
Promise深入了解
qq_41487095的博客
10-10 574
promise是js中进行异步编程的解决方案。resolve：解决 函数类型的数据reject：拒绝 函数类型的数据调用then方法：第一个参数 状态为成功的回调函数；第二个参数 状态为失败的回调函数。
es6-promise@4.1.1.zip
06-18
**ES6 Promise 深入理解与应用** 在JavaScript中，由于其单线程的特性，同步执行的代码会按照顺序依次处理，这在处理I/O密集型任务时容易导致阻塞，使得用户界面无法及时响应。为了解决这个问题，Promise（承诺）...
day04-es6-课件.rar
04-18
**ES6（ECMAScript 2015）详解** ES6，全称为ECMAScript 2015，是JavaScript语言的...这个“day04-es6-课件.rar”可能涵盖了这些内容的详细讲解，通过学习，你可以更深入地理解并掌握ES6，提高JavaScript编程的能力。
前端项目-es6-tween.zip
09-03
6. **Promise**：Promise是异步编程的一种解决方案，它代表了一个操作的最终完成或失败。在tween.js动画中，可能会用到Promise来处理异步动画序列。 7. **模块导入导出**：通过`import`和`export`，ES6实现了模块化...
深入理解JS异步编程-Promise
10-16
Promise 是 ES6 新增的一个异步解决方案，它同 await 一样，是异步的解决方案，但是相比于 await，Promise 可以同时统一处理多个异步操作。这一点是很方便的。下面我们来一起学习一下吧
ES6-learning：《深入理解ES6》教程学习笔记
02-04
《深入理解ES6》是关于JavaScript的最新版本ECMAScript 2015（简称ES6）的一本深度学习教程，这本笔记旨在帮助开发者全面掌握ES6的新特性和用法。以下是一些核心知识点的详细说明： 1. **let 和 const 声明** - `...
深入了解promise
weixin_30791095的博客
12-27 75
promise汉语是承诺的意思，就是现在还没有发生将来要发生的事，大家都知道promise可以解决前端回调地狱的问题，可以promise不仅仅是解决了上述问题。promise建立了一个可信任的回调机制，单决议性无法取消，我认为这才是promise的关键，js不管是在浏览器还是在node中运行都是单线程的，通过事件循环回调函数不可避免，对于一些第三方插件，到处是回调函数，在不实用promise的情况...
JavaScript基础——Promise使用指南
weixin_33994429的博客
01-03 120
在上篇文章里《JavaScript基础——回调(callback)是什么》我们一起学习了回调，明白了回调就是一个在另外一个函数执行完后要执行的函数，如果我们希望异步函数能够像同步函数那样顺序执行，只能嵌套使用回调函数，过多的回调嵌套会使得代码变得难以理解与维护，为了避免“回调地狱”让人发狂的行为，ES6原生引入了promise的模式，通过这种方式，让我们代码看起来像同步代码，大大简化了异步编程，简...
chromedriver-mac-arm64_126.0.6474.0.zip
07-31
chromedriver-mac-arm64_126.0.6474.0.zip
chromedriver-mac-arm64_128.0.6548.0.zip
07-31
chromedriver-mac-arm64_128.0.6548.0.zip
MySQL查询加速器：利用Query Cache提升效率
07-31
MySQL是一个流行的开源关系型数据库管理系统（RDBMS），广泛用于Web应用程序的后端数据存储。它基于结构化查询语言（SQL）来管理数据，并且是LAMP（Linux, Apache, MySQL, PHP/Python/Perl）技术栈的一部分，这个技术栈常用于构建动态网站和Web应用程序。 MySQL的特点包括： - **开放源代码**：MySQL的源代码是公开的，任何人都可以自由使用和修改。 - **跨平台**：MySQL可以在多种操作系统上运行，包括Linux、Windows、macOS等。 - **高性能**：MySQL以其快速的查询处理和良好的性能而闻名。 - **可靠性**：MySQL提供了多种机制来确保数据的完整性和可靠性，包括事务支持、备份和恢复功能。 - **易于使用**：MySQL提供了简单直观的界面和丰富的文档，便于用户学习和使用。 - **可扩展性**：MySQL支持从小型应用到大型企业级应用的扩展。 - **社区支持**：由于其广泛的使用，MySQL拥有一个活跃的开发者社区，提供大量的资源和支持。 MySQL被广泛应用于各种场景，包括在线事务处理（OL
Objective-C语言的基础教程.md
最新发布
07-31
Objective-C是一种面向对象的编程语言，是C语言的扩展。它主要用于苹果的iOS和macOS应用程序开发。
暂存暂存暂存暂存暂存暂存暂存暂存
07-31
暂存暂存暂存暂存暂存暂存暂存暂存
Java实现HTTP断点续传的多线程安全解决方法.zip
07-31
Java实现HTTP断点续传的多线程安全解决方法
深入理解ES6：新一代JavaScript语法解析
Promise使得异步编程变得更加链式调用友好，解决了回调地狱的问题，让代码更加可读和可维护。 3. **for-of循环**：ES6引入的for-of循环允许遍历可迭代对象，如数组、Set、Map等，使得循环遍历更加方便，避免了使用...
评论
添加红包

请填写红包祝福语或标题

个

红包个数最小为10个

元

红包金额最低5元

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

抵扣说明：

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

余额充值