深浅克隆和Promise异步编程

Posted smilestudio

tags:

篇首语:本文由小常识网(cha138.com)小编为大家整理,主要介绍了深浅克隆和Promise异步编程相关的知识,希望对你有一定的参考价值。

深克隆和浅克隆

浅克隆

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(); */


以上是关于深浅克隆和Promise异步编程的主要内容,如果未能解决你的问题,请参考以下文章

promise执行顺序

前端面试题之手写promise

ECMA Script 6_异步编程之 Promise

简单实现异步编程promise模式

JavaScript 异步编程:promise 与生成器

把微信小程序异步API为Promise,简化异步编程