zoukankan      html  css  js  c++  java
  • 深浅克隆和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(); */
  • 相关阅读:
    百度地图V1.5 LocalSearch增加浮动窗体的操作内容
    百度地图LV1.5实践项目开发工具类bmap.util.jsV1.1
    Jquery时间快捷控件(Jtime)配置v1.1
    百度地图LV1.5实践项目开发工具类bmap.util.jsV1.0
    Jquery时间快捷控件(Jtime)配置v1.0
    百度地图JavaScript API V1.5初级开发工具类
    Cocos2d-x可以实现的动画效果
    禁掉Apache web server签名 How to turn off server signature on Apache web server
    codevs 3372 选学霸(hash+并查集+多重背包)
    从头认识Spring-3.4 简单的AOP日志实现-扩展添加检查订单功能,以便记录并检測输入的參数
  • 原文地址:https://www.cnblogs.com/xiaonian8/p/13821503.html
Copyright © 2011-2022 走看看