es6-3-解决异步编程解决方案(Promise)、Class类、super()、export default、import

```css
<!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
	 		}
	 	}


	 	//js文件导入导出
		var obj={}
		function my(){}
		//导出
		export{my,obj} 
		export{my as b} //可以改函数名字,改称b,调用的时候就用b这个名字

		//导入
		import {obj,my} from "./index.js" //加上./是指访问当前文件夹下文件,不加的话,就会直接访问到核心文件
		import "./index.js"

		export default a //默认输出,一个文件只有一个默认输出,
		//是一个变量声明语句,相当于有一个变量default,它的值是a
		import b from "./" //中间的b可以是其他的变量名字,可以不用加大括号,
		//直接导入default的那个值,名字是b

	 </script>

</body>
</html>

你可能感兴趣的:(es6-3-解决异步编程解决方案(Promise)、Class类、super()、export default、import)