【进击的JavaScript｜高薪面试必看】JS基础-异步

进击系列文章是博主精心整理的面试热点问题和难点问题，吸收了大量的技术博客与面试文章，总结多年的面试经历，带你快速并高效地审视前端面试知识。直击技术痛点，主动出击，精密打击，这才是进击的意义！这才是面试拿到高薪的秘诀！

• 上期回顾 JS基础-作用域和闭包
• 本系列订阅 面试指导专栏

---

关键字

• 异步
• 同步
• Promise

单线程和异步

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

// 异步
console.log(100)
setTimeout(function() {
    console.log(200)
}, 1000)
console.log(300)

// 同步
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')

promise的基本使用

• 主要是用来解决回调地狱的问题，出现了promise
  把多层嵌套改成了管道串联的形式，提高代码可读性
• 现在主流的方法是使用async 和 await 来进行解决异步问题（async 和 await 本质上是一个语法糖 使函数的返回值包含在promise中返回）

callback hell（回调地狱）

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加载一张图片

const url = ""; //img url

function loadImg (src) {
    return new Promise(
        // resolve、reject都是函数
        (resolve, reject) => {
            const img = document.createElement('img')
            img.onload = () => {
                resolve(img)
            }
            img.onerror = () => {
                reject(new Error('图片加载失败'))
            }
            img.src = src
        }
    )
}

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

Promise的详细使用和异步函数请看下一期【异步进阶】

六年代码两茫茫，不思量，自难忘
6年资深前端主管一枚，只分享技术干货，项目实战经验，面试指导
关注博主不迷路~