update: 异步任务

This commit is contained in:
qianguyihao 2021-05-17 00:26:12 +08:00
parent d59af98199
commit 9e92f19226
2 changed files with 48 additions and 16 deletions

View File

@ -1,20 +1,52 @@
## 前言异步 ## 前言单线程和异步
### 异步 ### 单线程
JavaScript 的执行环境是**单线程** JavaScript 的执行环境是**单线程**即同一时间只能处理一个任务
所谓单线程是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个也就是一次只能完成一项任务这个任务执行完后才能执行下一个它会阻塞其他任务这个任务可称为主线程 具体来说所谓单线程是指 JS 引擎中负责解释和执行 JavaScript 代码的线程只有一个也就是一次只能完成一项任务这个任务执行完后才能执行下一个所有的任务都**需要排队**
异步模式可以一起执行**多个任务**常见的异步模式有以下几种 JS为何要被设计为单线程呢原因如下
- 定时器 - 首先是历史原因在最初设计 JS 这门语言时多进程多线程的架构并不流行硬件支持并不好
- 其次是因为多线程的复杂性多线程操作需要加锁编码的复杂性会增高
- 而且如果多个线程同时操作同一个 DOM在多线程不加锁的情况下会产生冲突最终会导致 DOM 渲染的结果不符预期
所以为了避免这些复杂问题的出现JS被设计成了单线程语言
### 同步任务和异步任务事件循环
如果当前正在执行的任务很耗时它就会**阻塞**其他正在排队的任务为了解决这个问题JS在设计之初将任务分成了两类同步任务异步任务
- 同步任务**主线程**上排队执行的任务只有前一个任务执行完毕才能执行下一个任务
- 异步任务不进入主线程而是进入**任务队列**task queue的任务只有"任务队列"通知主线程某个异步任务可以执行了该任务才会进入主线程执行
### 多次异步调用的顺序
- 多次异步调用的结果顺序可能不同步
- 异步调用的结果如果**存在依赖**则需要通过回调函数进行嵌套
### 前端使用异步的场景
什么时候需要**等待**就什么时候用异步
- 定时任务setTimeout定时炸弹setInterval循环执行
- 事件绑定比如说按钮绑定点击事件之后用户爱点不点我们不可能卡在按钮那里什么都不做所以应该用异步
- 网络请求ajax请求网络图片加载
- ES6中的Promise
- 接口调用
- 事件函数
今天这篇文章我们重点讲一下**接口调用**接口调用里重点讲一下**Promise**
### 接口调用的方式 ### 接口调用的方式
@ -25,14 +57,17 @@ js 中常见的接口调用方式,有以下几种:
- Fetch - Fetch
- axios - axios
### 多次异步调用的顺序
- 多次异步调用的结果顺序可能不同步 今天这篇文章我们重点讲一下接口调用里的**Promise**
- 异步调用的结果如果**存在依赖**则需要通过回调函数进行嵌套
### 参考链接
- [JS-同步任务异步任务微任务和宏任务](https://github.com/PleaseStartYourPerformance/javaScript/issues/34)
- [JS同步异步宏任务微任务](https://juejin.cn/post/6875605533127081992)、[JavaScript中事件循环的理解](https://zhuanlan.zhihu.com/p/364475433)、[javascript事件循环机制](https://github.com/reng99/blogs/issues/34)
## 为什么需要 Promise ## 为什么需要 Promise

View File

@ -1,7 +1,4 @@
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8485028.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我一起入门和进阶前端。
> 以下是正文
## 同步和异步 ## 同步和异步