饥人谷Wiki

====== 差别 ======

这里会显示出您选择的修订版和当前版本之间的差别。

--- 前端面试重点突破 [2021/12/22 18:01]
若愚
+++ 前端面试重点突破 [2021/12/28 18:04] (当前版本)
若愚
@@ 行 1: / 行 1: @@
-# 宏任务微任务
+- [Promise与微任务，你真的懂吗？](https://zhuanlan.zhihu.com/p/449183802)
-> 考察事件循环、任务队列、和setTimeout、Promise结合，以输出结果顺序的方式来考察
+- [微任务终极考验，一文讲解async/await转换Promise](https://zhuanlan.zhihu.com/p/450906325)
+- [宏任务与微任务大厂面试题集合](宏任务与微任务)
-**范例** [出处](https://www.nowcoder.com/discuss/448615?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2)
-```javascript
-setTimeout(() => console.log(1), 0);
-new Promise(resolve => {
- console.log(2);
- resolve();
-}).then(() => {
-  console.log(3);
-});
-console.log(4);
-```
-**范例** [出处](https://www.nowcoder.com/discuss/743668?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2)
-```javascript
-setTimeout(()=> console.log(1))
-new Promise(resolve => {
-  resolve()
-  console.log(2)
-}).then(_ => {
-  console.log(3)
-  Promise.resolve().then(_ => {
-    console.log(4)
-  }).then(_ => {
-    Promise.resolve().then(_ => {
-      console.log(5)
-    })
-  })
-})
-console.log(6)
-```
-** 范例 ** [出处](https://www.nowcoder.com/discuss/697189?type=post&order=create&pos=&page=1&ncTraceId=&channel=-1&source_id=search_post_nctrack&subType=2)
-```javascript
-const p = new Promise((resolve, reject) => {
-    console.log(1);
-    setTimeout(() => {
-        console.log(2);
-    })
-    resolve(1);
-}).then(res => {
-    console.log(3);
-})
-setTimeout(() => {
-    console.log(4);
-})
-console.log(5);
-```
-**范例** 来自[面经](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%82%E5%AE%9E%E4%B9%A0) 第5题
-```javascript
-async function async1(){
-    console.log('async1 start')
-    await async2()
-    console.log('async1 end')
-}
-async function async2(){
-    console.log('async2')
-}
-console.log('script start')
-setTimeout(function(){
-    console.log('setTimeout')
-},0)
-async1()
-new Promise(function(resolve){
-    console.log('promise1');
-    resolve()
-}).then(function(){
-    console.log('promise2')
-})
-console.log('script end')
-```
-** 范例 ** 来自[面经](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8218)
-```javascript
-const pro = new Promise((resolve, reject) => {
-  const innerpro = new Promise((resolve, reject) => {
-    setTimeout(() => {
-      resolve(1);
-    }, 0);
-    console.log(2);
-    resolve(3);
-  });
-  innerpro.then(res => console.log(res));
-  resolve(4);
-  console.log("pro");
-})
-pro.then(res => console.log(res));
-console.log("end");
-```
-** 范例 ** 来自[这里](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8223)
-```javascript
-console.log('begin')
-setTimeout(() => {
-    console.log('setTimeout 1')
-    Promise.resolve().then(() => {
-        console.log('promise 1')
-        setTimeout(() => {
-            console.log('setTimeout2 between promise1&2')
-        })
-    }).then(() => {
-        console.log('promise 2')
-    })
-}, 0)
-console.log('end')
-```
-** 范例 **[题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8228)
-```javascript
-function arr(){
-    setTimeout(function(){
-        console.log('1');
-    },0)
-    async function async1(){
-        console.log('4');
-        await async2();
-        console.log('6');
-    }
-    async function async2(){
-        console.log('5');
-    }
-    async1();
-    new Promise(function(resolve,reject){
-        console.log('2');
-        resolve();
-    }).then(function(e2){
-        console.log('h');
-    })
-    console.log('3');
-}
-arr()
-```
-** 范例5 ** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8237)
-```javascript
-setTimeout(_ => console.log(1))
-new Promise(resolve => {
-  resolve()
-  console.log(2)
-}).then(_ => {
-  setTimeout(_ => console.log(3))
-  console.log(4)
-  Promise.resolve().then(_ => {
-    console.log(5)
-  }).then(_ => {
-    Promise.resolve().then(_ => {
-      console.log(6)
-    })
-  })
-})
-console.log(7)
-```
-**范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8244)
-```javascript
-console.log(1);
-setTimeout(() => {
- console.log(2);
- Promise.resolve().then(() => {
-  console.log(3)
- });
-});
-new Promise((resolve, reject) => {
- console.log(4)
- resolve()
-}).then(() => {
- console.log(5);
-})
-setTimeout(() => {
- console.log(6);
-})
-console.log(7);
-```
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247)
-```javascript
-setTimeout(() => {
-  console.log(1)
-}, 0);
-new Promise((res)=>{
-  console.log(2);res()
-}).then(()=>{
-  console.log(4)
-})
-console.log(3)
-```
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247)
-```javascript
-const a = () => {
-  new Promise((resolve) => {
-resolve(1)
-console.log('a')
-  }).then(() => {
-console.log('b')
-  })
-}
-a()
-console.log('c')
-```
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8247)
-```javascript
-new Promise((resolve, reject) => {
-  reject(1)
-}).catch(() => {
-  console.log(2);
-}).then(() => {
-  console.log(3)
-}, (v) => {
-  console.log(v)
-})
-console.log(4)
-```
-** 范例** [题目出处](https://wiki.jirengu.com/doku.php?id=%E5%89%8D%E7%AB%AF%E9%9D%A2%E7%BB%8F_%E5%AD%97%E8%8A%8249)
-```javascript
-async function async1() {
-  console.log('async1 start');
-  await async2();
-  console.log('async1 end');
-}
-async function async2() {
-  console.log('async2 start');
-  return new Promise((resolve, reject) => {
- resolve();
- console.log('async2 promise');
-  })
-}
-console.log('script start');
-setTimeout(function() {
-  console.log('setTimeout');
-}, 0);
-async1();
-new Promise(function(resolve) {
-  console.log('promise1');
-  resolve();
-}).then(function() {
-  console.log('promise2');
-}).then(function() {
-  console.log('promise3');
-});
-console.log('script end')
-```
-** 范例**
-```javascript
-function app() {
-      setTimeout(() => {
-        console.log("1-1");
-        Promise.resolve().then(() => {
-          console.log("2-1");
-        });
-      });
-      console.log("1-2");
-      Promise.resolve().then(() => {
-        console.log("1-3");
-        setTimeout(() => {
-          console.log("3-1");
-        });
-      });
-    }
-    app();
-```

饥人谷Wiki

站点工具

用户工具

页面工具