devbox
IT小白
这个屌丝很懒，什么也没留下！
关注作者
热门标签
热门文章
当前位置:   article > 正文

promise原理和使用方法

作者：IT小白 | 2024-07-24 19:50:30

赞

踩

promise原理

一、promise概念

1、Promise 是异步编程的一种解决方案

从语法上讲，promise是一个对象，从它可以获取异步操作的消息；从本意上讲，它是承诺，承诺它过一段时间会给你一个结果，其实是一个构造函数，自己身上有all、reject、resolve，race这几个方法，原型上有then、catch，finally等方法。

 promise有三种状态： pending(等待态)，fulfiled(成功态)，rejected(失败态)；状态一旦改变，就不会再变。创造promise实例后，它会立即执行。

Promise对象有以下两个特点：

1、对象的状态不受外界影响。Promise对象代表一个异步操作，有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。只有异步操作的结果，可以决定当前是哪一种状态，任何其他操作都无法改变这个状态。这也是Promise这个名字的由来，它的英语意思就是“承诺”，表示其他手段无法改变。

2、一旦状态改变，就不会再变，任何时候都可以得到这个结果。Promise对象的状态改变，只有两种可能：从pending变为fulfilled和从pending变为rejected。只要这两种情况发生，状态就凝固了，不会再变了，会一直保持这个结果，这时就称为 resolved（已定型）。如果改变已经发生了，你再对Promise对象添加回调函数，也会立即得到这个结果。这与事件（Event）完全不同，事件的特点是，如果你错过了它，再去监听，是得不到结果的。

2、promise.prototytype.then()

promise实例状态改变的回调函数，有两个参数：第一个是成功回调函数，第二个是失败回调函数。他会返回一个全新的promise，因此可以继续then链式调用。

  1. 		let p = new Promise(function (resolve, reject) { //做一些异步操作
  2. 		setTimeout(function () {
  3. 			var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
  4. 			console.log('随机数生成的值：', num)
  5. 			if (num <= 10) {
  6. 				resolve(num);
  7. 			} else {
  8. 				reject('数字太于10了即将执行失败回调');
  9. 			}
  10. 		}, 200);
  11. 	})
  12. 	p.then(res => { // 成功
  13. 		console.log('then1', res);
  14. 	}, error => {
  15. 		// 失败
  16. 		console.log('then1', error);
  17. 	}).then(res => {
  18. 		// 成功
  19. 		console.log('then2', res);
  20. 	}, error => {
  21. 		// 失败
  22. 		console.log('then2', error);
  23. 	}).then(res => {
  24. 		// 成功
  25. 		console.log('then3', res);
  26. 	}, error => {
  27. 		// 失败
  28. 		console.log('then3', error);
  29. 	});

 

3、promise.prototype.catch()

失败回调函数，状态变为rejected执行。相当于promise.prototytype.then(null/undifined,rejection)，如果promise内发生了错误，但却没有定义catch()，这时运行到这一行代码会报错，但是不会影响到promise后面代码的执行

  1. 	function promiseClick() {
  2. 		let p = new Promise(function (resolve, reject) {
  3. 			setTimeout(function () {
  4. 				var num = Math.ceil(Math.random() * 20); //生成1-10的随机数
  5. 				console.log('随机数生成的值：', num)
  6. 				if (num <= 10) {
  7. 					resolve(num);
  8. 				} else {
  9. 					reject('数字太于10了即将执行失败回调');
  10. 				}
  11. 			}, 2000);
  12. 		})
  13. 		return p
  14. 	}
  15. 	promiseClick().then(function (data) {
  16. 		console.log('resolved成功回调');
  17. 		console.log('成功回调接受的值：', data);
  18. 		console.log(noData);
  19. 	}).catch(function (reason, data) {
  20. 		console.log('catch到rejected失败回调');
  21. 		console.log('catch失败执行回调抛出失败原因：', reason);
  22. 	});

在resolve的回调中，我们console.log(noData);而noData这个变量是没有被定义的。如果我们不用Promise，代码运行到这里就直接在控制台报错了，不往下运行了。但是在这里，会得到上图的结果，也就是说进到catch方法里面去了，而且把错误原因传到了reason参数中。即便是有错误的代码也不会报错了

二、使用方法

1、基础用法

  1. new Promise((resolve, reject) => {
  2.         // resolve 成功的回调
  3.         // reject  失败的回调
  4.         // 成功或者失败只能存在一种状态，不能同事执行两个状态
  5.         resolve('成功')
  6.         reject('失败')
  7.         // then 是获取Promise的resolve, reject状态
  8.     }).then(res => {
  9.         // 成功
  10.         console.log(res);
  11.     }, error => {
  12.         // 失败
  13.         console.log(error);
  14.     })

2、promise.finally()

