深浅克隆和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(); */
(0)

相关推荐

  • 熬夜7天,我总结了JavaScript与ES的25个知识点

    前言 说起JavaScript,大家都知道是一门脚本语言.那么ES是什么鬼呢?ES全称ECMAScript ,是JavaScript语言的国际标准. 最近,我总结了25条JavaScript的基础特性 ...

  • ES6语法之异步编程-Promise

    Promise 分解异步操作,避免回调地狱 //1.promise //分解异步操作,避免回调地狱 function testMise(value) { //resolve成功后回调 //reject ...

  • 2019前端面试系列——JS面试题

    目录 判断 js 类型的方式 ES5 和 ES6 分别几种方式声明变量 闭包的概念?优缺点? 浅拷贝和深拷贝 数组去重的方法 DOM 事件有哪些阶段?谈谈对事件代理的理解 js 执行机制.事件循环 介 ...

  • es6新增新特性简要总结

    es6简介 es6是在2015年6月正式颁布的新标准,es6基本上实现了所有ECMAScript 规范,以后每年的6月都会发布新版本,但改动不大. let 变量 使用let 关键字来申明的变量拥有以下 ...

  • JS 语法 ES6、ES7、ES8、ES9、ES10、ES11、ES12新特性

    大前端技术之路 14篇原创内容 公众号 新特性 ES6(2015) 1. 类(class) class Man {   constructor(name) {     this.name = '小豪' ...

  • 如何使用Python异步编程进行API调用 | 区块链研究实验室

    原创 链三丰 区块链研究实验室 今天 收录于话题 #Python1 #区块链技术33 #区块链44 #API1 #区块链应用30 本文中,将向大家介绍如何使用Python异步编程,以便您可以更快地进行 ...

  • C# 异步编程

    基于Task的异步编程模式(TAP)是Microsoft为.Net平台下使用Task进行编程所提供的一组建议,这种模式提供了可以被await消耗(调用)方法的APIs,并且当使用async关键字编写遵 ...

  • 一文说通C#中的异步编程

    天天写,不一定就明白. 又及,前两天看了一个关于同步方法中调用异步方法的文章,里面有些概念不太正确,所以整理了这个文章.   一.同步和异步. 先说同步. 同步概念大家都很熟悉.在异步概念出来之前,我 ...

  • 异步编程终极解决方案async-await

    一.async/await · async function 是Promise 的语法糖封装  · 异步编程的终极方案– 以同步的方式写异步 · await 关键字可以"暂停"as ...

  • JavaScript连载15-节点属性设置、深浅克隆节点

    一.获取元素类型以及按类型挑选 <body> <div id = "box"> <p id="word">xiaoming& ...

  • 【青少年编程】【答疑】控制Scratch异步代码的执行顺序

    问题 几天前,我写了一篇图文 对「等待(0)秒」的理解,发现可以利用「等待(0)秒」这个积木块来解决Scratch中异步代码的执行顺序问题,即点击绿旗后可以控制多个角色中响应该事件的代码的顺序. 在这 ...

  • 异步解决方案----Promise与Await

    目录 前言 一.Promise的原理与基本语法 1.Promise的原理 2.Promise的基本语法 二.Promise多个串联操作 三.Promise常用方法 四.Async/Await简介与用法 ...

  • [JavaScript][异步]setTimeout、Promise、Async/Await 的区别

    自己总结的规律: 执行顺序: (Promise中的代码)和(Async中到await这行的代码)看出现顺序->(.then中的代码)和(Async中await这行之后的代码),这个执行顺序取决于 ...