es6-3-解决异步编程解决方案（Promise）、Class类、super()

程序员文章站 2022-03-08 23:40:22
...
<!DOCTYPE html>
<html>
<head>
	<title></title>
</head>
<body>
	<!-- 
		9.Symbol() 独一无二的字符串（原始数据类型,所以es6有6种数据类型：number,string,boolean,undefined,null,symbol,不常用）
		10.Promise 异步编程(ajax是异步的)的解决方案
		异步编程遇到的问题是，每个部分的运行速度不一样，调用数据可能会出问题
		es5异步编程解决方案--回调函数，就是把要调用的数据放在success:function(){}里面，这样就可以在ajax运行完后直接用ajax里面需要的数据，就是函数里面调用函数
		es6异步编程解决方案--回调函数用promise.then()，与ajax不是一回事
			语法：new Promise(function(resolve,reject){})
			resolve函数:在异步操作成功时候使用，并且把异步操作的结果作为参数传递出去
			reject函数:在异步操作失败时候使用，并且把异步操作的结果作为参数传递出去
			then函数里面接收2个函数当参数，一个函数是异步操作时成功时候的操作，第二个是异步操作失败时候的函数，第二个函数可以省略
			（resolve和reject是一种传输的状态，而then里面的两个函数是指数据的处理，成功怎么处理，失败了怎么处理）
		11.class类（本身是一个函数）
			es5没有类的概念
			es6的class可以看作一个语法糖（方便阅读理解）
			extends继承于 
	 -->
	 <script type="text/javascript">
	 	// function(,function(){}){} --回调函数
	 	let a=10
	 	let promise = new Promise((resolve,reject)=>{
	 		if(a==10){
	 			resolve("成功")
	 		}else{
	 			reject("失败")
	 		}
	 	})
	 	promise.then(res=>{console.log(res)},res=>{console.log(res)}) 
	 	//第一个res是参数，第二个res是要传的数据
	 	//结果：成功
	 	promise.then(res=>{console.log(1)},res=>{console.log(2)}) 
	 	//结果：1

	 	let status = 1
	 	let user=(resolve,reject)=>{
	 		setTimeout(()=>{
	 			if(status==1){
	 				resolve({data:"登陆成功",msg:"Tom",token:"abc"})
	 			}else{
	 				reject("失败")
	 			}
	 		},2000)
	 	}
	 	let admin=(resolve,reject)=>{
	 		setTimeout(()=>{
	 			if(status==1){
	 				resolve({data:"获取成功",msg:"Lucas",token:"123"})
	 			}else{
	 				reject("失败")
	 			}
	 		},1000)
	 	}
	 	//异步操作
	 	new Promise(user).then(res=>{console.log(res);return new Promise(admin)}).then(res=>{console.log(res)})
	 	//结果：{data: "登陆成功", msg: "Tom", token: "abc"}
	 	//	   {data: "获取成功", msg: "Lucas", token: "123"}
	 	//then是在有new Promise后面才可以用，所以在第一个箭头函数里需要return new Promise，然后再使用then，这样可以帮助制定执行顺序，从函数来看应该是先执行admin，但是用Promise就可让user先执行
	 	new Promise(user).then(res=>{console.log(res);return new Promise(admin)}).catch(res=>{console.log(res)})
	 	//catch也可以获取失败时候的结果


	 	//es5分不清Point是方法还是对象
	 	function Point(x){    //方法
	 		this.x = x;
	 	}
	 	Point.prototype.toString = function(){   //向对象添加属性或者方法
	 		return this.x
	 	}
	 	var p = new Point(x);   //创建对象

	 	//es6 class构造函数,不需要写function
	 	class Point{
	 		constructor(x,y){
	 			this.x = x;
	 		}
	 		toString(){
	 			return this.x
	 		}
	 	}

	 	//es6
	 	class Bar{
	 		my(){
	 			console.log('my')
	 		}
	 	}
	 	var b = new Bar
	 	b.my()
	 	//结果：'my'


	 	//！es6继承 --extends继承于
	 	class Point{
	 	}
	 	class ColorPoint extends Point{
	 	}

	 	//！super函数，在est里要用this的时候需要调用super函数
	 	class Point{
	 		constructor(x,y){
	 			this.x = x
	 			this.y = y
	 		}  //constructor()方法是默认方法
	 	}
	 	class ColorPoint extends Point{
	 		constructor(x,y,color){
	 			super(x,y);  //构造函数时必须要在this之前使用
	 			this.color = color
	 		}
	 	}

	 </script>

</body>
</html>
es6-3-解决异步编程解决方案（Promise）、Class类、super()

ES6要点总结（3）-Promise异步编程解决方案

ES6要点总结（3）-Promise异步编程解决方案

es6-3-解决异步编程解决方案（Promise）、Class类、super()
