Promise實現一個紅綠燈
一起養成寫作習慣！這是我參與「掘金日新計劃 · 4 月更文挑戰」的第15天，點擊查看活動詳情
Promise在ES6中是一個比較常見的東西，它不僅可以用來處理多個接口相互依賴請求，解決地獄回調的問題，還能在很多場景中進行應用，今天我們就以一個Promise實現紅綠的的實例來作為對Promise異步作用的學習，同時配合async awiat的使用進行實現
需求分析
首先我們分析以下紅綠燈的實現過程需要哪些東西，第一是三個紅綠黃三個顏色的燈，然後每個燈之間會進行切換，比如綠燈5s亮然後黃燈亮2s，最後是紅燈3s，一個流程過後則是進行一個循環，重新到綠燈亮。 1. 三種顏色進行亮燈 2. 定時時間 3. 循環切換
首先設置一個定時器接收亮燈和亮燈的時間，我們需要用到一個定時器函數接收倆個參數，亮燈顏色和亮燈時間，然後設置一個Promise，由於Promise是一個異步操作，只有發生狀態響應的時候，才會繼續執行後續的操作，那麼我們先在Promise中將顏色打印出來，然後通過一個定時器設置時間延時，延時相當於就是亮燈的時間，因為我們亮燈了，然後延時，就會造成一種燈在這段時間一直亮着的效果
js
async function timer(color，delay){
return new Promise((res,rej)=>{
console.log(color)
setTimeout(() => {
res()
}, delay);
})
}
從上面操作我們可以看出我們聲明瞭一個異步函數，返回了一個Promise，亮燈後定時進行resolve(),才能進入到下一步驟，所以我們已經完成了亮燈和延時，現在我們對三個顏色的燈配合async await進行三個燈的實現
js
async function light(){
await timer('green',1000)
await timer('yellow',2000)
await timer('red',3000)
}
我們可以看到現在三個燈是三個獨立的異步函數，分步進行執行，由於await返回的也是一個Promise,所以awit的函數必須執行完才能執行下一個函數，這樣就是為什麼上面會用到定時器調用res()的原因了，只有上一個燈執行完才能進行下一個燈，現在三個燈理論上已經是可以按順序切換顯示的了，最後我們給他進行循環顯示
```js async function light(){ await timer('green',1000) await timer('yellow',2000) await timer('red',3000) await light()
} light() ``` 我們在代碼塊中讓切換燈的函數在最後調用自己，這樣每一個循環結束都會開始重新調用