js-promise以及async、await實現簡易紅綠燈

一、回調

1. 回調函數

   • 當一個函數A作為參數，傳入另一個函數B中，某種情況下執行，作為參數的函數A，叫回調函數
   • 用處：
     • 獲取異步的數據
     • 獲取將來的數據

2. 回調地獄

   • 當回調函數嵌套過多時
     • 格式混亂，不方便程序調試
     • 浪費性能
       

3. 回調地獄解決了什么問題

   • 多層異步，嵌套的問題

4. 更好的解決方式

   • 不產生回調地獄，實現多層異步的需求
     • ES6：Promise
       • 概念
         1. Promise是回調地獄的解決方案之一
         2. 我們使用Promise的語法來解回調地獄
         3. 是代碼擁有可讀寫和維護性
       • 語法

二、Promise

1. 概念
   • 承諾：分為三個狀態：正在進行時，已完成，已失敗
   • 完成和失敗的狀態只允許發生一次且一個
   • promise其實就利用原生js進行的封裝
2. 語法
   • Promise是個構造函數
     • new執行
       • 創建一個實例，實例身上有then方法和catch方法

       let p = new Promise((resolve,reject)=>{
           // 正在進行時....
       
           // 已完成
           resolve();
           // 已失敗
           reject();
       })
       
       p.then(()=>{
           // 完成時要做的事情
           // 想做什么做什么
           return 新的promise實例2
       }).then(()=>{
           // 新的promise2的成功處理
           // 想做什么做什么
           return 新的promise實例3
       }).then(()=>{
           // 新的promise3的成功處理
           // 想做什么做什么
           return ......;
       })
       
       p.catch(()=>{
           // 失敗時要做的事情
           // 想做什么做什么
           return 新的promise實例2
       }).catch(()=>{
           // 新的promise2的失敗處理
           // 想做什么做什么
           return ......;
       })
       

     • 直接作為對象使用
       • Promise.all批量檢測

       var p1 = new Promise(...);
       var p2 = new Promise(...);
       var p3 = new Promise(...);
       
       Promise.all([p1,p2,p3]).then((res)=>{
           // 全部成功時，要做的事情
           // res是個數組，內包含所有promise實例的成功之后的數據
       }).catch((res)=>{
           // 只要有一個失敗，要做的事情
       })
       

• 與服務器無關，只是，將來可能會用於解決在服務器環境中的程序中的某些問題

三、async / await

• ES7提供，專門用於將異步的程序，模擬成同步執行

  • async用來標記一個函數是異步函數
  • await用來將異步的程序同步執行
    • await關鍵字必須出現在async標記的函數中
    • async的函數中沒有await關鍵字，該怎樣就怎樣
  • await后需要跟一個Promise實例

  async function fn(){
      let a = await new Promise((success,error)=>{
          success("成功了");
      })
      console.log(a);
  
      let b = await new Promise((success,error)=>{
          error("失敗了");
      })
      console.log(b);
  }
  fn();
  

  案例效果如下：

  

  具體代碼如下：

  html代碼：
  

  

  js代碼：
  

    var aDiv = document.querySelectorAll('div');
    function active(index,oColor){      
        for(var i = 0;i<aDiv.length;i++){
            aDiv[i].style.background = '';
        }
        aDiv[index].style.background = oColor;
    }  


    var fn = async function(){
            var p1 = await new Promise(function(success,error){
                setTimeout(()=>{
                   success(active(0,'red'));
                },1000)
            });
            var p2 = await new Promise(function(success,error){
                setTimeout(()=>{
                    success(active(1,'green'));
                },1000)       
            });
            var p3 = await new Promise(function(success,error){
                setTimeout(()=>{
                    success(active(2,'yellow'));
                },1000)
            });
            fn();
        }
    fn();    
      ```
- 與服務器無關，只是，將來可能會用於解決在服務器環境中的程序中的某些問題