异步基础

异步和单线程

题目

同步和异步的区别是什么
手写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))

加载两张

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

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

console.log(1)
setTimeout(function () {
    console.log(2)    
},1000)
console.log(3)
setTimeout(function () {
    console.log(4)
},0)
console.log(5)

1,2,3,4,5的打印顺序

知识点

单线程和异步

JS是单线程语言，只能同时做一件事
浏览器和nodejs已支持JS启动进程，如 Web Worker
JS 和DOM渲染共用同一个线程，因为JS可修改DOM结构

异步
遇到等待（网络请求，定时任务）不能卡住
需要异步
回调callback函数形式

异步和同步的区别：
基于JS是单线程语言
异步不会阻塞代码执行
同步会阻塞代码执行

console.log(100)
alert(200)
console.log(300)

200不确认，300不会打印到控制台

应用场景

网络请求，如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)

callback hell 和 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(url).then(data => {
    console.log(data1)
    return getData(url2)
}).then(data2 => {
    console.log(data2)
    return getData(url3)
}).then(data3 => {
    console.log(data3)
}).catch(err => console.error(err))