哪些操作属于宏任务?哪些属于微任务?

  • 宏任务:setInterval, setImmediate, setTimeout、ajax
  • 微任务:queueMicrotask、Promise

请输入图片描述

console.log('aaa');

setTimeout(()=>console.log('t1'), 0);
(async ()=>{
  console.log(111);
  await console.log(222);
  console.log(333);

  setTimeout(()=>console.log('t2'), 0);
})().then(()=>{
  console.log(444);
});

console.log('bbb');
  • 第1步、毫无悬念aaa,过
  • 第2步、t1会放入任务队列 等待
  • 第3步、111会直接执行
  • 第4步、222也会直接执行,但是接下来的console.log(333);setTimeout(()=>console.log('t2'), 0);就塞到微任务队列 里等待了
  • 第5步、bbb毫无疑问,而且当前任务完成,优先执行微任务队列,也就是console.log(333)开始的那里
  • 第6步、执行333,然后定时器t2会加入任务队列 等待(此时的任务队列里有t1和t2两个了),并且async完成,所以console.log(444)进入微任务队列 等待
  • 第7步、优先执行微任务,也就是444,此时所有微任务都完成了
  • 第8步、执行剩下的普通任务队列,这时t1t2才会出来

async/await

async/await的用处就是:用同步方式,执行异步操作

async函数中,await规定了异步操作只能一个一个排队执行,从而达到用同步方式,执行异步操作 的效果,这里注意了:await只能在async函数中使用,不然会报错

比如我现在有一个需求:先请求完接口1,再去请求接口2,我们通常会这么做

function request(num) { // 模拟接口请求
  return new Promise(resolve => {
    setTimeout(() => {
      resolve(num * 2)
    }, 1000)
  })
}

request(1).then(res1 => {
  console.log(res1) // 1秒后 输出 2

  request(2).then(res2 => {
    console.log(res2) // 2秒后 输出 4
  })
})

或者我现在又有一个需求:先请求完接口1,再拿接口1返回的数据,去当做接口2的请求参数,那我们也可以这么做

request(5).then(res1 => {
  console.log(res1) // 1秒后 输出 10

  request(res1).then(res2 => {
    console.log(res2) // 2秒后 输出 20
  })
})

其实这么做是没问题的,但是如果嵌套的多了,不免有点不雅观,这个时候就可以用async/await来解决了

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

是怎么用?

还是用刚刚的例子

需求一:

async function fn () {
  await request(1)
  await request(2)
  // 2秒后执行完
}
fn()

需求二:

async function fn () {
  const res1 = await request(5)
  const res2 = await request(res1)
  console.log(res2) // 2秒后输出 20
}
fn()

截屏2021-09-11 下午9.57.58.png

其实就类似于生活中的排队,咱们生活中排队买东西,肯定是要上一个人买完,才轮到下一个人。而上面也一样,在async函数中,await规定了异步操作只能一个一个排队执行,从而达到用同步方式,执行异步操作 的效果,这里注意了:await只能在async函数中使用,不然会报错哦

刚刚上面的例子await后面都是跟着异步操作Promise,那如果不接Promise会怎么样呢?

function request(num) { // 去掉Promise
  setTimeout(() => {
    console.log(num * 2)
  }, 1000)
}

async function fn() {
  await request(1) // 2
  await request(2) // 4
  // 1秒后执行完  同时输出
}
fn()

可以看出,如果await后面接的不是Promise的话,有可能其实是达不到排队的效果的

说完await,咱们聊聊async吧,async是一个位于function之前的前缀,只有async函数中,才能使用await。那async执行完是返回一个什么东西呢?

async function fn () {}
console.log(fn) // [AsyncFunction: fn]
console.log(fn()) // Promise {<fulfilled>: undefined}

可以看出,async函数执行完会自动返回一个状态为fulfilled的Promise,也就是成功状态,但是值却是undefined,那要怎么才能使值不是undefined呢?很简单,函数有return返回值就行了

async function fn (num) {
  return num
}
console.log(fn) // [AsyncFunction: fn]
console.log(fn(10)) // Promise {<fulfilled>: 10}
fn(10).then(res => console.log(res)) // 10

可以看出,此时就有值了,并且还能使用then方法进行输出

总结

总结一下async/await的知识点

  • await只能在async函数中使用,不然会报错
  • async函数返回的是一个Promise对象,有无值看有无return值
  • await后面最好是接Promise,虽然接其他值也能达到排队效果
  • async/await作用是用同步方式,执行异步操作

generator函数

基本用法

generator函数跟普通函数在写法上的区别就是,多了一个星号*,并且只有在generator函数中才能使用yield,什么是yield呢,他相当于generator函数执行的中途暂停点,比如下方有3个暂停点。而怎么才能暂停后继续走呢?那就得使用到next方法next方法执行后会返回一个对象,对象中有value 和 done两个属性

  • value:暂停点后面接的值,也就是yield后面接的值
  • done:是否generator函数已走完,没走完为false,走完为true
function* gen() {
  yield 1
  yield 2
  yield 3
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: undefined, done: true }

可以看到最后一个是undefined,这取决于你generator函数有无返回值

function* gen() {
  yield 1
  yield 2
  yield 3
  return 4
}
const g = gen()
console.log(g.next()) // { value: 1, done: false }
console.log(g.next()) // { value: 2, done: false }
console.log(g.next()) // { value: 3, done: false }
console.log(g.next()) // { value: 4, done: true }
最后修改:2022 年 02 月 17 日 04 : 42 PM
如果觉得我的文章对你有用,请随意赞赏