es6 Promise

最新推荐文章于 2024-01-24 16:58:52 发布

Web小白菜~

最新推荐文章于 2024-01-24 16:58:52 发布

阅读量433

点赞数 1

分类专栏： ES6 文章标签： es6/es7 Promise resolve reject es6 Promise

本文链接：https://blog.csdn.net/weixin_43106777/article/details/106899796

版权

ES6 专栏收录该内容

14 篇文章 0 订阅

订阅专栏

es6 Promise

Promise的设计初衷

我们日常开发中，经常需要用到ajax请求数据，拿到数据后，再进行一些处理。
可有一次，你需要用ajax进行多次请求，而且，每次请求都依赖上一次请求返回的数据来作为参数，然后继续发出请求

——>然后你把代码写的稀碎：

	$.ajax({
		success:function(res1){
			$.ajax({
				success:function(res2){
					$.ajax({
						success:function(res3){
							......
						}
					})
				}
			})
		}
	})

这里假设每一次请求都需要上一次请求的返回结果

就这样—回调地狱就出现了。

很明显，这样缺陷很多：

代码量大，可读性差，调试也不方便
请求相互依赖的必须等待上一个请求完成后才可以执行，性能差，耗时

所以，Promise的出现为了使我们更合理更规范的进行异步操作处理。

Promise含义

Promise，简单说就是一个容器，里面保存着某个未来才会结束的事件（通常是一个异步操作）的结果。从语法上说，Promise 是一个对象，从它可以获取异步操作的消息。Promise 提供统一的 API，各种异步操作都可以用同样的方法进行处理。

Promise状态

pending : 刚刚创建一个Promise实例的时候，表示初始状态
fulfilled : resolve方法调用的时候，表示操作成功
rejected : reject方法调用的时候，表示操作失败

状态只能从 初始化 -> 成功或者初始化 -> 失败，不能逆向转换，也不能在成功fulfilled 和失败rejected之间转换。

Promise特点

对象的状态不受外界影响。Promise对象代表一个异步操作。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。
一旦状态改变，就不会再变，任何时候都可以得到这个结果。

有了Promise对象，就可以将异步操作以同步操作的流程表达出来，避免了层层嵌套的回调函数。此外，Promise对象提供统一的接口，使得控制异步操作更加容易。

但是有好就会有不好

Promise缺点

无法取消Promise，一旦新建它就会立即执行，无法中途取消。
如果不设置回调函数，Promise内部抛出的错误，不会反应到外部。
当处于pending状态时，无法得知目前进展到哪一个阶段（刚刚开始还是即将完成）。

Promise基本用法

Promise对象是全局对象，你也可以理解为一个类，创建Promise实例的时候，要有那个new关键字。参数是一个匿名函数，其中有两个参数：resolve和reject，两个函数均为方法。
resolve方法用于处理异步操作成功后业务；
reject方法用于操作异步操作失败后的业务。

	let promise = new Promise(function(resolve,reject){
		//....
		if('异步操作成功'){
			resolve(res);
		}else{
			reject(err);
		}
	})

resolve函数的作用是，将Promise对象的状态从“未完成”变为“成功”（即从 pending 变为 resolved），在异步操作成功时调用，并将异步操作的结果，作为参数传递出去。

reject函数的作用是，将Promise对象的状态从“未完成”变为“失败”（即从 pending 变为 rejected），在异步操作失败时调用，并将异步操作报出的错误，作为参数传递出去。

then()

then() : 用于绑定处理操作后的处理程序。

	promise.then(function(res){
		//操作成功的处理程序
	},function(err){
		//操作失败的处理程序
	})

then方法
第一个参数是resolved状态的回调函数，用于处理成功后的业务，
第二个参数是rejected状态的回调函数，用于处理操作异常后的业务。

catch()

catch() : 用于处理操作异常的业务

	promise.catch(function(err){
		//操作失败的处理程序
	})

catch方法只接受一个参数用于处理操作异常后的业务

所以日常开发中都两者结合使用。

	promise.then(res => {
		//操作成功的处理程序
	}).catch(err => {
		//操作失败的处理程序
	})

finally()

finally() ：用于指定不管 Promise 对象最后状态如何，都会执行的操作

	promise
	.then(res => { .... })
	.catch(err => { ... })
	.finally(() => { ... })

finally方法的回调函数不接受任何参数，这意味着没有办法知道，前面的 Promise 状态到底是fulfilled还是rejected。这表明，finally方法里面的操作，应该是与状态无关的，不依赖于 Promise 的执行结果。

由于then和catch方法调用后，都返回Promise对象，所以可以链式调用

Promise.all()

Promise.all() ：接受一个数组作为参数，数组的元素是Promise实例对象，当参数的实例对象的状态都为fulfilled时，Promise.all()才会有返回。

	//创建实例promise1
	let promise1 = new Promise(resolve => {
		setTimeout(() => {
			resolve('实例1操作成功')
		},5000);
	});

	//创建实例promise2
	let promise2 = new Promise(resolve => {
		setTimeout(() => {
			resolve('实例2操作成功')
		},1000);
	});

	Promise.all([promise1,promise2]).then(res => {
		console.log(res);// ["实例1操作成功", "实例2操作成功"]
	})

我们创建了两个Promise实例分别是promise1和promise2，两个setTimeout分别是5秒和1秒，当我们调用Promise.all()方法时，会延迟5秒控制台才会输出结果。
因为1秒以后，实例promise2进入了成功fulfilled状态；此时，Promise.all()还不会有所行动，因为实例promise1还没有进入fulfilled状态；等到了5秒后才进入成功状态；Promise.all()才会进入then方法，然后在控制台输出结果。

Promise.all()适用场景：执行一个操作，这个操作需要得到需要多个接口请求返回的数据来支持，但是这些接口请求之前互不依赖，不需要层层嵌套。这种场景就是适用Promise.all()，因为它会等到所有接口都请求成功了才会进行操作

Promise.race()

Promise.race() ：它的参数要求和Promise.all()方法一样，不同的是，它参数中的Promise实例，只要有一个状态发生变化（不管是成功fulfilled还是失败rejected），它都会返回结果。

	//初始化实例promise1
	let promise1 = new Promise(resolve => {
		setTimeout(() => {
			resolve('实例1操作成功')
		},5000)
	})

	//初始化实例promise2
	let promise2 = new Promise((resolve,reject) => {
		setTimeout(() => {
			reject('实例2操作失败')
		},1000)
	})

	Promise.race([promise2,promise1]).then(res => {
		console.log(res);
	}).catch(err => {
		console.log(err); // 实例2操作失败
	})