前端異步是什么？哪些情況下會發生異步？

異步是什么？

這里就不拿官方的解釋來解答了，只以個人理解來回答問題，輕噴。我們知道JavaScript是單線程的，不像java等語言是多線程的，所以一般情況下，js代碼是一行一行的執行的。但是某些時候需要用異步來提升性能，比如說一個網絡請求需要服務端返回數據30s，js不可能一直等待服務器返回再執行其他代碼，這時候js就會跳過這個過程，繼續往下執行，直到沒有代碼要執行了，這時候后端返回數據了，js再接着執行返回數據之后的代碼。這個過程就是一個異步。

---

例子

再舉個栗子，你跟你女朋友不在一個班，但是你去找她的時候，發現她不在座位上，這時候你有2種選擇，1. 在座位上等她，然后啥都不干。2. 你回到自己的座位上，繼續抄作業，給她發消息等她回來了，讓她告訴你，你再去找她。第一種就是同步，第二種就是異步，實際上就是js的事件委托。很顯然第二種方式效率更高。

哪些情況下會發生異步

個人總結了一下，總共有下列情況會發生異步

1. 回調函數，這個很常見，很多內置函數都支持接收回調函數來異步代碼
2. 事件監聽，很多dom操作，click事件等都是異步的
3. 訂閱與發布，這個常見是在angular和vue中，用 $on來監聽事件，$emit來發布事件，經常用於父子組件交互
4. promise是es6新增的特性，能通過resolve和reject來執行異步操作，常與async await配合使用。

具體代碼示例

asyncFun() {
	return new Promise((resolve) => {
		console.log('1', '時間：', moment().format('YYYY-MM-DD hh:mm:ss'))
		setTimeout(() => {
			console.log('2', '時間：', moment().format('YYYY-MM-DD hh:mm:ss'))
			resolve()
		}, 1000)
		console.log('3', '時間：', moment().format('YYYY-MM-DD hh:mm:ss'))
	})
},
async run() {
	await this.asyncFun()
}

運行截圖：

可以看到，代碼采用setTimeout的回調函數來執行一個異步，采用promise配合async await來完成整個過程，代碼的執行循序就是1,3然后過1s輸出2.后面會有詳細的promise async await的講解。

---

線上體驗地址
所有的源碼都可以在我的倉庫地址：下載
個人博客：訪問

學習如逆水行舟，不進則退，前端技術飛速發展，如果每天不堅持學習，就會跟不上，我會陪着大家，每天堅持推送博文，跟大家一同進步，希望大家能關注我，第一時間收到最新文章。