异步的处理

前端的面试中“说说你如何处理异步的”这个问题是必不可少的

现在说说其中的对于异步的处理方式：回调函数，promise,Generator,async await

异步的出现：

说到其中的异步处理不得不说的就是其中的事件循环机制了。

我先用自己的洪荒之力来给大家说一下吧！在js里面总是先去执行同步的任务等到同步的任务执行完之后才去执行其中的异步的任务的。异步的任务又分为宏任务和微任务；我们先去执行其中的微任务然后再去再去执行其中的宏任务。这样说说大家肯定觉得很通俗易懂吧！但是你脑袋里有没有出现这样的问题：什么是同步任务，什么是异步任务，什么是宏任务，什么是微任务呢？

在这里引用一下别人的一张图片吧！

 

这里务必要说的就是：js是单线程的【假如说js是多线程的，你一个线程在创建节点，一个线程在移除节点天呀！那你到底要干什么呀！】

异步的任务：你可以这样理解那些不是立即执行的代码【等一段时间之后才去执行或者是必须要有一个触发的动作才能让他自执行的都是异步的】，异步的有：setTimeout,setInterval;onclick,onblur,onfocus.....;ajax的请求，promise里面的then方法。。。

同步的任务：立即执行的就是同步的

那什么是宏任务呢？什么是微任务呢？

宏任务就是：定时器，以及其中的事件

微任务：promise里面的catch和then的方法，以及node里面的process.nextTick

我觉得有一位大神将其中的事件循环机制描述的很清楚：你们可以看看http://www.manongjc.com/article/9144.html

看了概念以及其中的那两张图片之后：我们将其中的事件循环机制来详细说说吧！

js从上面往下解析的时候将同步的任务放在执行栈里面将其中的异步的放在异步的队列里面等到同步的执行完之后再将异步队列里面的满足条件【其中的定时器来说刚开始的时候没有放在异步执行队列里面等到设定的时间过了之后在将其中的要执行的事件放在异步队列的尾端，这也就是你为什么setTimeout明明只是设定了3秒有的时候却在3秒之后才执行的原因了，这里还需要注意的就是setTimeout里面的默认时间为4毫秒】的拿到同步的执行栈里面进行执行。

然后再说说其中的宏任务和其中的微任务执行步骤吧！

等到异步的执行队列之后先将其中能够执行的宏任务执行完之后再去看看异步的执行队列里面是否有微任务，如果有的话先去执行队列里面的微任务执行完之后再去执行下一趟的宏任务。【这样理解吧！其中的微任务的权值比较大】

现在你在返回去看上面的两张图你就没有那么大的压力了吧！

 

异步引起的问题：

曾经的我只是关注其中的概念，有一天我在利用ajax进行前后台交互的时候出现不能取到值得情况。【这里不是说交互出问题了哈！而是我根据后台传递给我的数据进行表格的动态的添加数据之后我在另外一个函数里面去获取表格里面的数据的时候怎么都获取不到】

function load(){进行ajax请求，并且动态生成表格}
function  cooperate(){想通过获取其中table里面的值}
load()
cooperate()

哎！其中的前后台交互利用就是ajax请求这个是异步的，因此在执行cooperate函数的时候还没有从后台请求到数据呢！！！！

 

解决其中的异步的问题：

1.回调函数：

我们可以让获取到后台数据并且进行页面的渲染之后再去对表格进行操作【我们将cooperate写在load里面动态表格生成完之后再去执行】

如果说我们现在获取到表格里面的值之后要去改变表格里面的部分的值，之后将表格里面的值在传递给后台【我们之不是要写一个a函数去操作，再去利用一个b函数进行传值，后期如果还要对表格进行其他的操作】。有没有很想?。一直是函数里面套函数，真的很烦。

 

2.promise

谢天谢地，promise的出现让我们摆脱了回调函数那种让人很想吐的写法。这个之后我们只要利用promise里面的then方法就好了

new Promise().then().then()

利用其中的promise里面的then方法每次执行完之后都会返回一个新的promise对象，我们可以进行链式调用了。

利用promise将其中的异步全部转化为同步的进行执行，只有其中的第一个then执行完之后才能去执行在一个then方法。

但是呢？我们认真看看上面的代码！我们将原来的代码利用promise进行包装，现在无论进行什么操作我们都是在原来的代码上添加then方法，代码看上去很冗余，因此我们想到了Generator这个

 

3.Generator（说到其中的Generator你有没有想起*以及其中的yiled）

我们都知道Generator函数执行完之后返回的是一个Generator【中文的意思是可遍历的】的对象，这里只有执行next方法之后函数才会直行到下一次yiled的暂停执行或者是到其中的return这一句了。我们就会想其中的Generate是如何利用在异步上面的？？

解开谜底：

因为Generator函数可以暂停和恢复执行，这是他能处理异步任务的根本原因。还因为Generator能够进行函数体内外的数据【next方法返回的value可以向外输出，给next里面传递参数可以向函数体内输入参数】交换和错误处理机制【利用try catch捕获函数体外抛出的错误实现出错代码和处理错误代码的时间和空间上的分离】。

https://www.jianshu.com/p/7d8d68232764

具体的工作流程的话，我还没有弄清楚。等我弄清楚我回来继续完善博客的。希望我在其他部分写的东西能够对大家有用。

4.async/await也是用来处理异步的

https://www.jianshu.com/p/79487965a0ca看看这个大神写的吧！我觉得我用上自己的九牛二虎之力也不能像人家一样这么好的表述其中的关系。这里我想说的就是这里async内部是通过promise来实现的，成功的话用的就是其中promise里面的resolved失败的话用的就是其中的rejected，如果有报错的话用的就是其中的promise里面的catch方法。

其中的await方法的话实在等拿到里面的promise方法里面的返回值。