Javascript基礎知識體系化學習總結(四)異步
一、單線程
1.javascript是單線程語言,只能同時做一件事,代碼從上往下執行,一個個加載。
2.javascript和DOM渲染共用一個線程,即兩者只能同時進行一個。
3.瀏覽器和node.js已經支持javascript啓動進程,例如WebWorker。
二、callback
1.callback即是回調函數,是來處理異步的,至於爲什麼會出現異步的情況,是因爲js單線程很可能導致我們加載某些內容的時候等待時間過長卡住。
2.callback本身不足,很容易引起回調地獄,不僅閱讀困難,也很難去維護這些代碼。
三、應用場景
1.同步和異步的區別:同步會阻塞代碼的執行,異步不會阻塞代碼的執行。
2.發送網絡請求的時候例如請求一些資源(圖片等等)。
3.出現定時任務的時候如setTimeout和setInterval。
四、Promise
1.爲了解決使用callback產生的回調地獄,promise採用了並行的書寫方式,區別於callback的嵌套方式。
2.關於具體如何使用promise,我們給出一個手寫promise加載圖片的函數熟悉一下:
<!DOCTYPE html>
<html>
<head>
<title>手寫promise加載圖片</title>
</head>
<body>
<script type="text/javascript">
function loadImage(src) { // 定義promise加載圖片的方法
const p = new Promise((resolve, reject)=>{ // 將整個promise賦值給一個變量,方便後面直接返回變量
const img = document.createElement('img')
img.src = src // 在DOM創建一個img標籤並且指定圖片地址爲我們的傳入的地址
img.onload=()=>{
resolve(img)
} // 圖片成功加載則觸發resolve狀態,並且返回img標籤(帶地址),調用者用.then接收
img.onError=()=>{
const err = `圖片加載失敗${src}`
reject(err)
} // 圖片加載失敗則觸發reject,並且把錯誤信息傳回去,調用者用.catch接收
})
return p // 返回變量
}
const url1 = 'https://www.3dmgame.com/uploads/images/thumbztfirst/20180824/1535097139_983975.jpg'
const url2 = 'https://ss2.bdstatic.com/70cFvnSh_Q1YnxGkpoWK1HF6hhy/it/u=3719520752,2657134858&fm=26&gp=0.jpg'
loadImage(url1) // 調用我們定義的方法
.then((img)=>{
console.log(img.width);
return img // 成功加載第一張圖片時打印其寬並且返回img標籤,方便下一個then使用
})
.then((img)=>{
console.log(img.width);
return loadImage(url2) // 這裏調用我們定義的方法,準備加載第二張圖片
})
.then((img)=>{
console.log(img.width);
return img
})
.then((img)=>{
console.log(img.height);
})
.catch((err)=>{
console.log(err);
})
</script>
</body>
</html>
好了,javascript的第四個模塊大概就是這些內容了,我會將它分爲11個模塊然後13篇文章左右把它講完(有的模塊內容多會範圍上下期大概。。。),學完這些模塊相信大家對基礎的js會有一個比較體系化的認識,那麼大家加油,我是O5,我們下次見!