JavaScript关于宏任务与微任务
js执行异步任务
- js是单线程的。
- js虽然是单线程，但是浏览器是多线程的，js碰到异步任务，并没有自己处理，而是交给了浏览器的其他线程
- 浏览器的线程包括：javascript引擎线程、界面渲染线程、浏览器事件触发线程、程定时器线程、http请求线程等
- js异步任务常见的有：事件、定时器、网络请求等
js事件循环
- 单线程就意味着，所有任务需要排队，前一个任务结束，才会执行后一个任务 所以在同一时间只能执行一个任务，称为主线程，用来执行同步任务
- 主线程之外，同时还有两个任务列表用于存放异步任务，宏任务、微任务
- 一旦“执行栈”中的所有同步任务执行完毕，系统就会读取“任务队列”，对应的事件进入“执行栈”开始执行，执行顺序为：主线程=>微任务=>宏任务
- 主线程不断重复上边的第三步，也就是常说的Event Loop（事件循环）
宏任务：script代码 setInterval setTimeout new Promise
微任务：原生Promise.then()、process.nextTick、
执行顺序：先执行 宏任务当中的同步任务 --> 微任务当中的同步任务 --> 微任务当中的异步任务 --> 宏任务中的异步任务
以下代码执行顺序
const handleClick = () => {
console.log('iop');
new Promise((resolve, reject) => {
console.log('promise-1');
setTimeout(() => {
console.log('promise-timeeout');
}, 0)
process.nextTick(function () {
console.log('promise---process.nextTick-1');
})
resolve('222')
}).then((res) => {
setTimeout(() => {
console.log('promise-then-timeout');
}, 0)
console.log('promise-then');
process.nextTick(function () {
console.log('promise.then---process.nextTick-1');
})
})
console.log('iop3333');
setTimeout(() => {
console.log('timeout-222');
}, 0)
process.nextTick(function () {
console.log('process.nextTick-1');
})
}
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={() => {
signatureConfigList({ 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