前端javascript高级面试视频笔记-单线程和异步(四)

在这里插入图片描述
在这里插入图片描述
一次弄懂Event Loop(彻底解决此类面试问题)
在这里插入图片描述
在这里插入图片描述
4-4 单线程 - 异步-1

在这里插入图片描述
在这里插入图片描述
异步,先把代码执行了,其他到时间再执行。(不要管他,我们把正常代码执行完毕,回头再执行异步代码)
ajax是异步请求

同步:提交请求->等待服务器处理->处理完毕返回 这个期间客户端浏览器不能干任何事
异步: 请求通过事件触发->服务器处理(这是浏览器仍然可以作其他事情)->处理完毕
同步交互,就是最常见的click-refresh模式,点一个连接或提交一个表单,然后整个页面被刷新
异步交互,当前很热的AJAX就是典型例子,提交请求返回对象是不可见的层,然后用javascripts根据返回数据,改变当前页面显示,譬如google map

原文链接:https://blog.csdn.net/qq_41326048/article/details/86212373

在这里插入图片描述
异步两个问题:书写顺序的问题,callback不可模块化的问题。

4-7 event-loop -
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
先执行主进程,等同步代码执行完毕再去异步队列看,有的话拿过来执行,然后把异步队列的函数放到主进程去执行
输出200 100
在这里插入图片描述
打印 3 2 1
在这里插入图片描述
第一种情况 dcba
第二种情况 dcab

在这里插入图片描述
4-10 jquery-deferred - 介绍

promise是jQuery1.5提出来的
在这里插入图片描述
在这里插入图片描述
五个设计原则
对扩展开放,对修改封闭:多人开发,不干扰,回归测试,测新的就可以,耦合减少,方便管理维护。
在这里插入图片描述
另一种写法:.then的写法和promise语法相近
在这里插入图片描述

4-15
因为promise把reject封装进去了,你是被动调用,只能调用(.done .then)
在这里插入图片描述
在这里插入图片描述
4-16
在这里插入图片描述
4-17 promise的使用和原理

Promise 是异步编程的一种解决方案,比传统的解决方案——回调函数和事件——更合理和更强大。它由社区最早提出和实现,ES6 将其写进了语言标准,统一了用法,原生提供了Promise对象。

实现原理
ES6 规定,Promise对象是一个构造函数,用来生成Promise实例。通过在函数内部return 一个 Promise对象的实例,这样就可以使用Promise的属性和方法进行下一步操作了。

Promise套Promise时,也就是Promise链的时候——注意信息的传递
一个失败的例子,当我们使用Promise链的时候,如果每一步都需要上一步的数据时,就需要传参,成功通过resolve传参,失败通过reject传参,如果忘记传参,就得不到想要的结果。
resolve把成功的数据返回给下一个回调
reject把失败的数据返回给下一个回调。

原文链接:

需求:我们想加载完第一个图片加载第二个图片,加载完第二个图片加载第三个图片,就是顺序做
Promise.all 获取所有请求完成以后
Promise.race 获取最初完成请求以后

在这里插入图片描述
在这里插入图片描述
引入
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
控制台:
在这里插入图片描述
4-18 promise - 捕获异常-1
在这里插入图片描述
在这里插入图片描述
throw new error 在程序执行中,哪个语法会报错。是在逻辑之外的错误
在这里插入图片描述
逻辑内部的错:图片加载失败,执行reject,
业务逻辑之外的错误,统一通过catch捕获。
在这里插入图片描述
在这里插入图片描述
4-20 promise - 串联

例:先后顺序:先拿到id,才能再做别的,这个用promise如何做?
在这里插入图片描述
4-21 promise.all promise.race
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
race 先执行,只要有一个执行完就可以接下来执行下一个
all 所有都执行完才执行下一个
在这里插入图片描述
result2 先执行完毕,尺寸小,占空间小

4-22
在这里插入图片描述
还没加载 pending
成功 fulfilled
失败 rejected
在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
第一个then返回的是result2 的
第二个then执行的是result2

总结
then里面的函数没有明文返回promise实例,那么返回的就是第一个实例
then里面的函数有返回promise实例,那么后面执行的都是刚刚返回的那个实例

4-23
promise 总结
在这里插入图片描述
4-24 async-await-1
我们无法改变js 单线程异步这种本质,导致的问题就是js代码写的顺序和执行顺序不一致,一直在解决callback的问题:异步的执行和编写不一致带来的问题,终极解决方案:async、await

callback英文解释

A callback is a function that is passed as an argument to another function and is executed after its parent function has completed.

字面上理解下来就是,回调就是一个函数的调用过程。那么就从理解这个调用过程开始吧。函数a有一个参数,这个参数是个函数b,当函数a执行完以后执行函数b。那么这个过程就叫回调。
源: http://blog.sina.com.cn/s/blog_5996fcbd0100vn2n.html#commonComment
在这里插入图片描述在这里插入图片描述
在这里插入图片描述
在这里插入图片描述
4-26
如何使用asncn和await
在这里插入图片描述
4-27 总结
当前异步的解决方案
在这里插入图片描述
在这里插入图片描述

猜你喜欢

转载自blog.csdn.net/fengtingYan/article/details/101347847
今日推荐