深浅克隆和Promise异步编程

更新日期: 2020-03-02阅读: 1.6k标签: 异步

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

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


链接: https://fly63.com/article/detial/9234

通过alert方法,去理解js中阻塞、局部作用域、同步/异步任务

javascript中alert是Bom中的成员函数,alert对话框是模态的,具有阻塞性质的,不点击是不会执行后续代码的。js的阻塞是指在调用结果返回之前,当前线程会被挂起, 只有在得到结果之后才会继续执行。

如何优化async代码?更好的编写async异步函数

如何优化async代码?更好的编写async函数:使用return Promise.reject()在async函数中抛出异常,让相互之间没有依赖关系的异步函数同时执行,不要在循环的回调中/for、while循环中使用await,用map来代替它

【JS】异步处理机制的几种方式

Javascript语言的执行环境是单线程,异步模式非常重要。在浏览器端,耗时很长的操作都应该异步执行,避免浏览器失去响应,最好的例子就是Ajax操作。

js异步加载方式有哪些?_详解异步加载js的多种方案

js异步加载又被称为非阻塞加载,浏览器在下载JS的同时,还会进行后续页面处理。那么如何实现js异步加载呢?下面整理了多种实现方案供大家参考。异步加载js方案:Script Dom Element、onload时的异步加载、$(document).ready()、async属性、defer属性、es6模块type=module属性

Nodejs 处理异步(获取异步数据并处理)的方法

回调函数方式:将异步方法如readFile封装到一个自定义函数中,通过将异步方法得到的结果传给自定义方法的回调函数参数。事件驱动方式:使用node events模块,利用其EventEmitter对象

JS常用的几种异步流程控制

JavaScript引擎是基于单线程 (Single-threaded) 事件循环的概念构建的,同一时刻只允许一个代码块在执行,所以需要跟踪即将运行的代码,那些代码被放在一个任务队列 (job queue) 中

前端异步编程之Promise和async的用法

传统的异步解决方案采用回调函数和事件监听的方式,而这里主要记录两种异步编程的新方案:ES6的新语法Promise;ES2017引入的async函数;Generator函数(略)

异步的JavaScript

JS本身是一门单线程的语言,所以在执行一些需要等待的任务(eg.等待服务器响应,等待用户输入等)时就会阻塞其他代码。如果在浏览器中JS线程阻塞了,浏览器可能会失去响应,从而造成不好的用户体验。

js 多个异步的并发控制

请实现如下的函数,可以批量请求数据,所有的URL地址在urls参数中,同时可以通过max参数 控制请求的并发度。当所有的请求结束后,需要执行callback回调。发请求的函数可以直接使用fetch。

解读react的setSate的异步问题

将setState()认为是一次请求而不是一次立即执行更新组件的命令。为了更为可观的性能,React可能会推迟它,稍后会一次性更新这些组件。React不会保证在setState之后,能够立刻拿到改变的结果。

点击更多...

内容以共享、参考、研究为目的,不存在任何商业目的。其版权属原作者所有,如有侵权或违规,请与小编联系!情况属实本人将予以删除!