javascript你必须要知道的——异步

江拥羡橙

修改于 2023-06-09 03:05:33

31300

代码可运行

文章被收录于专栏：前端二次元前端二次元

运行总次数：0

代码可运行

关键字

异步
同步
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中返回）

callbackhell（回调地狱）

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)