async和awite以及promise

promise呢是es6的，async和awite是es7的，平常代碼也是很常用的，解決異步問題，回調地域等
一 : async

1. async用來表示函數是異步的，定義的函數會返回一個Promise對象，可以使用then方法添加回調函數
2. 若 async 定義的函數有返回值，return 相當於Promise.resolve(),沒有聲明式的 return則相當於執行了Promise.resolve();

async function basicDemo() {
    let result = await Math.random();
    return result;  
}

basicDemo().then(res=> {
     console.log(res);
});

二 : await

1. 如果await是 promise對象會造成異步函數停止執行並且等待 promise 的解決後, 在處理後面的代碼; 正常表達式時 則立即執行

  function sleep(second) {
     return new Promise((resolve, reject) => {
        setTimeout(() => {
           resolve('enough sleep~');
        }, second);
     })
  }
  
  function normalFunc() {
     return 3; 
  }

  async function awaitDemo() {
     console.log('啊哈哈哈哈----1');

     let result = await sleep(2000);
     console.log(result);

     console.log('啊哈哈哈哈----2');
  }
  awaitDemo();

  輸出: 
      啊哈哈哈哈----1
      enough sleep~
      啊哈哈哈哈----2

這就驗證說明了 await是promise對象會造成異步函數停止執行並且等待 promise 的解決。

**注意：**如果 awaitDemo函數中沒有 return xxx；
則

  awaitDemo().then(res=>{
     console.log(res); // 此處res=undefined
  });

來個案例: 如果你有三個請求需要發生，第三個請求是依賴於第二個請求的解構第二個請求依賴於第一個請求的結果

 function simulateAsyncFun(second, param) {
     return new Promise((resolve, reject)=>{
        setTimeout(()=>{
           resolve(param);
        }, second)
     })
  }

 async function demo() {
     let res1 = await simulateAsyncFun(2000, '2s');
     let res2 = await simulateAsyncFun(1000, '1s' + `${res1}`);
     let res3 = await simulateAsyncFun(500, '0.5s' + `${res2}`);

     console.log(res1, res2, res3);
  }

  demo();

輸出: 
     2s 1s2s 0.5s1s2s

列2：並行處理 三個異步請求需要發送，相互沒有關聯，只是需要當請求都結束後做些操作

**方式一：**loading 確實是等待請求都結束完才清除的。但是你認真的觀察下瀏覽器的 timeline 請求是一個結束後再發另一個的

async function bugDemo() {
             await sleep(1000);
             await sleep(1000);
             await sleep(1000);

             console.log('clear the loading~');
          }
   bugDemo();

方式二： 正常的處理

  async function correctDemo() {
                 let p1 = sleep(1000);
                 let p2 = sleep(1000);
                 let p3 = sleep(1000)；
                 await Promise.all([p1, p2, p3]);

                 console.log('clear the loading~');
               }
     correctDemo();

關於： Promise.race
Promise.race(iterable) 方法返回一個 promise；

race就是賽跑的意思，意思就是說，Promise.race([p1, p2, p3]) <p1，p2，p3表示Promise對象> 裏面哪個結果獲得的快，就返回那個結果，不管結果本身是成功狀態還是失敗狀態. 所以超過timeout時長就說明請求超時。

例子1： Promise.race([fetch(urlString), delay(timeout)]);

例子2: 
var promise1 = new Promise(function(resolve, reject) {
    setTimeout(resolve, 500, 'one');
});

var promise2 = new Promise(function(resolve, reject) {
   setTimeout(resolve, 900, 'two');
});

Promise.race([promise1, promise2]).then(function(value) {
  console.log(value);
  // Both resolve, but promise2 is faster
});

輸出： ‘one’