前端异步相关知识总结，看了这篇也不够

什么是异步

异步在js中简单来说就是不阻塞后续代码执行，例如一个setTimeout其执行顺序上一定不会阻塞后续代码。而js是一个单线程语言，所以需要引入eventloop概念

eventLoop

eventLoop的核心概念就是微任务和宏任务的执行顺序，在js代码执行过程中，会以同步代码=>微任务=>宏任务的顺序执行，其中常见的宏任务有(浏览器支持)：

setTimeOut

setInterval

微任务有(浏览器支持)：

promise.then

async await

来看一道面试题加深理解：

foo = async function () {
  console.log('foo');
}
bar = async function () {
  console.log('bar start');
  await (function () {
    console.log('await')
  })()
  console.log('barEnd');
}
console.log('script start');
setTimeout(()=>{
  console.log('setTimeout');
},0)
foo();
bar();
new Promise(resolve =>{
  console.log('Promise');
  resolve(1)
}).then(()=>{
  console.log('PromiseThen');
})
console.log('script end');

结果为：

/* script start
foo
bar start
await
Promise
script end
barEnd
PromiseThen
setTimeout */

我们来分析一下：

这段代码会以同步代码=>微任务池=>宏任务池顺序执行
同步代码有：
1. 普通的打印代码
2. async中，await函数前（包括await函数内容）
3. promise.then前
微任务有:
1. await函数之后
2. promise.then()内容
宏任务有：
1. setTimeout

下面说说需要注意的几个点：

如果有多个script代码片段，那么将在第一段script微任务执行完成后执行第二段script,待代码片段和其自身微任务执行完后再执行宏任务池
将await函数结果赋值给变量的操作也会被放到微任务队列中执行

promise

Promise规范及区别

我们一般所说的Promise是es所做出的对Promise规范的实现，Promise的规范主要有promise/A和promise/A+;这两个规范最主要的区别在于：

1 进度的处理被忽略了

es中Promise的使用

Promise的状态

pending:表示等待promise执行结果状态
fullfilled:表示执行完成且resolve(成功)
rejected:表示执行完成且rejected(失败)

Promise的方法

then: 表示reslove后的处理
catch: 表示reject后的处理
finally: 无论最后promise是何结果都会执行

Promise基础使用实例

const promise = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve("result")
  },10)
})
promise.then(res=>{
  console.log(res)
})
//result

promise的静态方法

Promise.all(): 其接受一个由由promise实例组成的数组作为参数，遍历调用所有实例后，如果状态都为fullfilled则其状态为fullfilled，并将所有实例的返回值作为数组传递给其后续处理.如果有实例为reject状态，则返回最先reject的实例结果给其后续处理

Promise.any(): 同样接受一个promise实例的数组，在有一个实例fullfilled后立即返回其结果给后续处理，当所有实例reject时，成为reject状态

Promise.allSettled(): 将等待所有实例执行结束，并且无论实例结果如何，都会返回一个包含所有结果的数组给后续处理，此种方法只有fullfilled状态

Promise.race(): 所有实例有一个状态发生变化，则其状态发生改变，并将此实例结果返回

Promise.resolve():将现有对象转为Promise对象，并且状态为fullfilled

Promise.reject():将现有对象转为Promise对象，并且状态为reject

实现一个promise

推荐一个写的很好的文章

async原理

async/await是 Generator 的语法糖，Generator 是es6引入的一种用于创造迭代器的特殊函数