【九月打卡】第12天 前端工程师2022版 就业必备基础技术面试分析

课程名称： JS基础-异步

课程章节：Javascript面试课

课程讲师： 双越

课程内容：

    学习课程之前，我们先来看一下这节会遇到哪些面试题？

        1、异步和同步的区别是什么？

        2、手写 Promise 加载一张图片。

        3、前端使用异步的场景有哪些？

        4、setTimeout 笔试题。

接下来我们一起看看知识点有哪些？


单线程
◆JS是单线程语言，只能同时做一件事儿
◆浏览器和nodejs已支持JS启动进程，如Web Worker
◆JS和DOM渲染共用同一个线程，因为JS可修改DOM结构
◆遇到等待（网络请求，定时任务）不能卡住
◆需要异步
◆回调callback函数形式
异步和同步
◆基于JS是单线程语言
◆异步不会阻塞代码执行
◆同步会阻塞代码执行


◆网络请求，如ajax图片加载
◆定时任务，如setTimeout

定时器

最后，复习一下前面提到的面试题

1.异步和同步的区别是什么？

①异步基于JS是单线程语言

②异步不会阻塞代码执行

③同步会阻塞代码执行

2.手写 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://img4.sycdn.imooc.com/623845880001403311101110-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://img4.sycdn.imooc.com/623845880001403311101110-140-140.jpg'
const url2 = 'https://img1.sycdn.imooc.com/54584e2c00010a2c02200220-160-160.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))

3.前端使用异步的场景有哪些？

①网络请求，如ajax图片加载

②定时任务，如setTimeout

4.setTimeout笔试题

打印的依次是：1 3 5 4 2