【进击的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年资深前端主管一枚，只分享技术干货，项目实战经验，面试指导
关注博主不迷路~