Promise

一. 介绍

Promise异步编程的一种解决方案.对异步操作进行封装,做链式编程
避免多重回调嵌套

二. Promise的三种状态

1. pending:

等待状态,异步操作没有完成,如网络请求没有结束.

2. fulfill:

满足状态,运行到了主动回调resolve函数的位置,此时会回调then().

3. reject:

拒绝状态,运行到了主动回调reject函数的位置,此时会回调catch().

三. 使用

1. 基本使用

1. 使用new关键字创建一个Promise
2. Promise创建时需要一个函数作为参数
3. 参数函数的参数为resolve函数和reject函数

// 创建一个Promise
new Promise((resolve, reject) => {
		// 异步函数
		setTimeout(() =>{
			// 异步函数执行完的成功回调函数
			// 回调函数的操作改为调用resolve函数
			// 调用resolve函数后,Promise就会到then中
			// resolve函数中的参数可以从then的回调函数中取得
			resolve(data)
			// 一步函数执行完的失败回调函数
			reject(error)
		}, 1000)
	}
).then((data) => {
	// Promise中的异步函数的回调函数中的操作就可以写到then的对调函数中,可以获取resolve函数的参数
	console.log("then");
	// 如果还有异步操作,可以再次return一个Promise
	return new Promise((resolve, reject) => {
		// ...
		resolve(res)
	});
}).then(res).catch((error) => {
	// 异常情况的回调
});

2. Promise的链式调用

new Promise((resolve, reject) => {
	// 一步操作...
	resolve(data);
}).then((data) => {
	// ...
	// 结果处理
	return Promise.resolve(data + '111');
	// return Promise.reject(err) || throw "err message"
}).then((data) => {
	// ...
	// 结果处理
	return Promise.resolve(data + '222');
}).catch((err) => {
})

new Promise((resolve, reject) => {
	// 一步操作...
	resolve(data);
}).then((data) => {
	// ...
	// throw "err message"
	// 结果处理
	return data + '111';
}).then((data) => {
	// ...
	// 结果处理
	return data + '222';
}).catch((err) =>{
})

1.then中期望一个函数作为参数,如果不是函数,则会发生then穿透,即本次then中的回调的参数直接给到下一个then中,不做任何处理.但是不会被catch获取
2.简单说,then中如果有return,则返回的内容是一个Promise,return的数据可以直接从下一个then中作为参数获取.如果抛出异常,则是返回一个reject的Promise,数据可以直接从catch中获取

new Promise((resolve, reject) => {
	resolve('123');
}).then('abc').then(data => {
	// 此处的data的值是123
	console.log(data);
})

3. 同时处理多个异步操作

Promise.all([
	new Promise((resolve, reject) => {resolve(data)}),
	new Promise((resolve, reject) => {resolve(data)}),
	...
]).then(results => {
	// ...
})

只有当所有的异步操作都完成时才会执行then函数,其回调的参数results时所有异步操作的返回结果集,是一个数组

$日期：2021-11-18$