JavaScript关于宏任务与微任务

js执行异步任务

1. js是单线程的。
2. js虽然是单线程，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程
3. 浏览器的线程包括：javascript引擎线程、界面渲染线程、浏览器事件触发线程、程定时器线程、http请求线程等
4. js异步任务常见的有：事件、定时器、网络请求等

js事件循环

1. 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务 所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务
2. 主线程之外，同时还有两个任务列表用于存放异步任务，宏任务、微任务
3. 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，对应的事件进入“执行栈”开始执行，执行顺序为：主线程=>微任务=>宏任务
4. 主线程不断重复上边的第三步，也就是常说的Event Loop（事件循环）

宏任务：script代码 setInterval setTimeout new Promise

微任务：原生Promise.then()、process.nextTick、

执行顺序：先执行 宏任务当中的同步任务 --> 微任务当中的同步任务 --> 微任务当中的异步任务 --> 宏任务中的异步任务

example

<Button onClick={() => {
  setTimeout(() => { // 异步
    console.log('10');
  }, 10);
  getList({ page: 1, pageSize: 10, name: '' }).then((res) => {//数据请求
    console.log('wancheng');
  });
  new Promise((resolve, reject) => { 
    console.log('promise');
    resolve('hhelo');
  }).then((res) => {
    console.log('promie-then', res);
  });
  setTimeout(() => { // 异步
    console.log('00');
  }, 0);
  console.log('hello');// 同步
}}
>点击
</Button>
//promise
//hello
// promie-then hhelo
// 00
// 10
// wancheng

example

new Promise((resolve, reject) => { 
  console.log('promise');
  resolve('hhelo');
}).then((res) => {
  console.log('promie-then', res);
});
new Promise((resolve, reject) => { 
  console.log('promise1');
  resolve('hhelo1');
}).then((res) => {
  console.log('promie-then', res);
});
//promise
//promise1
// promie-then hhelo
// promie-then hhelo1

example

<Button onClick={() => {
  getconfigList({ page: 1, pageSize: 10 }).then((res) => {
    console.log('then');
  });
  queueMicrotask(() => { // 微任务
    console.log('hello');
  });

  console.log('tong');
}}
>点击
</Button>
//tong
// hello
// then

example

new Promise((resolve, rejec) => {
  console.log('Promise');
  resolve('new-promise-');
}).then((res) => {
  console.log('Promise-then', res);
});
queueMicrotask(() => { // 微任务
  console.log('hello');
});

console.log('tong');
//Promise
//index.tsx:252 tong
//index.tsx:246 Promise-then new-promise-
//index.tsx:249 hello

queueMicrotask(() => { // 微任务
  console.log('hello');
});

console.log('tong');
new Promise((resolve, rejec) => {
  console.log('Promise');//同步
  resolve('new-promise-');
}).then((res) => { // 微任务
  console.log('Promise-then', res);
});
//tong
// Promise
// hello
// Promise-then new-promise-

example

   async function async1() {
       console.log('async1 start');
       await async2();
       console.log('async1 end');
   }

   async function async2() {
       console.log('async2');
   }
   
   console.log('script start'); //1
   
   setTimeout(function() {
       console.log('setTimeout'); 
   }, 0)
   
   async1();
   
   new Promise(function(resolve) {
       console.log('promise1');
       resolve();
   }).then(function() {
       console.log('promise2');
   });

   console.log('script end');

example

console.log('script start');

function getName() {
  console.log('name');
}

async function a() {
  console.log('async 1');
  await getName();
  console.log('async 1 end');
}
a();
setTimeout(() => {
  console.log('setTimeout1');
}, 0);
setTimeout(() => {
  console.log('setTimeout2');
});

new Promise((resolve, reject) => {

  console.log('Promise');
  resolve();

}).then(() => {
  console.log('then');
}).catch(() => {

});

打印结果

script start
async 1
name
Promise
async 1 end
then
setTimeout1
setTimeout2

example

console.log('script start');

function getName() {
  console.log('name');
}
setTimeout(() => {
  console.log('setTimeout2');
});
async function a() {
  console.log('async 1');
  await getName();
  console.log('async 1 end');
}
a();
setTimeout(() => {
  console.log('setTimeout1');
}, 0);

new Promise((resolve, reject) => {

  console.log('Promise');
  resolve();

}).then(() => {
  console.log('then');
}).catch(() => {

});

打印结果

script start
async 1
name
Promise
async 1 end
then
setTimeout2
setTimeout1