前端Promise理解

乔那YANG

已于 2024-01-23 08:42:44 修改

阅读量1.3k

点赞数 21

文章标签：前端 javascript 开发语言

于 2024-01-23 08:41:49 首次发布

本文链接：https://blog.csdn.net/qq_30907075/article/details/135109575

版权

本文详细介绍了Promise的基本概念，包括executor、then、catch、finally的用法，以及静态方法all、allSettled、race、any和resolve、reject的使用场景和行为。通过实例演示了这些方法在处理异步操作中的应用。

摘要由CSDN通过智能技术生成

概述

阐述promsie的基本概念
介绍实例方法then、catch、finally
介绍静态方法all、allSettled、race、any、resolve、reject

一、基础概念

执行器executor
◐ 当通过new创建Promise对象时，需要传入一个回调函数，称之为executor
◐ executor会在new promise时会被立即执行，并且可传入另外两个回调函数resolve、reject
◐ 当调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
◐ 当调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数
一个 Promise 必然处于以下几种状态之一
◐ 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
◐ 已兑现（fulfilled）：意味着操作成功完成
◐ 已拒绝（rejected）：意味着操作失败
如果一个 Promise 已经被兑现或拒绝，即不再处于待定状态，那么则称之为已敲定（settled），且此时该Promise的状态是不可更改的

使用setTimeout模拟异步返回结果

// 调用resolve触发fulfilled
// 打印结果 22 11 'fulfilled'
new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve(11);
    console.log(22);
  }, 500);
})
  .then((res) => console.log(res, "fulfilled"))
  .catch((err) => console.log(err, "rejected"));
 
// 调用reject触发rejected
// 打印结果  error rejected
new Promise((resolve, reject) => {
  setTimeout(() => {
    reject('error');
  }, 500);
})
  .then((res) => console.log(res, "fulfilled"))
  .catch((err) => console.log(err, "rejected"));

二、实例方法then、catch、finally

then方法
◐ 入参.then(fulfilled回调, rejected回调)

new Promise((resolve, reject) => {}).then(
   (res) => {
    console.log(res);
  },
  (err) => {
    console.log(err);
  }
)
// 以上代码等同于
new Promise((resolve, reject) => {})
  .then((res) => {
    console.log(res);
  })
  .catch((err) => {
    console.log(err);
  });

◐ 返回值promise的状态
a. 回调函数本身在执行时，处于pending状态
b. 返回一个结果时，处于fulfilled状态，且返回的值将作为参数继续传递
注：返回结果是一个Promise时，新Promise的状态会决定then返回Promise的状态
c. 抛出一个异常时，它处于rejected状态

例子一：

	new Promise((resolve, reject) => {
	  resolve(11);
	})
	  .then((res) => {
	    console.log(res);  // 11
	    return 22;
	  })
	  .then((res) => {
	    console.log(res); // 22
	    return Promise.resolve(33);
	  })
	  .then((res) => {
	    console.log(res); // 33
	  })
	  // 没有返回任何值：将以 undefined 作为其兑现值
	  .then((res) => {
	    console.log(res); // undefined
	  });

例子二：

	new Promise((resolve, reject) => {
	  resolve(11);
	})
	  .then((res) => {
	    console.log(res); // 11
	    return 22;
	  })
	  .then((res) => {
	    console.log(res); // 22
	    throw new Error("错误");
	  })
	  .then((res) => {
	    console.log(res);
	  })
	  .catch((err) => {
	    console.log(err); // 错误对象
	  });

catch方法
◐ 入参.catch(rejected回调)

	new Promise((reslve, reject) => {
	  reject("error");
	}).catch((err) => {
	  console.log(err);
	});

◐ 返回值promise的状态 *同then一致*

例子一：

	// .catch链式接收时仅能获取到上一次reject的值
	new Promise((reslve, reject) => {
		reject("error");
	})
	  .catch((err) => {
	    console.log(err);  // error
	    return Promise.reject(11);
	  })
	  .catch((res) => {
	    console.log(res); // 11
	  })
	  .catch((res) => {
	    console.log(res);
	  });

例子二：

	new Promise((reslve, reject) => {
	  reject("error");
	})
	  .catch((err) => {
	    console.log(1, err); // 1 'error'
	    return Promise.reject(11);
	  })
	  .catch((err) => {
	    console.log(2, err); // 2 11
	    return 22;
	  })
	  .catch((err) => {
	    console.log(3, err);
	  })
	  .then((res) => {
	    console.log(4, res); // 4 22
	  })
	  .catch((err) => {
	    console.log(5, err);
	  })
	  .then((res) => {
	    console.log(6, res); // 6 undefined
	  });

finally方法
◐ 入参.finally(回调)
注：Promise对象无论变成fulfilled还是reject状态，最终都会被执行的代码

	new Promise((resolve, reject) => {
	  resolve(11);
	})
	  .finally(() => {
	    console.log('finally11');
	  })

◐ 返回值promise
注：返回等效的 Promise。如果处理程序抛出错误或返回被拒绝的 promise，那么 finally() 返回的 promise 将以该值被拒绝。否则，处理程序的返回值不会影响原始 promise 的状态

	new Promise((resolve, reject) => {
	  resolve(11);
	})
	  .finally(() => {
	    console.log("finally11"); // finally11
	  })
	  .finally(() => {
	    console.log("finally22"); // finally22
	  })
	  .then((res) => {
	    console.log(res); // 11
	  });