promise实例无论状态是什么都会执行的函数，finally不接受任何参数。

  1.  const p1 = function () {
  2.             return new Promise((resolve, reject) =>{
  3.                 // 失败时
  4.                 // reject("失败了")
  5.                 //  resolve(2);
  6.                 // 成功时
  7.                 resolve(2)
  8.                 reject("失败了")
  9.             });
  10.         };
  11.         p1().then(res=> {
  12.             console.log(res);
  13.         }).catch(error=>{
  14.             console.log(error);
  15.         }).finally(()=>{
  16.             console.log('无论失败或者成功都会走这个函数');
  17.         })

3、promise.all()

将多个promise实例包装成一个新的promise实例

1）只有p1、p2、p3的状态都变成fulfilled，p的状态才会变成fulfilled，此时p1、p2、p3的返回值组成一个数组，传递给p的回调函数。

2）只要p1、p2、p3之中有一个被rejected，p的状态就变成rejected，此时第一个被reject的实例的返回值，会传递给p的回调函数。

  1. const p1 = function () {
  2.                     return new Promise((resolve, reject)=>{
  3.                         resolve(1);
  4.                     });
  5.                 };
  6.                 const p2 = function () {
  7.                     return new Promise((resolve, reject)=>{
  8.                         resolve(2);
  9.                     });
  10.                 };
  11.                 const p3 = function () {
  12.                     return new Promise((resolve, reject)=>{
  13.                         // reject("失败了")
  14.                         resolve(3);
  15.                     });
  16.                 };
  17.  
  18.                 // Promise.all 所有封装的Promise都成功才会成功，只要有一个失败就会失败
  19.                 let p = Promise.all([p1(), p2(), p3()]).then(results=>{
  20.                     console.log(results);//[1, 2, 3]
  21.                 }).catch(error=>{
  22.                     console.log(err);
  23.                     // 当p3的reject("失败了")被解开时控制台会打印失败了
  24.                 })
  25.

4、promise.race()

  1. // race()  把多个封装的promise 组合起来，看谁跑的快
  2.         const p1 = function () {
  3.             return new Promise((resolve, reject)=>{
  4.                 setTimeout(() => {
  5.                     resolve(1);
  6.                 }, 500)
  7.  
  8.             });
  9.         };
  10.         const p2 = function () {
  11.             return new Promise((resolve, reject)=>{
  12.                 setTimeout(() => {
  13.                     resolve(2);
  14.                 }, 400)
  15.             });
  16.         };
  17.         const p3 = function () {
  18.             return new Promise((resolve, reject)=>{
  19.                 setTimeout(() => {
  20.                     resolve(3);
  21.                 }, 600)
  22.             });
  23.         };
  24.         //谁先执行完成就先执行回调，其余的将不会再进入race的任何回调,其余的没有停止，自行执行
  25.         let result = Promise.race([p1(), p2(), p3()]).then(results=>{
  26.             console.log(results);
  27.         }).catch(error=>{
  28.             console.log(error);
  29.         })
  30.  
  31.  
  32.  
  33.

5、promise.any()

  1.  // 1. 只要有一个实例变成fulfilled，他就会变成fulfilled
  2.         // 2. 只有全部实例状态都变成rejected，它才会变成rejected
  3.   const p1 = function () {
  4.             return new Promise((resolve, reject)=>{  
  5.                 resolve(5);
  6.             });
  7.         };
  8.         const p2 = function () {
  9.             return new Promise((resolve, reject)=>{
  10.                 reject(2);
  11.             });
  12.         };
  13.         const p3 = function () {
  14.             return new Promise((resolve, reject)=>{ 
  15.                 resolve(3);
  16.             });
  17.         };
  18.  
  19.         let result = Promise.any([p1(), p2(), p3()]).then(results=>{
  20.             console.log(results);
  21.             // 5 因为p1成功了，只返回找到的第一个成功的，遇到reject会继续向下寻找
  22.         }).catch(error=>{
  23.             console.log(error);
  24.             // 当三个return返回的都是reject时，控制台打印AggregateError: All promises were rejected
  25.         })

6、promise.allSettled()

等所有实例都返回结果，他的状态就只会变成fulfilled

  1. const p1 = function () {
  2.         return new Promise((resolve, reject) => {
  3.             resolve(1);
  4.         });
  5.     };
  6.     const p2 = function () {
  7.         return new Promise((resolve, reject) => {
  8.             resolve(2);
  9.         });
  10.     };
  11.     const p3 = function () {
  12.         return new Promise((resolve, reject) => {
  13.             reject(3);
  14.         });
  15.     };
  16.  
  17.     // Promise.allSettled无论成功或者失败会把所有的状态返回给results
  18.     // 没有catch
  19.     let result = Promise.allSettled([p1(), p2(), p3()]).then(results => {
  20.         console.log(results);
  21.     })

声明：本文内容由网友自发贡献，不代表【wpsshop博客】立场，版权归原作者所有，本站不承担相应法律责任。如您发现有侵权的内容，请联系我们。转载请注明出处：https://www.wpsshop.cn/w/IT小白/article/detail/876486
推荐阅读
相关标签

Copyright © 2003-2013 www.wpsshop.cn 版权所有，并保留所有权利。

  

闽ICP备14008679号