js异步
因为js是单线程的语言，所以为了不使页面卡顿，暂停。js引入了异步机制。
问：那么js为什么是单线程的呢？
答：因为js是可以操作dom元素的，所以js就必须单线程的。否则页面渲染就会出问题。
es6以前的处理方式
众所周知，es6以前的是通过回掉函数callback来处理异步的逻辑的。这种处理方式正常情况下 没有什么问题，但是如果碰到多个函数层层嵌套 就会出现回掉地狱。形成一个类似于金字塔的样子，虽然执行上并没有问题，但是非常不利于维护和阅读。想想如果 产品经理忽然说需求变了 需要你在b里面在加一段逻辑，再调用一下e函数，然后按照a,b,e,c,d的顺序执行。（这个时候 如果不小心删掉了一个大括号，那么开发人员的心态就会崩溃，怀疑自我。想转行！）（以下代码瞎写的，表达个意思而已，懂吧）
function a(){
function b(){
function c(){
function D(){
console.log('a,b,c,d 都按顺序执行了')
}
}
}
}es6的promise
所以es6的promise应运而生。promise的产生是为了让我们脱离回掉地狱。过上链式调用的好日子。这样代码阅读起来会舒服很多很多。如上面那段逻辑 我们就可以改写为
function a() {
return new Promise((resolve,reject)=>{
return 'a'
})
}
function b() {
return new Promise((resolve,reject)=>{
return 'b'
})
}
function c() {
return new Promise((resolve,reject)=>{
return 'c'
})
}
function d() {
return new Promise((resolve,reject)=>{
return 'd'
})
}
a().then(()=>{
return b();
}).then(()=>{
return c();
}).then(()=>{
return d()
}).then(()=>{
console.log('a,b,c,d 都按顺序执行了')
})这样的话如果 你要在b 后面加一个e函数 你就可以直接在中间插一段就行了。代码会非常的整齐，逻辑看上去都清晰很多。
promise 有三种状态，pending, resolved,rejected. 刚定义出来的promise 就是pending状态。 Pending 可以转为resolved 也可以转为rejected 过程不可逆。resolved的状态被then接收，rejected状态可以被catch接收。(这里说的resolved也就是fulfilled的意思)
es2017的async
虽然 promise把异步变成了链式调用，但是async 能让我们用同步的语法去写异步的逻辑。这个就很强大，让你写代码的时候 不需要考虑什么同步异步，达到润物无声的高级感。
我们都知道async 是promise的语法糖，那么怎么理解语法糖这个意思呢，就是说是 他本质上还是promise 的逻辑，但是形式上不一样而已。那怎么证明async不是新的类型呢。可以定义一个async函数，然后直接打印这个函数 就会发现他执行后返回值还是一个promise对象。如下
async function a(){} a();
/*Promise {<fulfilled>: undefined}
__proto__: Promise
[[PromiseState]]: "fulfilled"
[[PromiseResult]]: undefined*/async 既然是promise的语法糖，那promise有的功能 它也都有。promises使用时最常用的then函数，在async里面对标的就是await函数。所以 await不能单独调用哦，必须放在async里面。使用方法如下
async function a(){return 'helloWorld'}
async function b() {
console.log("*****")
let hello=await a();
console.log(hello);
console.log("888")
}
b();
//*****
//helloWorld
//888那promise 对应的catch函数，在这里需要用其它语言的写法，try catch来处理。
也就是说 要用try来包裹await函数，在catch里写上异常处理逻辑。
这里有个较为常见的面试题。
问：我们知道await函数执行过程中，如果中断了，是不会继续往下走的。那如果有的报错，我们其实是希望他提示一下，但是不要中断我的操作，那我们要怎么做呢？
答：将要处理的这段异步代码用try catch包裹起来，在catch里面加上错误提示，再将try里面包裹的 await后面的代码 再写一份到catch中，让其运行。
或者，我们可以用async和promise相结合的方式，用promise的catch里面写出错后的逻辑。
具体代码可以大概概括如下（表达个意思，不是复制出去就能执行的）
async function a(){return 'helloWorld'}
async function b() {
console.log("我是执行异步前的正常逻辑");//1
try {
let hello=await a();
console.log("我是执行异步后的其它代码")//2
}catch (e) {
console.error(e)//错误提示
console.log("我是执行异步后的其它代码")//2语句复制过来的
}
}
//或与promise结合
async function b() {
console.log("我是执行异步前的正常逻辑");//1
a().then(()=>{
console.log("我是执行异步后的其它代码")//2
}).catch((e)=>{
console.error(e)//错误提示
console.log("我是执行异步后的其它代码")//2语句复制过来的
})
}异步的处理机制-事件循环
说到异步 那不能提到异步的处理机制-事件循环（event-loop)
具体流程 我用下面的简图表示出来了（可能图不太标准 ，主要看文字）
就是说 一段代码下来，
1.我们首先判断当前语句是否是同步的正常语句，是的话，我们就推入运行栈中 运行，运行完，将这个语句推出栈。如果碰到异步的语法，我们先把他们放到消息队列里等待着，继续往下走。
2.如果同步代码已经全部执行完毕，那么运行栈暂时清空，此时，事件循环就好像一个哨兵一样，发现了这个消息，他去消息队列里找我们刚刚暂存在里异步函数，然后继续重复第一步，判断这个异步函数中的语句 是否是同步的。。
3.事件循环这个哨兵就像永动机一样，不需要休息，一直存在，一直循环监听。就实现了我们的异步逻辑实现。
宏任务与微任务
宏任务指的是浏览器指定的一些异步函数，比如点击事件，定时器事件，ajax事件
微任务指的是js指定的异步函数，比如promise和async await。
问：为什么要区分宏任务和微任务
答：因为宏任务和微任务 在事件循环中执行的时机是不一样的。（可能会遇到一些面试题里会问这个）
问：宏任务和微任务哪个先执行
答：微任务先执行，宏任务后执行。微任务在dom渲染前执行，宏任务在dom渲染后后执行。（这个就不要问为什么了，人家浏览器就这么定了）