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

时间:2021-1-8 作者:admin

什么是异步

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

eventLoop

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

  1. setTimeOut
  2. setInterval

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

  1. promise.then
  2. 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. 同步代码有:
    1. 普通的打印代码
    2. async中,await函数前(包括await函数内容)
    3. promise.then前
  3. 微任务有:
    1. await函数之后
    2. promise.then()内容
  4. 宏任务有:
    1. setTimeout

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

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

promise

Promise规范及区别

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

1 进度的处理被忽略了

es中Promise的使用

  1. Promise的状态

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

  1. Promise的方法

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

  1. Promise基础使用实例
const promise = new Promise((resolve,reject)=>{
  setTimeout(()=>{
    resolve("result")
  },10)
})
promise.then(res=>{
  console.log(res)
})
//result
  1. 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引入的一种用于创造迭代器的特殊函数

声明:本文内容由互联网用户自发贡献自行上传,本网站不拥有所有权,未作人工编辑处理,也不承担相关法律责任。如果您发现有涉嫌版权的内容,欢迎进行举报,并提供相关证据,工作人员会在5个工作日内联系你,一经查实,本站将立刻删除涉嫌侵权内容。