ES602 Promise ,面向对象_promise面向对象-CSDN博客

本文链接：https://blog.csdn.net/qq_38998319/article/details/117407113

这篇博客探讨了JavaScript中的面向对象编程，包括使用function和ES6的class实现对象，以及对象的继承。同时，讲解了如何利用Promise处理异步操作，包括基本的Promise用法、Promise.all的使用以及如何封装Promise。通过示例展示了如何通过$.ajax获取数据并处理成功或失败的情况。

摘要由CSDN通过智能技术生成

1.js面向对象，class、es6面向对象

<script>
	// js中的面向对象

	function User(name, pass) {
		this.name = name;
		this.pass = pass;
	}

	User.prototype.showName = function () {
		alert(this.name)
	}
	User.prototype.showPass = function () {
		alert(this.pass)
	}
	var u = new User('李白', '123456')
	u.showName()
	u.showPass();








	// 使用class声明类名
	// class 类名 {
	// 	constructor(参数1， 参数2) {
	// 		构造器在实例化的时候， 会自动调用执行
	// 		this.xxx = xxx

	// 	}
	// 	showName() {

	// 	}
	// 	showPass() {

	// 	}
	// }






	// ES6
	class User {
		constructor(name, pass) {
			this.name = name;
			this.pass = pass;
		}
		showName() {
			alert('this.name')
		}
		showPass() {
			alert('this.pass')
		}
	}
	var u = new User('libai', '123654')
	u.showName()
	u.showPass()
</script>

2.js中对象的继承

<script>
	// js中的面向对象

	function User(name, pass) {
		this.name = name;
		this.pass = pass;

	}

	User.prototype.showName = function () {
		alert(this.name)

	}
	User.prototype.showPass = function () {
		alert(this.pass)
	}


	// 声明一个新的类

	function VipUser(name, pass, level) {

		/* 	继承父类的属性
			call */

		User.call(this.name, pass)
		this.level = level;
	}



	VipUser.prototype = new User();
	// 定义一个自己的方法
	VipUser.prototype.showLevel = function () {
		alert(this.level)
	}


	var v1=new VipUser('lisi','1234','6')
	v1.showName()
	v1.showPass()
	v1.showLevel();
</script>

3.es6对象的继承

<script type="text/javascript">
class User{
	constructor(name,pass){
		this.name=name;
		this.name=pass;
	}
	showName(){
		alert(this.name)
	}
	showPass(){
		alert(this.pass)
	}
}

// 子类
// 继承  子类类名  extends 父类类名
// 父类 也叫超类

class VipUser extends User{
	constructor(name,pass,level){
		super(name,pass)
		this.level=level;

	}
	showLevel(){
		alert(this.level);
	}
}

var v1=new VipUser('lisi23','13243124','8')
v1.showName()
v1.showPass()
v1.showLevel()

</script>

4.Promise简单引用

访问方式

// 如果在js中需要得到一样东西列入 数组 new Array()

// 实例化 Promise(函数)
//   函数中有两个形参
//      resolve  成功了
// 	 reject  失败


let p=new Promise(function(resolve,reject){
	$.ajax({
		url:'./data/arr.txt',
		dataType:'json',
		success(arr){
			resolve(arr)
		},
		error(err){
			reject(err)
		}
	})
})

// then 否则然后

p.then(function(){
	alert('成功了')
},function(){
	alert('失败了')
})

5.两个Promise的使用--promise.all

<script type="text/javascript">

	let p1=new Promise(function(resolve,reject){
		$.ajax({
			url:'./data/arr.txt',
			dataType:'json',
			success(arr){
				resolve(arr)
			},
			error(err){
				reject(err)
			}
		})
	})

	let p2=new Promise(function(resolve,reject){
		$.ajax({
			url:'./data/json.txt',
			dataType:'json',
			success(arr){
				resolve(arr)
			},
			error(err){
				reject(err)
			}
		})
	})

	// Promise.all数组
	Promise.arr([
		p1,p2
	]).then(function(arr){
		console.log(arr);
		let [res1,res2]=arr;
		console.log(res1);
		console.log(res2);
		alert('都成功了')

	}),function(err){
		alert('至少有一个失败了')
	}

6.封装一个Promise

<script type="text/javascript">
	function createPromise(url){
		return new Promise(function(resolve,reject){
			$.ajax({
				url,
				dataType:'json',
				success(arr){
					resolve(arr)
				},
				error(err){
					reject(err)
				}
			})
		})
	}



	// Promise.all
	Promise.all([
		createPromise('./data/arr.txt'),
		createPromise('./data/json.txt')
	]).then(function(arr){
		// 如果能进入这里，表示两个都成功了，只要一个失败，就显示失败
		let [res1,res2]=arr;
		console.log(res1);err
		console.log(res2);
		alert('成功了')
	}),function(err){
		alert('至少有一个失败了')
	}

7.Promise与ajax

<script type="text/javascript">
var p=$.ajax({url:'data/arr.txt',dataType:'json'})
console.log(p);//txt中的数据
Promise.all([
	$.ajax({url:'data/arr.txt',dataType:'json'}),
	$.ajax({url:'data/json.txt',dataType:'json'})
]).then(function(results){
	alert('成功了')
	console.log(results);
}),function(err){
	alert('失败了')
}