前端Promise理解

概述

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

一、基础概念

1. 执行器executor
   ◐ 当通过new创建Promise对象时，需要传入一个回调函数，称之为executor
   ◐ executor会在new promise时会被立即执行，并且可传入另外两个回调函数resolve、reject
   ◐ 当调用resolve回调函数时，会执行Promise对象的then方法传入的回调函数
   ◐ 当调用reject回调函数时，会执行Promise对象的catch方法传入的回调函数

2. 一个 Promise 必然处于以下几种状态之一
   ◐ 待定（pending）：初始状态，既没有被兑现，也没有被拒绝
   ◐ 已兑现（fulfilled）：意味着操作成功完成
   ◐ 已拒绝（rejected）：意味着操作失败
   如果一个 Promise 已经被兑现或拒绝，即不再处于待定状态，那么则称之为已敲定（settled），且此时该Promise的状态是不可更改的

3. 使用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

1. 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); // 错误对象
   	  });
   
   

2. 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
   	  });
   
   

3. 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

1. 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
     

2. 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,
	  },
	]

3. 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
     

4. 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))文章来源地址https://www.toymoban.com/news/detail-826798.html

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

到了这里，关于前端Promise理解的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！