JS基礎知識四（異步）

• 提問
• 單線程
• 應用場景
• callback hell和promise

提問

• 同步和異步的區別是什么
• 手寫用Promise加載一張圖片
• 前端使用的異步的場景有哪些

單線程

• JS是單線程語言，只能同時做一件事
• 瀏覽器和NodeJs已支持JS啟動進程，如Web Worker
• JS和DOM渲染共用同一個線程，因為JS可修改DOM結構
• 遇到等待（網絡請求，定時任務）不能卡住
• 同步會阻塞代碼的執行，所以需要異步，解決單線程等待的問題，不會阻塞后面代碼的執行
• 回調callback函數形式，setTimeout回調就是異步

// 異步 （callback 回調函數）console.log(1)setTimeout(function(){console.log(2)}, 1000)console.log(3)setTimeout(function(){console.log(4)}, 0)console.log(5)//1，3，5，4，2 // 同步，alert點擊確定之后才會輸出300 console.log(100) alert(200) console.log(300)

應用場景

• 網絡請求，如ajax、圖片加載img.onload
• 定時任務，如setTimeout、setInterval

callback hell和promise

• callback hell是回調嵌套的形式
• promise實現非嵌套的形式，管道串聯的形式，解決callback hell問題，callback嵌套問題

//callback hell //獲取第一份數據 $.get(url1,(data1) => {console.log(data1)//獲取第二份數據$.get(url2,(data2) => {console.log(data2)})//獲取第三份數據$.get(url3,(data3) => {console.log(data3)//還可能獲取更多的數據}) }) //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(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)) 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))

總結

以上是生活随笔為你收集整理的（七）JS基础知识四（搞定异步）【三座大山之三，必考！！！】的全部內容，希望文章能夠幫你解決所遇到的問題。

如果覺得生活随笔網站內容還不錯，歡迎將生活随笔推薦給好友。