update: 异步任务
This commit is contained in:
parent
d59af98199
commit
9e92f19226
@ -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?
|
||||||
|
|
||||||
|
@ -1,7 +1,4 @@
|
|||||||
|
|
||||||
> 本文最初发表于[博客园](http://www.cnblogs.com/smyhvae/p/8485028.html),并在[GitHub](https://github.com/qianguyihao/Web)上持续更新**前端的系列文章**。欢迎在GitHub上关注我,一起入门和进阶前端。
|
|
||||||
|
|
||||||
> 以下是正文。
|
|
||||||
|
|
||||||
## 同步和异步
|
## 同步和异步
|
||||||
|
|
||||||
|
Loading…
Reference in New Issue
Block a user