快速搞定前端Javascript面试课程笔记（四）—JS基础—异步

课程来源：coding.imooc.com/learn/list/…

题目

• 同步和异步的区别是什么？
• 手写用Promise加载一张图片
• 前端使用异步的场景有哪些？
• 场景题目

// setTimeout 笔试题 1~5分别是以什么顺序打印出来
console.log(1)
setTimeout(function () {
    console.log(2)
}, 1000)
console.log(3)
setTimeout(function () {
    console.log(4)
}, 0)
console.log(5)  // 1->3->5->4->(1s)2

知识点

• 单线程和异步
• 应用场景
• callback hell 和 Promise

一、同步和异步的区别

单线程和异步

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

异步和同步

// 异步 （callback 回调函数）
console.log(100)
setTimeout(function () {
    console.log(200)
}, 1000)
console.log(300)  // 100/300->200

// 同步
console.log(100)
alert(200)
console.log(300)

• 基于JS是单线程语言
• 异步不会阻塞代码执行
• 同步会阻塞代码执行

二、前端异步的应用场景（需要等待的情况）

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

// ajax
console.log('start')
$.get('./data1.json', function (data1) {
    console.log(data1)
})
console.log('end')

// 图片加载
console.log('start')
let img = document.createElement('img')
img.onload = function () {
    console.log('loaded')
}
img.src = '/xxx.png'
console.log('end')

// setTimeout 一次性定时器
console.log(100)
setTimeout(function () {
    console.log(200)
}, 1000)
console.log(300)

// setInterval 循环定时器
console.log(100)
setInterval(function () {
    console.log(200)
}, 1000)
console.log(300)

三、promise（解决 callback hell）

callback hell

// 获取第一份数据
$.get(url1, (data1) => {
    console.log(data1)
    
    // 获取第二份数据
    $.get(url2, (data2) => {
    	console.log(data2)
        
        // 获取第三份数据
        $.get(url3, (data3) => {
    		console.log(data3)
            
            // 还可能获取更多的数据
        })
    })
})

Promise

function getData(url) {
    return new Promise((resolve, reject) => {
        $.ajax({
            url,
            success(data) {
                resolve(data)
            },
            error(err) {
                reject(err)
            }
        })
    })
}

const url1 = '/data1.json'
const url2 = '/data2.json'
const url3 = '/data3.json'
getData(url1).then(data1 => {
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    console.log(data2)
    return getData(url3)
}).then(data3 => {
    console.log(data3)
}).catch(err => console.error(err))

四、问题补充解答

手写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 = 'xxx.png'

loadImg(url).then(img => {
    console.log(img.width)
    return img
}).then(img => {
    console.log(img.height)
}).catch(ex => console.error(ex))


const url1 = 'xxx.png'
const url2 = 'xxx.png'

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))

————————————————————————————————————————