并發(fā)與并行的區(qū)別？
并發(fā)是宏觀概念，我分別有任務(wù)A 和 任務(wù)B芜抒，在一段時(shí)間內(nèi)通過任務(wù)間切換完成了這兩個(gè)任務(wù)，這種情況就可以稱之為并發(fā)托启。
并行是微觀概念宅倒，假設(shè)CPU 中存在兩個(gè)核心，那么我就可以同時(shí)完成任務(wù)A驾中、B唉堪。同時(shí)完成多個(gè)任務(wù)的情況可以稱之為并行。
回調(diào)地獄
回調(diào)地獄的根本問題：
- 嵌套函數(shù)存在耦合性肩民，一旦有所改動(dòng)唠亚，就會(huì)牽一發(fā)而動(dòng)全身
- 嵌套函數(shù)一多，就很難處理錯(cuò)誤持痰。
- 不能使用
try catch灶搜，不能直接return。
Promise
涉及面試題：Promise的特點(diǎn)是什么工窍，分別有什么優(yōu)缺點(diǎn)割卖？什么是Promise鏈？promise 構(gòu)造函數(shù)執(zhí)行和then 函數(shù)執(zhí)行有什么區(qū)別患雏？
Promise 翻譯過來就是承諾的意思鹏溯，這個(gè)承諾會(huì)在未來有一個(gè)確切的答復(fù)，并且改承諾有三種狀態(tài)淹仑，分別是：
- 等待中 (pending)
- 完成了 (resolved)
- 拒絕了 (rejected)
這個(gè)承諾一旦從等待狀態(tài)變成為其他狀態(tài)永遠(yuǎn)不能更改狀態(tài)了丙挽，也就是說一旦狀態(tài)變?yōu)?resolved后，就不能再次改變匀借。
var promise = new Promise ((resolve, reject) => {
if (異步操作成功) {
resolve(value)
} else {
異步操作失敗
reject(new Error())
}
})
當(dāng)我們?cè)跇?gòu)造 Promise 的時(shí)候颜阐，構(gòu)造函數(shù)內(nèi)部的代碼是立即執(zhí)行的。
new Promise((resolve, reject) => {
console.log('new Promise')
resolve('success')
})
console.log('finish')
Promise 實(shí)現(xiàn)了鏈?zhǔn)秸{(diào)用吓肋，也就是說每次調(diào)用 then 之后返回的都是一個(gè) Promise 凳怨，并且是一個(gè)全新的 Promise，原因也是因?yàn)闋顟B(tài)不可變。如果你在 then 中 使用了 return肤舞，那么 return 的值會(huì)被 Promise.resolve() 包裝
Promise.resolve(1)
.then(res => {
console.log(res)
return 2
})
.then(res => {
console.log(res)
})
輸出 => 1 2
使用 Promise 加載圖片
// 加載圖片
let preloadImage = function (path) {
return new Promise((resolve, reject) => {
let image = new Image()
image.onload = resolve
image.onerror = reject
iamge.src = path
})
}
異步終極解決方案 async 和 await
await 我們從名字可以看出來意思是等待異步的意思紫新，即它可以讓異步回調(diào)變得像同步函數(shù)，并且會(huì)阻塞下一步李剖，但是弊琴！這一切都是發(fā)生在async中的，而async是異步的杖爽，所以整個(gè)js并不會(huì)被阻塞。所以await要寫在async中紫皇。當(dāng)然單純的await和async是并不能解決問題慰安。可以看到還是需要promise的聪铺。
// async await
// 異步方法一
function takeLongTime() {
return new Promise((resolve, reject) => {
setTimeout(()=> resolve(10), 1000)
})
}
// 異步方法二
function takeLongTime2(v) {
console.log(v)
return new Promise(resolve => {
setTimeout(() => resolve(v + 20), 10)
})
}
async function test() {
// 先執(zhí)行 takeLongTime 然后 執(zhí)行 takeLongTime2
// 將 takeLongTime 中得到的結(jié)果傳給takleLongTime2中
const v = await takeLongTime()
const b = await takeLongTime2(v)
console.log(b)
}
// 執(zhí)行 test 方法
test()
// 輸出結(jié)果為 10 30