并發(fā)和并行
并行和并發(fā)是兩個概念，容易混淆是因為并行和并發(fā)在中文意思上相近，其實在英文中，這是完全不相同的東西，并行(parallelism)、并發(fā)(concurrency)。
并行(parallelism)：是微觀概念，假設(shè)CPU有兩個核心，則我們就可以同時完成任務(wù)A和任務(wù)B，同時完成多個任務(wù)的情況就可以稱之為并行。
并發(fā)(concurrency)：是宏觀概念，現(xiàn)在有任務(wù)A和任務(wù)B，在一段時間內(nèi)，通過任務(wù)之間的切換完成這兩個任務(wù)，這種情況稱之為并發(fā)。
回調(diào)函數(shù)
回調(diào)函數(shù)廣泛存在于我們所編寫的JavaScript代碼中，它表現(xiàn)在事件綁定，Ajax請求或者其他的情況下，一個回調(diào)函數(shù)可表現(xiàn)成如下形式
ajax(url, () => { console.log(‘這里是回調(diào)函數(shù)’);})
回調(diào)地獄： 回調(diào)函數(shù)很好的解決了某些異步情況，但過度濫用回調(diào)函數(shù)會造成回調(diào)地獄，即回調(diào)函數(shù)過長，嵌套過深。過長或者嵌套過深的回調(diào)函數(shù)，會讓回調(diào)函數(shù)存在強耦合關(guān)系，一旦有一個函數(shù)有所改動，那么可能會牽一發(fā)而動全身。一個回調(diào)地獄可能如下所示：
ajax(firstUrl, () => { console.log(‘這里是首次回調(diào)函數(shù)’); ajax(secondUrl, () => { console.log(‘這里是第二次回調(diào)函數(shù)’); ajax(threeUrl, () => { console.log(‘這里是第三次回調(diào)函數(shù)’); // todo更多 }) })})
Generator
在ES6之前，一個函數(shù)一旦執(zhí)行將不會被中斷，一直到函數(shù)執(zhí)行完畢，在ES6之后，由于Generator的存在，函數(shù)可以暫停自身，待到合適的機會再次執(zhí)行。用Generator可以解決回調(diào)地獄。
function *fetch() { yield ajax(url, () => {console.log(‘這里是首次回調(diào)函數(shù)’);}); yield ajax(url, () => {console.log(‘這里是第二次回調(diào)函數(shù)’);}); yield ajax(url, () => {console.log(‘這里是第三次回調(diào)函數(shù)’);});}var it = fetch();var result1 = it.next();var result2 = it.next();var result3 = it.next();
Promise
Promise翻譯過來就是承諾的意思，Promise一共有三種狀態(tài)：pending(等待中)、resolve(完成)和reject(拒絕)，這個承諾意味著在將來一定會有一個表決，并且只能表決一次，表決的狀態(tài)一定是resolve(完成)或者reject(拒絕)，一個Promise可能會是如下的形式：
// 普通的Promisefunction foo() { return new Promise((resolve,reject) => { // 第一次表決有效，其后無論是resolve()還是reject()都無效 resolve(true); resolve(false); })}// Promise解決回調(diào)地獄ajax(url).then(res => { console.log(‘這里是首次回調(diào)函數(shù)’);}).then(res => { console.log(‘這里是第二次回調(diào)函數(shù)’);}).then(res => { console.log(‘這里是第三次回調(diào)函數(shù)’);})
async/await
如果一個方法前面加上了async，那么這個方法就會返回一個Promise，async就是將函數(shù)用Promise.resolve()包裹了下，并且await只能配合async使用，不能單獨出現(xiàn)。一個async/await可能會是如下的形式：
// 普通的async/awaitasync function foo() { let number = await 3; // await自動用promise.resolve()包裝 console.log(number);}foo();// async/await解決回調(diào)地獄async function fetch() { var result1 = await ajax(url1); var result2 = await ajax(url2); var result3 = await ajax(url3);}fetch();
如若轉(zhuǎn)載，請注明出處：開源字節(jié) https://sourcebyte.cn/article/170.html
