【前端面试基础】(三)异步(含9个场景题)

同步和异步的区别是什么?

  • 异步基于 JS 是单线程语言,只能同时做一件事
  • JS 和 DOM 渲染共用同一个线程,因为 JS 可以修改 DOM 结构
  • 异步不会阻塞代码执行
  • 同步会阻塞代码执行

手写Promise加载一张图片

javascript 复制代码
function loadImg(src) {
    return new Promise((resolve, reject) => {
        const img = document.createElement('img')
        // 图片加载成功的回调
        img.onload = () => {
            resolve(img);
        }
        // 图片加载失败的回调
        img.onerror = () => {
            const err = new Error(`图片加载失败 ${src}`);
            reject(err);
        }
        img.src = src;
    })
}

Promise演示

javascript 复制代码
function loadImg(src) {
    const p = new Promise(
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                const err = new Error(`图片加载失败 ${src}`)
                reject(err)
            }
            img.src = src
        }
    )
    return p
}

// const url = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
// loadImg(url).then(img => {
//     console.log(img.width)
//     return img
// }).then(img => {
//     console.log(img.height)
// }).catch(ex => console.error(ex))

const url1 = 'https://img.mukewang.com/5a9fc8070001a82402060220-140-140.jpg'
const url2 = 'https://img3.mukewang.com/5a9fc8070001a82402060220-100-100.jpg'

loadImg(url1).then(img1 => {
    console.log(img1.width)
    return img1 // 普通对象
}).then(img1 => {
    console.log(img1.height)
    return loadImg(url2) // promise 实例
}).then(img2 => {
    console.log(img2.width)
    return img2
}).then(img2 => {
    console.log(img2.height)
}).catch(ex => console.error(ex))

异步应用场景

  • 网络请求,如 ajax 图片加载
  • 定时任务,如 setTimeout

请描述event loop(事件循环/事件轮询)的机制,可画图

我们知道:

  • JS是单线程运行的
  • 异步要基于回调来实现
  • event loop就是异步回调的实现原理

Event loop的执行过程

  • 同步代码,一行一行放在 Call Stack 执行,执行完之后,会将其清空
  • 遇到异步,会先"记录下",等待时机(定时、网络请求等)
  • 时机到了,就移到 Callback Queue
  • 如果 Call Stack 为空(即同步代码执行完)
  • 执行当前微任务队列中的微任务(宏任务和微任务区别后面有讲到)
  • 尝试DOM渲染(如果DOM结构改变)
  • Event Loop开始工作
  • 轮询查找 Callback Queue,如果有则移动到 Call Stack 执行
  • 然后继续轮询查找(永动机一样)

什么是宏任务和微任务,两者有什么区别?

Promise有哪三种状态?如何变化?

三种状态

  • pending 过程中
  • resolved(fulfilled) 成功
  • rejected 失败
  • 状态变化不可逆,一旦改变一次,则无法再发生改变。

状态的表现

  • pending状态,不会触发then和catch
  • resolved状态,会触发后续的then回调函数
  • rejected 状态,会触发后续的catch回调函数

then和catch改变状态

then正常返回resolved,里面有报错则返回rejected

javascript 复制代码
const p1 = Promise.resolve().then(() => {
    return 100
})
console.log('p1', p1); //resolved 会触发后续 then 回调

p1.then(() => {
    console.log('123');
})
const p2 = Promise.resolve().then(() => {
    throw new Error('then error')
})

console.log('p2', p2); //rejected 会触发后续 catch 回调

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

catch 正常返回resolved,里面有报错则返回rejected

javascript 复制代码
const p3 = Promise.reject('my error').catch(err => {
    console.log(err);
})
console.log('p3', p3); // resolved 注意!!!! 触发 then回调
p3.then(() => {
    console.log(100);
})


const p4 = Promise.reject('my error').catch(err => {
    throw new Error('catch error')
})

console.log('p4', p4); //rejected 触发catch回调

p4.then(() => {
    console.log(200);
}).catch(() => {
    console.log('some err');
})

