深浅克隆和Promise异步编程

Posted 2020-12-23 smilestudio

深克隆和浅克隆

浅克隆

arr.slice(0)
arr.concat()
let obj2 = {... obj} 

深克隆

function deepClone(obj){
    //判断参数是不是一个对象
    let objClone = new obj.constructor();
    if(obj && typeof obj==="object"){
        for(key in obj){
            if(obj.hasOwnProperty(key)){
                //判断ojb子元素是否为对象，如果是，递归复制
                if(obj[key]&&typeof obj[key] ==="object"){
                    objClone[key] = deepClone(obj[key]);
                }else{
                    //如果不是，简单复制
                    objClone[key] = obj[key];
                }
            }
        }
    }
    return objClone;
}    

Promise详解

局部地狱

回调地狱：上一个回调函数中继续做事情，而且继续回调（在真实项目的AJAX请求中经常出现回调地狱）=>异步请求、不方便代码的维护

Promise的诞生就是为了解决异步请求中的回调地狱问题：它是一种设计模式，ES6中提供了一个JS内置类Promise，来实现这种设计模式

 function ajax1() {
	return new Promise(resolve => {
		$.ajax({
			url: ‘/student‘,
			method: ‘get‘,
			data: {
				class: 1
			},
			success: resolve
		});
	});
}

function ajax2(arr) {
	return new Promise(resolve => {
		$.ajax({
			url: ‘/score‘,
			method: ‘get‘,
			data: {
				stuId: arr
			},
			success: resolve
		});
	});
}

function ajax3() {
	return new Promise(resolve => {
		$.ajax({
			url: ‘/jige‘,
			// ...
			success: resolve
		});
	});
}


 ajax1().then(result => {
	return ajax2(result.map(item => item.id));
}).then(result => {
	return ajax3();
}).then(result => {

}); 

• PROMISE是用来管理异步编程的，它本身不是异步的：new
  Promise的时候会立即把executor函数执行（只不过我们一般会在executor函数中处理一个异步操作）
• PROMISE本身有三个状态 =>[[PromiseStatus]]
  • pending 初始状态
  • fulfilled 代表操作成功（resolved）
  • rejected 代表当前操作失败

new Promise的时候先执行executor函数，在这里开启了一个异步操作的任务（此时不等：把其放入到EventQuque任务队列中），继续执行

• p1.then基于THEN方法，存储起来两个函数（此时这两个函数还没有执行）；当executor函数中的异步操作结束了，基于resolve/reject控制Promise状态，从而决定执行then存储的函数中的某一个

let p1 = new Promise((resolve, reject) => {
	setTimeout(_ => {
		let ran = Math.random();
		console.log(ran);
		if (ran < 0.5) {
			reject(‘NO!‘);
			return;
		}
		resolve(‘OK!‘);
	}, 1000);
});

• THEN：设置成功或者失败后处理的方法
  THEN方法结束都会返回一个新的Promise实例（THEN链）

p1.then(result => {
console.log(`成功：` + result);
}, reason => {
	console.log(`失败：` + reason);
});

• p2/p3这种每一次执行then返回的新实例的状态，由then中存储的方法执行的结果来决定最后的状态（上一个THEN中某个方法执行的结果，决定下一个then中哪一个方法会被执行）
• =>不论是成功的方法执行，还是失败的方法执行（THEN中的两个方法），凡是执行抛出了异常，则都会把实例的状态改为失败
• =>方法中如果返回一个新的PROMISE实例，返回这个实例的结果是成功还是失败，也决定了当前实例是成功还是失败
• =>剩下的情况基本上都是让实例变为成功的状态 （方法返回的结果是当前实例的value值：上一个then中方法返回的结果会传递到下一个then的方法中）

		 let p1 = new Promise((resolve, reject) => {
			resolve(100);
		});
		let p2 = p1.then(result => {
			console.log(‘成功：‘ + result);
			return result + 100;
		}, reason => {
			console.log(‘失败：‘ + reason);
			return reason - 100;
		});
		let p3 = p2.then(result => {
			console.log(‘成功：‘ + result);
		}, reason => {
			console.log(‘失败：‘ + reason);
		}); 

• TEHN中也可以只写一个或者不写函数

  • .then(fn)
  • .then(null,fn)

遇到一个THEN，要执行成功或者失败的方法，如果此方法并没有在当前THEN中被定义，则顺延到下一个对应的函数

• Promise.all(arr)：返回的结果是一个PROMISE实例（ALL实例），要求ARR数组中的每一项都是一个新的PROMIE实例，
• PROMISE.ALL是等待所有数组中的实例状态都为成功才会让“ALL实例”状态为成功，VALUE是一个集合，存储着ARR中每一个实例返回的结果；凡是ARR中有一个实例状态为失败，“ALL实例”的状态也是失败
• Promise.race(arr)：和ALL不同的地方，RACE是赛跑，也就是ARR中不管哪一个先处理完，处理完的结果作为“RACE实例”的结果

async / await

• AWAIT会等待当前PROMISE的返回结果，只有返回的状态是RESOLVED情况，才会把返回结果赋值给RESULT

• AWAIT不是同步编程，是异步编程（微任务）:当代码执行到此行（先把此行），构建一个异步的微任务（等待PROMISE返回结果，并且AWAIT下面的代码也都被列到任务队列中），

async function fn() {
	console.log(1);
	let result = await p2;
	console.log(result);

	let AA = await p1;
	console.log(AA);
}
fn();
console.log(2); */

• 如果PROMISE是失败状态，则AWAIT不会接收其返回结果，AWAIT下面的代码也不会在继续执行（AWAIT只能处理PROMISE为成功状态的时候）

 async function fn() {
	let reason = await p3;
	console.log(reason);
}
fn(); */