【无标题】JavaScript 高阶 Promise篇

发布时间:2024年01月23日

1、什么是Promise

Promise 是异步编程的一种解决方案,其实是一个构造函数,自己身上有all、reject、resolve这几个方法,原型上有then、catch等方法。(ps:关于原型:JavaScript高级 构造函数与原型篇

Promise对象有以下两个特点。

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

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

Promise功能:避免了回调地狱,把异步代码改成调用起来像同步代码。

        // 语法:
        // Promise————
        // var  p = new Promis(回调函数)

                // 回调函数也有两个参数
                        // resolve ---------坚定
                        // reject-----------拒绝

        var p = new Promise((resolve,reject)=>{
            //默认状态——————pending

            // 调用函数----resolve();
                // 得到
                // 成功状态————fulfilled

            // 调用函数——--reject()
                // 失败状态————rejected  

                // resolve();
        reject();

        })
        console.log(p);


        // 特点:1、转态不受外部影响
             // 2、状态一旦发生改变,将不再变化

Promise的基本用法:

// 默认pending: 初始状态
var p=new Promise(function (resolve,reject) {
    if("操作成功"){
        resolve();//pending-->fulfilled  异步操作成功的回调函数
    }else{
        reject(); //pending-->reject     异步操作失败的回调函数
    }
})
p.then(data => {//在外面调用then处理成功的逻辑
    console.log("处理成功的逻辑");//fulfilled  
}).catch(err=>{//在外面调用catch处理失败的逻辑
    console.log("失败的逻辑");//reject
})
// then方法会在异步成功后调用,catch方法会在异步失败后调用


如果需要连续调用,就要用return

比如:
        p1.then(data1 => {
            console.log(data1);
            return p2
        }).then(data2 => {
            console.log(data2);
            return p3
        }).then(data3 => {
            console.log(data3);
        })

2、Promise方法的使用

2.1、all方法

接收一个Promise实例对象组成的数组,[p1,p2,p3]

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

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

const p1 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject("失败");
    }, 3000);
});
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("成功2");
    }, 2000);
});
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve("成功3");
    }, 1000);
});

// 全部成功返回成功,有一个失败返回失败
let p = Promise.all([p1, p2, p3]).then((res) => console.log(res)).catch(err=>console.log(err));

2.2、allSettled方法

接收一个Promise实例对象组成的数组,[p1,p2,p3]

返回是一个promise,then回调函数中得到每一个promise的详细结果,无论该promise是成功还是失败

      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('ok1')
        }, 3000)
      })

      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          //resolve('ok2')
          //reject('出错啦')
        }, 1000)
      })

      const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('ok3')
        }, 1000)
      })
      Promise.allSettled([p1, p2, p3]).then((res) => {
      	console.log(res)
      }).catch((err) => {
         console.log(err)
      })

2.3、any方法

接收一个Promise实例对象组成的数组,[p1,p2,p3]
只要有一个成功的promise对象,就返回这个成功的Promise

      const p1 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('ok1')
        }, 3000)
      })

      const p2 = new Promise((resolve, reject) => {
        setTimeout(() => {
          //resolve('ok2')
          //reject('出错啦')
        }, 1000)
      })

      const p3 = new Promise((resolve, reject) => {
        setTimeout(() => {
          reject('ok3')
        }, 1000)
      })
      Promise.any([p1, p2, p3])
        .then((res) => {
          console.log(res) 
        })
        .catch((err) => {
          console.log(err)
        })

2.4、race方法

all是等所有的异步操作都执行完了再执行then方法,那么race方法就是相反的,谁先执行完成就先执行回调。先执行完的不管是进行了race的成功回调还是失败回调,其余的将不会再进入race的任何回调

 
function promiseClick1(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('2s随机数生成的值:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('2s数字太于10了即将执行失败回调');
				}
			}, 2000);
		   })
		   return p
	   }
	   function promiseClick2(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('3s随机数生成的值:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('3s数字太于10了即将执行失败回调');
				}
			}, 3000);
		   })
		   return p
	   }
	   function promiseClick3(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('4s随机数生成的值:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('4s数字太于10了即将执行失败回调');
				}
			}, 4000);
		   })
		   return p
	   }
 
	Promise
		.race([promiseClick3(), promiseClick2(), promiseClick1()])
		.then(function(results){
			console.log('成功',results);
		},function(reason){
			console.log('失败',reason);
		});

2.5、catch方法

与Promise对象方法then方法并行的一个方法就是catch,与try catch类似,catch就是用来捕获异常的,也就是和then方法中接受的第二参数rejected的回调是一样的,如下:

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('随机数生成的值:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('数字太于10了即将执行失败回调');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved成功回调');
			console.log('成功回调接受的值:',data);
		}
	)
	.catch(function(reason, data){
		console.log('catch到rejected失败回调');
		console.log('catch失败执行回调抛出失败原因:',reason);
	});	

2.7、resolve方法与reject方法

resolve返回一个成功的promise
reject返回一个失败的promise

function promiseClick(){
		let p = new Promise(function(resolve, reject){
			setTimeout(function(){
				var num = Math.ceil(Math.random()*20); //生成1-10的随机数
				console.log('随机数生成的值:',num)
				if(num<=10){
					resolve(num);
				}
				else{
					reject('数字太于10了即将执行失败回调');
				}
			}, 2000);
		   })
		   return p
	   }
 
	promiseClick().then(
		function(data){
			console.log('resolved成功回调');
			console.log('成功回调接受的值:',data);
		}, 
		function(reason){
			console.log('rejected失败回调');
			console.log('失败执行回调抛出失败原因:',reason);
		}
	);	
文章来源:https://blog.csdn.net/qq_57162921/article/details/135767730
本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。