ES6的Promise语法初使用

太过爱你忘了你带给我的痛 2022-12-01 14:03 164阅读 0赞

Promise是一种异步编程的解决方案；（个人理解：譬如说一个需求需要两个请求将结果返回后才能处理，这时用Promise就很方便）

我们可以用setTimeout来模拟网络请求

setTimeout(()=>{
    	console.log("使用setTimeout来模拟网络请求");
    },1000)

意义：1秒钟后回调箭头函数，并执行箭头函数的内容；

Promise详解简介：  
    Promise相当于一个类，调用时需要先初始化成对象；该对象的参数是一个函数，通常是箭头函数，而该函数中的参数也是函数，通常是resolve和reject函数；resolve函数是请求成功时调用的函数，reject是请求失败时处理的函数；resolve调用的函数需要用then回调函数进行处理，reject调用的函数需要用catch函数进行回调处理；  
简单实例

new Promise((resolve,reject)=>{
    		setTimeout((data)=>{
    			//console.log("success"); 调用成功，但是不在这个地方进行处理
    			resolve('promise');
    			reject('error message');
    		},10000)
    	}).then((data)=>{
    		console.log(data); //调用成功，通过resolve函数在这个地方进行处理
    	}).catch((err)=>{
    		console.log(err);	//调用失败，通过reject函数在这个地方进行处理
    	})

Promise是链式编程，简单实例

new Promise((resolve,reject)=>{
    		setTimeout(()=>{
    			resolve
    		},1000)
    	}).then(()=>{
    		console.log('处理第一层返回的结果');
    		return new Promise((resolve,reject)=>{
    			setTimeout(()=>{
    				resolve
    			},1000)
    		})
    	}).then(()=>{
    		console.log(‘处理第二层返回的结果’)
    		return new Promise()......
    	})

注意：此时一定要注意，处理的回调函数是处于同一层级；  
什么情况下会用到Promise？一般情况下是有异步操作时，使用Promise对这个异步操作进行封装；  
//new ->构造函数(1.保存了一些状态信息 2.执行传入的参数)  
//在执行传入的回调函数时，会传入两个参数，resolve，reject。其本身又是函数  
Promise的三种状态：  
    异步操作之后会有三种状态：  
        pending:等待状态，比如止住网络请求，或者定时器没有到时间；  
        fulfill：满足状态，当我们主动回调了resolve时，就处于该状态，并且会回调.then()  
        reject:拒绝状态，当我们主动回调了reject时，就处于该状态，并且会回调.catch()  
使用Promise的简单方法实例：

new Promise((resolve,reject)=>{
    		setTimeout(()=>{
    			resolve('aaa')
    		},1000)
    	}).then((res)=>{
    		//自己处理的代码
    		console.log(res,'第一层的处理代码')
    		//对结果进行处理的代码
    		return Promise.resolve(res+'111')
    		//或者是
    		return res+'111';
    		//return Promise.reject('error message')
    		//throw 'error message'
    	}).then((res)=>{
    		console.log(res,'第二层的处理代码')
    		//对结果进行处理的代码
    		return Promise.resolve(res+'222')
    		//或者是
    		return res+'222';
    	}).catch((err)=>{
    		console.log(err);
    	})

异步请求的封装
    	在没有使用promise时：
    		let isResult1 = false;
    		let isResult2 = false;
    		$ajax({
    			url:'url1',
    			success:function(){
    				console.log('结果1')
    				isResult1 = true
    				handleResult()
    			}
    		})
    		$ajax({
    			url:'url2',
    			success:function(){
    				console.log('结果2')
    				isResult2 = true
    				handleResult()
    			}
    		})
    		function handleResult(){
    			if(isResult1 && isResult2){
    				//开始处理请求
    			}
    		}
    	当我们使用了Promise后
    	Promise.all([
    		new Promise((resolve,reject)=>{
    				$ajax({
    				url:'url1',
    				success:function(){
    					console.log('结果1')
    					isResult1 = true
    					handleResult()
    				}
    			})
    		})
    		new Promise((resolve,reject)=>{
    				$ajax({
    				url:'url2',
    				success:function(){
    					console.log('结果2')
    					isResult2 = true
    					handleResult()
    				}
    			})
    		})
    	]).then((results)=>{
    		result[0]  //就是ajax1请求处理的结果
    		result[1]  //就是ajax2请求处理的结果
    	})
    简单实例：
    	Promise.all([
    		new Promise((resolve,reject)=>{
    			setTimeout(()=>{
    				resolve({name:'why',age:18})
    			},2000)
    		})
    		new Promise((resolve,reject)=>{
    			setTimeout(()=>{
    				resolve({name:'kobe',age:41});
    			},1000)
    		})
    	]).then(results=>{
    		console.log(results)
    	})