如何改变?

  • 执行resolve()由pedding改变为resolved

  • 执行reject()由pedding改变为rejected

  • 遇到错误抛出由pedding改变为rejected

  • Promise.then()方法中

    • return非Promise对象,返回成功的Promise成功的值为return的值(pendding => resolved
    • return一个Promise对象,则返回的Promise状态和return的Promise一样,值也一样。
    • 抛出错误,返回失败的Promise,值为抛出错误内容(pending => rejected
  • Promise.catch()方法实际上是语法糖,相当于Promise.then(空, err=>{}),因此catch返回的Promise状态和then()一样

  • Promise.all()方法中

    • 如果传入的Promise数组状态都为成功,则返回成功的Promise,值为所有Promise成功值组成的数组。
    • 如果传入的Promise数组只要有一个失败,则返回失败的Promise,值为第一个状态变为失败的Promise的值。
  • Promise.race()方法中,取决于传入Promise数组中第一个改变状态的Promise,

    • 这个Promise如果成功,则race()返回成功的Promise。
    • 如果失败,则race()返回失败的Promise
    • 成功或失败的值和这个改变状态的Promise相同。

async/await和Promise 的关系

  • 执行async函数,返回的是Promise对象
  • await 相当于Promise的then
  • try ... catch可捕获异常,代替了Promise的catch

async/await

  • 由异步回调的 callback hell(回调地狱) 引出了Promise

  • 但Promise的then和catch的链式调用,依然是基于回调函数的

  • async/await 是同步语法,彻底消灭回调函数

  • async函数返回一个Promise对象,返回的规则同then()方法:

    • return 非Promise值,返回成功的值,成功的值为return 的值
    • return Promise值,返回的Promise状态由return的Promise决定,成功或失败的值相同
    • 抛出错误,返回失败的Promise,值为抛出的错误
javascript 复制代码
async function fn1() {
    // return 100    //相当于 return Promise.resolve(100)
    return Promise.resolve(200)
}

const res1 = await fn1() //执行async 函数,返回的是一个Promise对象
// console.log('res1', res1); //打印结果:res1  --> Promise {<fulfilled>: 100}
res1.then((data) => {
    console.log('data', data);  //打印结果:  data 200
})
  • await返回值的情况根据其后面语句执行结果决定:

    • 后面的语句执行结果如果是成功的Promise,await语句返回其成功的值(类似Promise.then()方法)
    • 后面的语句执行结果如果是失败的Promise,则await语句抛出错误,可以使用try...catch...捕获
    • 后面的语句执行结果如果是非Promise值,则await语句直接返回该值
  • async函数调用时,是同步执行

  • await 语句以下的所有代码,都可以看作是一个callback回调里的内容,即异步,微任务

  • async/await 只是一个语法糖,异步的本质还是回调函数

  • async/await是消灭异步回调的终极武器

  • JS还是单线程,还得是有异步,还得基于event loop

javascript 复制代码
//匿名函数
!(async function () {
    const p1 = Promise.resolve(300)
    const data = await p1 //await 相当于 Promise then
    console.log('data1', data);  //打印结果:  data 300
})()


!(async function () {
    const data = await 400 //相当于 await Promise.resolve(400)
    console.log('data2', data);  //打印结果:  data 400
})()

!(async function () {
    const p2 = Promise.reject('err')  //rejected状态
    try {
        const data = await p2 //await 相当于 Promise then
        console.log('data3', data);  //打印结果:  data 300
    } catch (error) {
        console.log(error);  //try ...catch 相当于 Promise catch
    }
})()



!(async function () {
    const p4 = Promise.reject('err1')  //rejected状态
    const res = await p4  //await 相当于 Promise then,由于p4是rejected状态,所以不会执行这句代码,也就没有打印结果
    console.log(res);
})()

场景题

做完之后,可以右滑,查看注释的答案。

1. setTimeout

javascript 复制代码
console.log(1);
setTimeout(() => {
    console.log(2);
}, 1000);
console.log(3);
setTimeout(() => {
    console.log(4);
}, 0);
console.log(5);
                                                        // 1 3 5 4 2

2. Promise (1)

javascript 复制代码
Promise.resolve().then(() => {
    console.log(1);
}).catch(() => {
    console.log(2);
}).then(() => {
    console.log(3);
})
                                                        // 1 3

3. Promise (2)

javascript 复制代码
Promise.resolve().then(() => { // then正常返回resolved,里面有报错则返回rejected
    console.log(1);
    throw new Error('erro1')
}).catch(() => {  // catch 正常返回resolved,里面有报错则返回rejected
    console.log(2);
}).then(() => {
    console.log(3);
})
                                                        // 1 2 3

4. Promise (3)

javascript 复制代码
Promise.resolve().then(() => {
    console.log(1);
    throw new Error('erro1')
}).catch(() => {
    console.log(2);
}).catch(() => {
    console.log(3);
})
                                                        // 1 2 

5. 宏任务和微任务

javascript 复制代码
console.log(100)
setTimeout(() => {
    console.log(200);
});
Promise.resolve().then(() => {
    console.log(300);
})
console.log(400);
                                                            // 100 400 300 200

6. async/await (1)

javascript 复制代码
(async function() {
    console.log('start');
​
    const a = await 100;
    console.log('a:', a);
​
    const b = await Promise.resolve(200);
    console.log('b:', b);
​
    const c = await Promise.reject(300);
    console.log('c', c);
    console.log('end');
})()
                                                                        // start
                                                                        // a: 100
                                                                        // b: 200
                                                                        // 报错

7. async/await (2)

javascript 复制代码
async function async1 () {
    console.log('async1 start')
    await async2()  //undefined
    //await 的后面,都可以看做是callback 里的内容,即异步
    //类似。event loop,setTimeout(cb1)
    //setTimeout(function(){   console.log('async1 end')})
    //Promise.resolve().then(()=>{ console.log('async1 end'})  //微任务/宏任务  
    console.log('async1 end') 
}
​
async function async2 () {
    console.log('async2')
}
​
console.log('script start')
async1()
console.log('script end')
//同步代码已经执行完,开始执行event loop
                                                                    // script start
                                                                    // async1 start
                                                                    // async2
                                                                    // script end
                                                                    // async1 end

8.async/await (3)

javascript 复制代码
async function async1() {
    console.log('async1 start')  
    await async2()
​//下面三行是异步回调callback 的内容
    console.log('async1 end') 
    await async3()
    ​//下面一行是异步回调callback 的内容
    console.log('async1 end 2') 
}
​
async function async2() {
    console.log('async2')  
}
​
async function async3() {
    console.log('async3')   
}
​
​
console.log('script start')  
async1()
console.log('script end')  
//同步代码已经执行完,开始执行event loop
                                                                    // script start
                                                                    // async1 start
                                                                    // async2
                                                                    // script end
                                                                    // async1 end
                                                                    // async3
                                                                    // async1 end 2

9. 综合题

javascript 复制代码
async function async1 () {
    console.log('async1 start');
    await async2();
    //await 后面的都做完回调内容----微任务
    console.log('async1 end');
}
​
async function async2() {
    console.log('async2');
}
​
console.log('script start');
​
setTimeout(() => {//宏任务
    console.log('setTimeout');
}, 0);
​
async1();
​
//初始化Promise时,传入的函数会立刻被执行
new Promise (function (resolve) {
    console.log('promise1');
    resolve()
}).then(function() {//微任务
    console.log('promise2');
})
​
console.log('script end');
//同步代码执行完毕(相当于event loop--call stack被清空)
//执行微任务
//尝试触发DOM渲染
//触发event loop,执行宏任务
                                                                    // script start
                                                                    // async1 start
                                                                    // async2
                                                                    // promise1
                                                                    // script end
                                                                    // async1 end
                                                                    // promise2
                                                                    // setTimeout

for ... of

  • for... in(以及forEach for)是常规的同步遍历
  • for ... of 常用于异步的遍历
javascript 复制代码
function muti(num) {
    return new Promise(resolve => {
        setTimeout(() => {
            resolve(num * num)
        }, 1000)
    })
}


const nums = [1, 2, 3]

// 使用 forEach ,是 1s 之后打印出所有结果,即 3 个值是一起被计算出来的
// nums.forEach(async (i) => {
//     const res = await muti(i)
//     console.log(res);
// })

// 使用 for...of ,可以让计算挨个串行执行
!(async function () {
    for (let i of nums) {
        const res = await muti(i)
        console.log(res);
    }
})()

5. 什么是宏任务,什么是微任务?

异步任务分为两种,一种宏任务,一种微任务,分别位于两个任务队列,微任务的执行实际比宏任务要早。至于为什么,先了解以下event loop 和 DOM 渲染的关系。

宏任务有哪些?微任务有哪些?

微任务的执行实际比宏任务要早。

宏任务:

  • setTimeout、
  • setInterval、
  • Ajax、
  • DOM事件、
  • setImmediate(Node.js 环境)、
  • I/O 操作、
  • UI 渲染

微任务:

  • Promise 回调函数(.then().catch().finally()),
  • async/await、
  • process.nextTick(Node.js 环境)
javascript 复制代码
console.log(100)
//宏任务
setTimeout(() => {
    console.log(200)
})
//微任务
Promise.resolve().then(() => {
    console.log(300)
})
console.log(400)
// 100 400 300 200

event loop 和 DOM 渲染 的关系

  • 每次 Call Stack 清空(即每次轮询结束),即同步任务执行完成
  • 都是 DOM 重新渲染的机会,都会先尝试DOM渲染,如果DOM结构有改变则重新渲染
  • 然后再去触发下一次 Event Loop

宏任务和微任务的区别,执行时机与DOM渲染的关系

  • 宏任务:DOM 渲染后触发,如 setTimeout
  • 微任务:DOM 渲染前触发,如 Promise
  • 根本区别:为任务是 ES6 语法规定的,宏任务是由浏览器规定的

可以通过alert阻断代码执行,来验证微任务、宏任务与DOM渲染的关系:

xml 复制代码
<!DOCTYPE html>
<html lang="en">
  <head>
    <meta charset="UTF-8" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>DOM渲染示例</title>
  </head>
  <body>
    <div id="container"></div>

    <script>
      // 创建三个<p>元素并将它们添加到#container中
      const p1 = document.createElement("p");
      p1.textContent = "一段文字";

      const p2 = document.createElement("p");
      p2.textContent = "一段文字";

      const p3 = document.createElement("p");
      p3.textContent = "一段文字";

      const container = document.getElementById("container");
      container.appendChild(p1);
      container.appendChild(p2);
      container.appendChild(p3);

      console.log("length", container.children.length);

      alert("本次 call stack 结束,DOM 结构已更新,但尚未触发渲染");

      // 到此,即本次 call stack 结束后(同步任务都执行完了),浏览器会自动触发渲染,不用代码干预

      // 另外,按照 event loop 触发 DOM 渲染时机,setTimeout 时 alert ,就能看到 DOM 渲染后的结果了
      setTimeout(function () {
        alert(
          "setTimeout 是在下一次 Call Stack ,就能看到 DOM 渲染出来的结果了"
        );
      });
    </script>
  </body>
</html>
xml 复制代码
<div id="container"></div>
<script>
    const div = document.getElementById('container');
    div.innerHTML = `<p>一段文字</p>
<p>一段文字</p>
<p>一段文字</p>`
​
    Promise.resolve().then(() => {
        console.log(111);
        alert('执行微任务,此时可以看到页面没有发生渲染');
    })   
​
    setTimeout(() => {
        console.log(222);
        alert('执行宏任务,此时可以看到页面DOM结构已经重新渲染');
    }, 0);
</script>

从event loop解释,为何微任务执行更早

执行Promise时,会等待时机进入微任务队列,但不会经过Web APIs,因为Promise时ES6规范,不是W3C规范

  • 微任务是ES66语法规定的
  • 宏任务是浏览器规定的

综上

执行顺序:

  • 1、Call Stack清空
  • 执行当前的微任务
  • 尝试DOM渲染
  • 触发Event Loop
相关推荐
逐·風3 小时前
unity关于自定义渲染、内存管理、性能调优、复杂物理模拟、并行计算以及插件开发
前端·unity·c#
Devil枫3 小时前
Vue 3 单元测试与E2E测试
前端·vue.js·单元测试
尚梦4 小时前
uni-app 封装刘海状态栏(适用小程序, h5, 头条小程序)
前端·小程序·uni-app
GIS程序媛—椰子4 小时前
【Vue 全家桶】6、vue-router 路由(更新中)
前端·vue.js
前端青山5 小时前
Node.js-增强 API 安全性和性能优化
开发语言·前端·javascript·性能优化·前端框架·node.js
毕业设计制作和分享5 小时前
ssm《数据库系统原理》课程平台的设计与实现+vue
前端·数据库·vue.js·oracle·mybatis
从兄6 小时前
vue 使用docx-preview 预览替换文档内的特定变量
javascript·vue.js·ecmascript
清灵xmf7 小时前
在 Vue 中实现与优化轮询技术
前端·javascript·vue·轮询
大佩梨7 小时前
VUE+Vite之环境文件配置及使用环境变量
前端
GDAL7 小时前
npm入门教程1:npm简介
前端·npm·node.js