异步进阶【面试回顾】

头像
trueYann
    阅读 7 分钟

    event loop(事件循环)

    • 概念

      • js是单线程运行的
      • 异步要基于回调来实现
      • event loop就是异步回调的实现原理
      • DOM事件也使用回调,基于event loop

    • 过程

      • 同步代码,一行一行放在Call Stack执行
      • 遇到异步会先记录下,等待时机(定时,网络请求等)
      • 时机到了就移动到Callback Queue
      • 如Call Stack为空(即同步代码执行完) Event Loop开始工作
      • 轮询查找Callback Queue, 如有则移动到Call Stack执行
      • 然后继续轮询查找

    image.png

    Promise

    • 三种状态
    • 状态和 then catch
    • 常用 API

    先回顾一下 Promise 的基本使用

    // 加载图片
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))

    三种状态

    三种状态 pending resolved rejected

    （画图表示转换关系，以及转换不可逆）

    // 刚定义时，状态默认为 pending
const p1 = new Promise((resolve, reject) => {

})

// 执行 resolve() 后，状态变成 resolved
const p2 = new Promise((resolve, reject) => {
    setTimeout(() => {
        resolve()
    })
})

// 执行 reject() 后，状态变成 rejected
const p3 = new Promise((resolve, reject) => {
    setTimeout(() => {
        reject()
    })
})

    状态和 then catch

    状态变化会触发 then catch —— 这些比较好理解，就不再代码演示了

    • pending 不会触发任何 then catch 回调
    • 状态变为 resolved 会触发后续的 then 回调
    • 状态变为 rejected 会触发后续的 catch 回调
    // 直接返回一个 resolved 状态
Promise.resolve(100)
// 直接返回一个 rejected 状态
Promise.reject('some error')
    // then() 一般正常返回 resolved 状态的 promise
Promise.resolve().then(() => {
    return 100
})

// then() 里抛出错误，会返回 rejected 状态的 promise
Promise.resolve().then(() => {
    throw new Error('err')
})

// catch() 不抛出错误，会返回 resolved 状态的 promise
Promise.reject().catch(() => {
    console.error('catch some error')
})

// catch() 抛出错误，会返回 rejected 状态的 promise
Promise.reject().catch(() => {
    console.error('catch some error')
    throw new Error('err')
})

    看几个面试题

    // 第一题
Promise.resolve().then(() => {
    console.log(1)
}).catch(() => {
    console.log(2)
}).then(() => {
    console.log(3)
}) //1 3

// 第二题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).then(() => {
    console.log(3)
}) //1 2 3

// 第三题
Promise.resolve().then(() => { // 返回 rejected 状态的 promise
    console.log(1)
    throw new Error('erro1')
}).catch(() => { // 返回 resolved 状态的 promise
    console.log(2)
}).catch(() => {
    console.log(3)
}) //1 2

    async/await

    • Promise的then,catch链式调用,也是基于回调函数
    • 用同步的方式编写异步,彻底消灭回调函数
    function loadImg(src) {
    const promise = new Promise((resolve, reject) => {
        const img = document.createElement('img')
        img.onload = () => {
            resolve(img)
        }
        img.onerror = () => {
            reject(new Error(`图片加载失败 ${src}`))
        }
        img.src = src
    })
    return promise
}

async function loadImg1() {
    const src1 = 'http://www.imooc.com/static/img/index/logo_new.png'
    const img1 = await loadImg(src1)
    return img1
}

async function loadImg2() {
    const src2 = 'https://avatars3.githubusercontent.com/u/9583120'
    const img2 = await loadImg(src2)
    return img2
}

(async function () {
    // 注意：await 必须放在 async 函数中，否则会报错
    try {
        // 加载第一张图片
        const img1 = await loadImg1()
        console.log(img1)
        // 加载第二张图片
        const img2 = await loadImg2()
        console.log(img2)
    } catch (ex) {
        console.error(ex)
    }
})()

    和 Promise 的关系

    • async 函数返回结果都是 Promise 对象（如果函数内没返回 Promise ，则自动封装一下）
    async function fn2() {
    return new Promise(() => {})
}
console.log( fn2() )

async function fn1() {
    return 100
}
console.log( fn1() ) // 相当于 Promise.resolve(100)
    • await 后面跟 Promise 对象：会阻断后续代码，等待状态变为 resolved ，才获取结果并继续执行
    • await 后续跟非 Promise 对象：会直接返回
    (async function () {
    const p1 = new Promise(() => {})
    await p1
    console.log('p1') // 不会执行
})()

(async function () {
    const p2 = Promise.resolve(100)
    const res = await p2
    console.log(res) // 100
})()

