異步！異步！異步！

ThinkSNS 發(fā)布于2019-08-22 15:48 / 909人閱讀

摘要：同步和異步先說個(gè)傻子的故事有個(gè)傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。

1.同步和異步 1.1先說個(gè)傻子的故事

有個(gè)傻子，第一次用某雷下載大片，就是大人看的片，咳咳咳。。。
某雷告訴他，下載時(shí)間要倆小時(shí)，傻子心想，要倆小時(shí)吶，我第一次用某雷，我得盯著它下載，啥也不能干
于是傻子就干瞪著電腦，等著片下完，這倆小時(shí)，傻子啥也沒干
后來，傻子變聰明了，他想，反正某雷在幫他下載，這倆小時(shí)，他完全可以干干其他事情啊，比如學(xué)學(xué)計(jì)算機(jī)知識(shí)呀等等
等某雷下完了，再回來看唄
于是傻子潛心研究計(jì)算機(jī)知識(shí)，直到有一天他看到了有關(guān)于異步的知識(shí)，突然間明白了

原來他等待某雷下完，啥也不干的過程就叫做同步
后來他在某雷下載過程中自學(xué)計(jì)算機(jī)知識(shí)的過程就叫做異步

1.2 同步與異步的概念

同步
英文：Synchronization
wiki解釋：指在一個(gè)系統(tǒng)中所發(fā)生的事件（event），之間進(jìn)行協(xié)調(diào)，在時(shí)間上出現(xiàn)一致性與統(tǒng)一化的現(xiàn)象。
是不是很難理解？
其實(shí)就是代碼要等待到結(jié)果，才能繼續(xù)進(jìn)行【你可以理解為同步阻塞了代碼繼續(xù)執(zhí)行】

異步
英文：Asynchronization【在同步前面加了個(gè)A】
wiki解釋就不貼了，有興趣的朋友可以自己搜索看一下，反正我看的也挺頭疼
其實(shí)就是代碼不用等待到結(jié)果，就能繼續(xù)進(jìn)行【你可以理解為異步不阻塞代碼繼續(xù)執(zhí)行】
啥意思咧，讓我們看個(gè)大家都見過的例子

function wait() {
    setTimeout(() => console.log(this), 3000)
}

wait() // 三秒鐘后，得到結(jié)果
console.log(1) // 如果沒有異步的話，我得等三秒鐘才能執(zhí)行，所以，感謝異步

2.常見的異步問題 2.1圖片加載問題

// 前提條件：用戶的瀏覽器第一次請(qǐng)求這個(gè)圖片，也就是用戶的瀏覽器未緩存
document.getElementsByTagNames("img")[0].width // 寬度為 0

為什么width會(huì)為0呢？
因?yàn)?b>js運(yùn)行的時(shí)候，img并沒有下載完畢

解決方案

let imgNode = document.getElementsByTagName("img")[0]
imgNode.addEventListener("onload",function () {
    console.log(this.width)
})

2.2 面試題常考的異步問題

// 假設(shè)有5個(gè)li
let liList = document.querySelectorAll("li")
for (var i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        console.log(i) // 5 5 5 5 5
    }
}

為什么呢？
因?yàn)閛nclick事件是異步處理的，用戶觸發(fā)onclick事件時(shí)，循環(huán)早已結(jié)束，此時(shí)的i是5

解決方案一【立即執(zhí)行函數(shù)創(chuàng)建獨(dú)立作用域】

// 假設(shè)有5個(gè)li
let liList = document.querySelectorAll("li")
for (var i = 0; i < liList.length; i++) {
    !(function (j) {
        liList[j].onclick = function () {
            console.log(j) // 5 5 5 5 5
        }
    })(i)
}

解決方案二【使用let】

// 假設(shè)有5個(gè)li
let liList = document.querySelectorAll("li")
for (let i = 0; i < liList.length; i++) {
    liList[i].onclick = function () {
        console.log(i) // 5 5 5 5 5
    }
}

3.拿到異步結(jié)果的方式 —— 回調(diào)

請(qǐng)見回調(diào)是個(gè)什么鬼？

4.Promise

請(qǐng)見淺析Promise

5.async / await 語句 5.1 粗略了解await

mdn解釋：await 操作符用于等待一個(gè)Promise 對(duì)象。它只能在異步函數(shù) async function 中使用

但是await究竟做了什么事情呢？

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 10000)
    })
}
let result = await setPromise()

如果你這個(gè)時(shí)候在控制臺(tái)不斷輸入result。
控制臺(tái)會(huì)不斷地報(bào)錯(cuò)
控制臺(tái)報(bào)錯(cuò)：result is not defined
直到10s后，才能成功

為啥報(bào)錯(cuò)呢？命名let result了呀
因?yàn)閍wait在等待setPromise()完成后，才會(huì)執(zhí)行let result =
也就是說await 讓前面的 let 和 = 異步了

可能你會(huì)問：
這樣一搞，result也異步了，那我豈不是還要回調(diào)？

那么再來看下一個(gè)問題

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 10000)
    })
}
let result = await setPromise()
console.log(1) // 請(qǐng)問這句代碼是在10秒后被執(zhí)行，還是立即執(zhí)行？

答案:10s后執(zhí)行

5.2 所以await究竟能干嘛

await改變了整個(gè)代碼的執(zhí)行順序.
它可以讓你用同步寫代碼的方式去寫異步代碼

5.3 那么async又是干啥的呢？

如果你在一個(gè)函數(shù)內(nèi)使用了await，那么你最好在一個(gè)函數(shù)的前面加上async

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            resolve("success")
        }, 2000)
    })
}
function test() {
    return result = await setPromise()
}
console.log(3)

控制臺(tái)直接會(huì)報(bào)錯(cuò)：Uncaught SyntaxError: await is only valid in async function
啥意思咧 —— await只允許在 async function 內(nèi)使用
也就是說，要在函數(shù)聲明的時(shí)候就加上 async

async function test() {
    let result = await setPromise()
}

5.4 Promise異步操作失敗的情況

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            reject.call(undefined)
        }, 2000)
    })
}
let result = await setPromise()
console.log(result)
// 瀏覽器又報(bào)錯(cuò)了 Uncaught (in promise) undefined

因?yàn)闆]有then/catch來處理Promise異步操作失敗的結(jié)果
所以我們這次使用try...catch...語句

let setPromise = function () {
    return new Promise((resolve, reject) => {
        // 你的異步代碼
        setTimeout(() => {
            reject.call(undefined)
        }, 2000)
    })
}
try {
    let result = await setPromise()
    console.log(result)
} catch(rejected) {
    // 觸發(fā)這一句
    console.log("error")
}