JavaScript 异步任务

Jackson Mseven

已于 2023-04-07 16:11:51 修改

阅读量144

点赞数 1

CC 4.0 BY-SA版权

分类专栏： JS 文章标签： javascript 前端开发语言

于 2023-04-05 22:57:55 首次发布

本文链接：https://blog.csdn.net/Jackson_Mseven/article/details/129979080

JS 专栏收录该内容

23 篇文章

订阅专栏

同步任务按顺序执行，而异步任务在同步任务完成后才执行，包括宏任务和微任务。宏任务如Script、setTimeout，微任务如Promise.then。文章通过示例解释了Promise和async/await在处理异步操作中的应用。

什么是同步任务？

同步任务在执行过程中会按照任务队列顺序执行。

什么是异步任务？

异步任务会等同步任务执行完毕之后才执行。
其中，异步任务又分为了宏任务和微任务。

宏任务

浏览器发起的任务。
例如：<script>整体代码、setTimeout、setInterval、setImmediate、Ajax、DOM事件

微任务

JS 发起的任务。
例如：process.nextTick、MutationObserver、Promise.then catch finally、async / await

JS任务的执行顺序

同步 -> 微任务 -> 宏任务

异步的解决办法

Promise

// 构造函数同步执行
const promise = new Promise((resolve, reject) => {
  console.log(1)
  resolve()
  console.log(2)
})
// then 是异步执行
promise.then(() => {
  console.log(3)
})
console.log(4)
/*
  执行顺序： 1 2 4 3
* /

关于 Promise 的详细信息可以去看我的另一篇文章Promise函数

async / await

function fun() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('yes')
    }, 100)
  })
}
async function getData() {
  const res = await fun()
  console.log(res) // 'yes'
  return '123'
}
console.log(getData())
/*
  Promise {
    [[Prototype]]: Promise,
    [[PromiseState]]: "fulfilled",
    [[PromiseResult]]: "123"
  }
*/