深浅克隆和Promise异步编程

1浅克隆

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

 

2深克隆

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

电脑刺绣绣花厂 http://www.szhdn.com 广州品牌设计公司https://www.houdianzi.com

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