三、静态方法all、allSettled、race、any、resolve、reject

all方法
a. 将多个promise包裹在一起形成一个新的Promise
b. 新的promise状态由所有promise共同决定

所有的promise状态变成fulfilled时，新的promise状态为fulfilled，并且会将所有promise的返回值组成一个数组

const p1 = new Promise((resolve, reject) => resolve(11));
const p2 = new Promise((resolve, reject) => resolve());
const p3 = new Promise((resolve, reject) => resolve(33));
Promise.all([p1, p2, p3]).then((res) => console.log(res)); // [11, undefined, 33]

当有一个promise状态为rejected时，新的promise状态为rejected，并且会将第一个rejected的返回值作为参数

const p1 = new Promise((resolve, reject) => resolve(11));
const p2 = new Promise((resolve, reject) => reject("错误1"));
const p3 = new Promise((resolve, reject) => reject("错误2"));
Promise.all([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log("error", err)); // error 错误1

allSettled方法
a. 该方法会在所有的promise都有结果（settled）(fulfilled、rejected)时，会触发最终调用；
b. 新promise的结果一定是fulfilled的；
c. 与all相比较
- 如何触发新promise最终状态为fulfilled，all在所有promise结果为fulfilled时触发，allSettled在所有的promise结果为fulfilled、rejected时触发
- all新promise状态有fulfilled、rejected，allSettled的新promise**状态只有fulfilled
- 当新promise状态为fulfilled时，all为一个存储所有promise返回值的数组（[11, 22, 33]），allSettled为一个存储所有promise返回值包装成对象的数组（[{status: ‘fulfilled’, value: 11},{status: ‘fulfilled’, value: undefined, {status: ‘fulfilled’, value: 22}}]）

	const p1 = new Promise((resolve, reject) => resolve(11));
	const p2 = new Promise((resolve, reject) => reject("错误1"));
	const p3 = new Promise((resolve, reject) => resolve(22));
	Promise.allSettled([p1, p2, p3])
	  .then((res) => console.log(res));
	======打印结果见下
	[
	 {
	    status: "fulfilled",
	    value: 11,
	  },
	  {
	    status: "rejected",
	    reason: "错误1",
	  },
	  {
	    status: "fulfilled",
	    value: 22,
	  },
	]

race、any方法

race 传入promise可迭代对象，返回一个promise。
一旦有一个 promise状态已敲定（fulfilled、rejected），它就会立即返回。

	function sleep(time, value, state) {
	  return new Promise((resolve, reject) => {
	    setTimeout(() => {
	      if (state === "兑现") {
	        return resolve(value);
	      } else {
	        return reject(new Error(value));
	      }
	    }, time);
	  });
	}
	const p1 = sleep(500, 11, "兑现");
	const p2 = sleep(100, 22, "兑现");
	// 返回首个已兑现的p2
	Promise.race([p1, p2])
	  .then((res) => console.log(res)) // 22
	  .catch((err) => console.log("error", err));

	const p3 = sleep(500, 11, "兑现");
	const p4 = sleep(100, 22, "拒绝"); 
	// 返回首个已拒绝的p4
	Promise.race([p3, p4])
	  .then((res) => console.log(res))
	  .catch((err) => console.log("error", err)); // error Error: 22
	// 传入空 - 则返回的promise永远处于pending状态，不会有输出
	Promise.race([])
	  .then((res) => console.log(res))
	  .catch((err) => console.log("error", err));

any 传入promise可迭代对象，返回一个promise。
一旦有一个 promise状态已兑现（fulfilled），它就会立即返回。
所有promise状态已拒绝（rejected），将使用AggregateError进行拒绝

// 返回首个已兑现
const p1 = new Promise((resolve, reject) => reject("错误1"));
const p2 = new Promise((resolve, reject) => resolve(11));
const p3 = new Promise((resolve, reject) => resolve(22));
Promise.any([p1, p2, p3])
  .then((res) => console.log(res)) // 11
  .catch((err) => console.log("error", err));

// 全未兑现
const p1 = new Promise((resolve, reject) => reject("错误1"));
const p2 = new Promise((resolve, reject) => reject("错误2"));
const p3 = new Promise((resolve, reject) => reject("错误3"));
Promise.any([p1, p2, p3])
  .then((res) => console.log(res))
  .catch((err) => console.log("error", err)); // error AggregateError: All promises were rejected
// 传入空
  Promise.any([])
  .then((res) => console.log(res))
  .catch((err) => console.log("error", err)); // error AggregateError: All promises were rejected

resolve、reject方法
a. 直接调用静态方法resolve将promise状态更改为已兑现（fulfilled）
Promise.resolve(1) 等同于 new Promise((resolve)=>resolve(1))

  new Promise((resolve)=>resolve(11)).then((res) => console.log(res)) // 11
  Promise.resolve(22).then((res) => console.log(res)) // 22

b. 直接调用静态方法reject将promise状态更改为已拒绝（rejected）
Promise.reject(1) === new Promise((resolve, reject)=>reject(1))

new Promise((resolve,reject)=>reject('error')).catch((err) => console.log(err))   // error
Promise.reject('error').catch((err) => console.log(err))  // error