(async function () {
    const res = await 100
    console.log(res) // 100
})()

(async function () {
    const p3 = Promise.reject('some err')
    const res = await p3
    console.log(res) // 不会执行
})()
    • try...catch 捕获 rejected 状态
    (async function () {
    const p4 = Promise.reject('some err')
    try {
        const res = await p4
        console.log(res)
    } catch (ex) {
        console.error(ex)
    }
})()

    总结来看：

    • async 封装 Promise
    • await 处理 Promise 成功
    • try...catch 处理 Promise 失败

    异步本质

    await 是同步写法，但本质还是异步调用。

    async function async1 () {
  console.log('async1 start')
  await async2()
  console.log('async1 end') // 关键在这一步，它相当于放在 callback 中，最后执行
}

async function async2 () {
  console.log('async2')
}

console.log('script start')
async1()
console.log('script end')

    即，只要遇到了 await ，后面的代码都相当于放在 callback 里。

    for...of

    // 定时算乘法
function multi(num) {
    return new Promise((resolve) => {
        setTimeout(() => {
            resolve(num * num)
        }, 1000)
    })
}

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

// 使用 for...of ，可以让计算挨个串行执行
async function test2 () {
    const nums = [1, 2, 3];
    for (let x of nums) {
        // 在 for...of 循环体的内部，遇到 await 会挨个串行计算
        const res = await multi(x)
        console.log(res)
    }
}
test2()

    宏任务和微任务

    • 宏任务：setTimeout setInterval DOM 事件
    • 微任务：Promise（对于前端来说）
    • 微任务比宏任务执行的更早
    console.log(100)
setTimeout(() => {
    console.log(200)
})
Promise.resolve().then(() => {
    console.log(300)
})
console.log(400)
// 100 400 300 200

    event loop 和 DOM 渲染

    再次回顾 event loop 的过程

    • 每一次 call stack 结束，都会触发 DOM 渲染（不一定非得渲染，就是给一次 DOM 渲染的机会！！！）
    • 然后再进行 event loop
    const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
            .append($p1)
            .append($p2)
            .append($p3)

console.log('length',  $('#container').children().length )
alert('本次 call stack 结束，DOM 结构已更新，但尚未触发渲染')
// （alert 会阻断 js 执行，也会阻断 DOM 渲染，便于查看效果）
// 到此，即本次 call stack 结束后（同步任务都执行完了），浏览器会自动触发渲染，不用代码干预

// 另外，按照 event loop 触发 DOM 渲染时机，setTimeout 时 alert ，就能看到 DOM 渲染后的结果了
setTimeout(function () {
    alert('setTimeout 是在下一次 Call Stack ，就能看到 DOM 渲染出来的结果了')
})

    宏任务和微任务的区别

    • 宏任务：DOM 渲染后再触发
    • 微任务：DOM 渲染前会触发
    // 修改 DOM
const $p1 = $('<p>一段文字</p>')
const $p2 = $('<p>一段文字</p>')
const $p3 = $('<p>一段文字</p>')
$('#container')
    .append($p1)
    .append($p2)
    .append($p3)

// // 微任务：渲染之前执行（DOM 结构已更新）
// Promise.resolve().then(() => {
//     const length = $('#container').children().length
//     alert(`micro task ${length}`)
// })

// 宏任务：渲染之后执行（DOM 结构已更新）
setTimeout(() => {
    const length = $('#container').children().length
    alert(`macro task ${length}`)
})

    再深入思考一下：为何两者会有以上区别，一个在渲染前，一个在渲染后？

    • 微任务：ES 语法标准之内，JS 引擎来统一处理。即，不用浏览器有任何关于，即可一次性处理完，更快更及时。
    • 宏任务：ES 语法没有，JS 引擎不处理，浏览器（或 nodejs）干预处理。
    前端异步面试问题
    trueYann
    4 声望0 粉丝
    « 上一篇
    异步基础【面试回顾】
    下一篇 »
    前端http【面试回顾】

    引用和评论

    推荐阅读
    头像
    前端http【面试回顾】

    trueYann阅读 995

    头像
    CSS团队协作规范

    寒青赞 38阅读 6.5k

    头像
    100个React最佳实践小技巧

    夕水赞 22阅读 6k评论 4

    头像
    前端开发工具

    寒青赞 19阅读 5.1k

    头像
    开发插件集合

    寒青赞 14阅读 3.4k

    头像
    CSS 现在终于支持高度 auto 过渡动画了

    XboxYan赞 13阅读 3k

    头像
    Javascript(turfjs)等值线图绘制

    舍瓦温赞 15阅读 22.4k评论 18

    0 条评论
    得票最新