摘要：的和我們通過的原型方法拿到我們的返回值輸出我延遲了毫秒后輸出的輸出下列的值我延遲了毫秒后輸出的。有人說，我不想耦合性這么高，想先執行函數再執行，但不想用上面那種寫法，可以嗎，答案是當然可以。

此文只介紹Async/Await與Promise基礎知識與實際用到注意的問題，將通過很多代碼實例進行說明，兩個實例代碼是setDelay和setDelaySecond。

tips:本文系原創轉自我的博客異步Promise及Async/Await最完整入門攻略，歡迎前端大神交流，指出問題

我們都知道已經有了Promise的解決方案了，為什么還要ES7提出新的Async/Await標準呢？

答案其實也顯而易見：Promise雖然跳出了異步嵌套的怪圈，用鏈式表達更加清晰，但是我們也發現如果有大量的異步請求的時候，流程復雜的情況下，會發現充滿了屏幕的then，看起來非常吃力，而ES7的Async/Await的出現就是為了解決這種復雜的情況。

首先，我們必須了解Promise。

什么是Promise，很多人應該都知道基礎概念？直接看下面的代碼（全文的例子都是基于setDelaySecond和setDelay兩個函數，請務必記住）：

const setDelay = (millisecond) => {
  return new Promise((resolve, reject)=>{
      if (typeof millisecond != "number") reject(new Error("參數必須是number類型"));
      setTimeout(()=> {
        resolve(`我延遲了${millisecond}毫秒后輸出的`)
      }, millisecond)
  })
}

我們把一個Promise封裝在一個函數里面同時返回了一個Promise，這樣比較規范。

可以看到定義的Promise有兩個參數，resolve和reject。

resolve：將異步的執行從pending(請求)變成了resolve(成功返回)，是個函數執行返回。

reject：顧名思義“拒絕”，就是從請求變成了"失敗"，是個函數可以執行返回一個結果，但我們這里推薦大家返回一個錯誤new Error()。

上述例子，你可以reject("返回一個字符串")，隨便你返回，但是我們還是建議返回一個Error對象，這樣更加清晰是“失敗的”，這樣更規范一點。

我們通過Promise的原型方法then拿到我們的返回值：

setDelay(3000)
.then((result)=>{
    console.log(result) // 輸出“我延遲了2000毫秒后輸出的”
})

輸出下列的值：“我延遲了2000毫秒后輸出的”。

如果出錯呢？那就用catch捕獲：

setDelay("我是字符串")
.then((result)=>{
    console.log(result) // 不進去了
})
.catch((err)=>{
    console.log(err) // 輸出錯誤：“參數必須是number類型”
})

是不是很簡單？好，現在我增加一點難度，如果多個Promise執行會是怎么樣呢？

我們在寫一個Promise：

const setDelaySecond = (seconds) => {
  return new Promise((resolve, reject)=>{
      if (typeof seconds != "number" || seconds > 10) reject(new Error("參數必須是number類型，并且小于等于10"));
      setTimeout(()=> {
        console.log(`先是setDelaySeconds函數輸出，延遲了${seconds}秒，一共需要延遲${seconds+2}秒`)
        resolve(setDelay(2000)) // 這里依賴上一個Promise
      }, seconds * 1000)
  })
}

在下一個需要依賴的resolve去返回另一個Promise，會發生什么呢？我們執行一下：

setDelaySecond(3).then((result)=>{
  console.log(result)
}).catch((err)=>{
  console.log(err);
})

你會發現結果是先執行：“先是setDelaySeconds輸出，延遲了2秒，一共需要延遲5秒”

再執行setDelay的resolve：“我延遲了2000毫秒后輸出的”。的確做到了依次執行的目的。

有人說，我不想耦合性這么高，想先執行setDelay函數再執行setDelaySecond，但不想用上面那種寫法，可以嗎，答案是當然可以。

先改寫一下setDelaySecond，拒絕依賴，降低耦合性

const setDelaySecond = (seconds) => {
  return new Promise((resolve, reject)=>{
      if (typeof seconds != "number" || seconds > 10) reject(new Error("參數必須是number類型，并且小于等于10"));
      setTimeout(()=> {
        resolve(`我延遲了${seconds}秒后輸出的，是第二個函數`)
      }, seconds * 1000)
  })
}

先執行setDelay在執行setDelaySecond，只需要在第一個then的結果中返回下一個Promise就可以一直鏈式寫下去了，相當于依次執行：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(3)
})
.then((result)=>{
  console.log("我進行到第二步的");
  console.log(result);
}).catch((err)=>{
  console.log(err);
})

發現確實達到了可喜的鏈式（終于脫離異步嵌套苦海，哭），可以看到then的鏈式寫法非常優美。

這里一定要提到一點：

then式鏈式寫法的本質其實是一直往下傳遞返回一個新的Promise，也就是說then在下一步接收的是上一步返回的Promise，理解這個對于后面的細節非常重要！！

那么并不是這么簡單，then的返回我們可以看出有2個參數(都是回調)：

第一個回調是resolve的回調，也就是第一個參數用得最多，拿到的是上一步的Promise成功resolve的值。

第二個回調是reject的回調，用的不多，但是求求大家不要寫錯了，通常是拿到上一個的錯誤，那么這個錯誤處理和catch有什么區別和需要注意的地方呢？

我們修改上面的代碼：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(20)
})
.then((result)=>{
  console.log("我進行到第二步的");
  console.log(result);
}, (_err)=> {
  console.log("我出錯啦，進到這里捕獲錯誤，但是不經過catch了");
})
.then((result)=>{
  console.log("我還是繼續執行的！！！！")
})
.catch((err)=>{
  console.log(err);
})

可以看到輸出結果是：進到了then的第二個參數（reject）中去了，而且最重要的是！不再經過catch了。

那么我們把catch挪上去，寫到then錯誤處理前：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(20)
})
.catch((err)=>{ // 挪上去了
  console.log(err); // 這里catch到上一個返回Promise的錯誤
})
.then((result)=>{
  console.log("我進行到第二步的");
  console.log(result);
}, (_err)=> {
  console.log("我出錯啦，但是由于catch在我前面，所以錯誤早就被捕獲了，我這沒有錯誤了");
})
.then((result)=>{
  console.log("我還是繼續執行的！！！！")
})

可以看到先經過catch的捕獲，后面就沒錯誤了。

可以得出需要注意的：

catch寫法是針對于整個鏈式寫法的錯誤捕獲的，而then第二個參數是針對于上一個返回Promise的。

兩者的優先級：就是看誰在鏈式寫法的前面，在前面的先捕獲到錯誤，后面就沒有錯誤可以捕獲了，鏈式前面的優先級大，而且兩者都不是break， 可以繼續執行后續操作不受影響。

上述已經寫好了關于then里面三個回調中第二個回調（reject）會與catch沖突的問題，那么我們實際寫的時候，參數捕獲的方式基本寫得少，catch的寫法會用到更多。

既然有了很多的Promise，那么我需不需要寫很多catch呢？

答案當然是：不需要！，哪有那么麻煩的寫法，只需要在末尾catch一下就可以了，因為鏈式寫法的錯誤處理具有“冒泡”特性，鏈式中任何一個環節出問題，都會被catch到，同時在某個環節后面的代碼就不會執行了。

既然說到這里，我們把catch移到第一個鏈式的返回里面會發生什么事呢？看下面代碼：

setDelay("2000")
.then((result)=>{
  console.log("第一步完成了");
  console.log(result)
  return setDelaySecond(3)
})
.catch((err)=>{ // 這里移到第一個鏈式去，發現上面的不執行了，下面的繼續執行
  console.log(err);
})
.then((result)=>{
  console.log("第二步完成了");
  console.log(result);
})

驚喜的發現，鏈式繼續走下去了！！輸出如下（undefined是因為上一個then沒有返回一個Promise）：

重點來了！敲黑板！！鏈式中的catch并不是終點！！catch完如果還有then還會繼續往下走！不信的話可以把第一個catch在最后面的那個例子后面再加幾個then，你會發現并不會跳出鏈式執行。

如果順序執行setDelay，setDelay1,setDelaySecond，按照上述的邏輯，流程圖可以概括如下：

catch只是捕獲錯誤的一個鏈式表達，并不是break！

所以，catch放的位置也很有講究，一般放在一些重要的、必須catch的程序的最后。**這些重要的程序中間一旦出現錯誤，會馬上跳過其他后續程序的操作直接執行到最近的catch代碼塊，但不影響catch后續的操作！！！！

到這就不得不體一個ES2018標準新引入的Promise的finally，表示在catch后必須肯定會默認執行的的操作。這里不多展開，細節可以參考：Promise的finally

其實很簡單，用Promise的原型方法resolve即可：

setDelay(2000).then((result)=>{
  console.log("第一步完成了");
  console.log(result);
  let message = "這是我自己想處理的值"; 
  return Promise.resolve(message) // 這里返回我想在下一階段處理的值
})
.then((result)=>{
  console.log("第二步完成了");
  console.log(result); // 這里拿到上一階段的返回值
  //return Promise.resolve("這里可以繼續返回")
})
.catch((err)=>{
  console.log(err);
})

不同于一般的function的break的方式，如果你是這樣的操作：func().then().then().then().catch()的方式，你想在第一個then就跳出鏈式，后面的不想執行了，不同于一般的break;return null;return false等操作，可以說，如何停止Promise鏈，是一大難點，是整個Promise最復雜的地方。

1.用鏈式的思維想，我們拒絕掉某一鏈，那么不就是相當于直接跳到了catch模塊嗎？

我們是不是可以直接“拒絕“掉達到停止的目的？

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(1)
})
.then((result)=>{
  console.log("我進行到第二步的");
  console.log(result);
  console.log("我主動跳出循環了");
  return Promise.reject("跳出循環的信息") // 這里返回一個reject,主動跳出循環了
})
.then((result)=>{
  console.log("我不執行");
})
.catch((mes)=>{
  console.dir(mes)
  console.log("我跳出了");
})

但是很容易看到缺點：有時候你并不確定是因為錯誤跳出的，還是主動跳出的，所以我們可以加一個標志位：

return Promise.reject({
    isNotErrorExpection: true // 返回的地方加一個標志位，判斷是否是錯誤類型，如果不是，那么說明可以是主動跳出循環的
}) 

或者根據上述的代碼判斷catch的地方輸出的類型是不是屬于錯誤對象的，是的話說明是錯誤，不是的話說明是主動跳出的，你可以自己選擇（這就是為什么要統一錯誤reject的時候輸出new Error("錯誤信息")的原因，規范！）

當然你也可以直接拋出一個錯誤跳出：

throw new Error("錯誤信息") // 直接跳出，那就不能用判斷是否為錯誤對象的方法進行判斷了

2.那有時候我們有這個需求：catch是放在中間（不是末尾），而同時我們又不想執行catch后面的代碼，也就是鏈式的絕對中止，應該怎么辦？

我們看這段代碼：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(1)
})
.then((result)=>{
  console.log("我進行到第二步的");
  console.log(result);
  console.log("我主動跳出循環了");
  return Promise.reject("跳出循環的信息") // 這里直接調用Promise原型方法返回一個reject,主動跳出循環了
})
.then((result)=>{
  console.log("我不執行");
})
.catch((mes)=>{
  console.dir(mes)
  console.log("我跳出了");
})
.then((res)=>{
    console.log("我不想執行，但是卻執行了"); // 問題在這，上述的終止方法治標不治本。
})

這時候最后一步then還是執行了，整條鏈都其實沒有本質上的跳出，那應該怎么辦呢？

敲黑板！！重點來了！我們看Promise/A+規范可以知道：

A promise must be in one of three states: pending, fulfilled, or rejected.

Promise其實是有三種狀態的：pending，resolve，rejected，那么我們一直在討論resolve和rejected這2個狀態，是不是忽視了pending這個狀態呢？pending狀態顧名思義就是請求中的狀態，成功請求就是resolve，失敗就是reject，其實他就是個中間過渡狀態。

而我們上面討論過了，then的下一層級其實得到的是上一層級返回的Promise對象，也就是說原Promise對象與新對象狀態保持一致。那么重點來了，如果你想在這一層級進行終止，是不是直接讓它永遠都pending下去，那么后續的操作不就沒了嗎？是不是就達到這個目的了？？覺得有疑問的可以參考Promise/A+規范。

我們直接看代碼：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進行到第一步的");
  return setDelaySecond(1)
})
.then((result)=>{
  console.log(result);
  console.log("我主動跳出循環了");
  // return Promise.reject("跳出循環的信息")
  // 重點在這
  return new Promise(()=>{console.log("后續的不會執行")}) // 這里返回的一個新的Promise，沒有resolve和reject，那么會一直處于pending狀態，因為沒返回啊，那么這種狀態就一直保持著，中斷了這個Promise
})
.then((result)=>{
  console.log("我不執行");
})
.catch((mes)=>{
  console.dir(mes)
  console.log("我跳出了");
})
.then((res)=>{
  console.log("我也不會執行")
})

這樣就解決了上述，錯誤跳出而導致無法完全終止Promise鏈的問題。

但是！隨之而來也有一個問題，那就是可能會導致潛在的內存泄漏，因為我們知道這個一直處于pending狀態下的Promise會一直處于被掛起的狀態，而我們具體不知道瀏覽器的機制細節也不清楚，一般的網頁沒有關系，但大量的復雜的這種pending狀態勢必會導致內存泄漏，具體的沒有測試過，后續可能會跟進測試（nodeJS或webapp里面不推薦這樣），而我通過查詢也難以找到答案，這篇文章可以推薦看一下：從如何停掉 Promise 鏈說起。可能對你有幫助在此種情況下如何做。

當然一般情況下是不會存在泄漏，只是有這種風險，無法取消Promise一直是它的痛點。而上述兩個奇妙的取消方法要具體情形具體使用。

其實這幾個方法就簡單了，就是一個簡寫串聯所有你需要的Promise執行，具體可以參照阮一峰的ES6Promise.all教程。

我這上一個代碼例子

Promise.all([setDelay(1000), setDelaySecond(1)]).then(result=>{
  console.log(result);
})
.catch(err=>{
  console.log(err);
})
// 輸出["我延遲了1000毫秒后輸出的", "我延遲了1秒后輸出的，注意單位是秒"]

輸出的是一個數組，相當于把all方法里面的Promise并行執行，注意是并行。
相當于兩個Promise同時開始執行，同時返回值，并不是先執行第一個再執行第二個，如果你想串行執行，請參考我后面寫的循環Promise循環串行（第4.2小節）。

然后把resolve的值保存在數組中輸出。類似的還有Promise.race這里就不多贅述了。

什么是async/await呢？可以總結為一句話：async/await是一對好基友，缺一不可，他們的出生是為Promise服務的。可以說async/await是Promise的爸爸，進化版。為什么這么說呢？且聽我細細道來。

為什么要有async/await存在呢？

前文已經說過了，為了解決大量復雜不易讀的Promise異步的問題，才出現的改良版。

這兩個基友必須同時出現，缺一不可，那么先說一下Async：

async function process() {
}

上面可以看出，async必須聲明的是一個function，不要去聲明別的，要是那樣await就不理你了（報錯）。

這樣聲明也是錯的！

const async demo =  function () {} // 錯誤

必須緊跟著function。接下來說一下它的兄弟await。

上面說到必須是個函數（function），那么await就必須是在這個async聲明的函數內部使用，否則就會報錯。

就算你這樣寫，也是錯的。

let data = "data"
demo  = async function () {
    const test = function () {
        await data
    }
}

必須是直系（作用域鏈不能隔代），這樣會報錯：Uncaught SyntaxError: await is only valid in async function。

講完了基本規范，我們接下去說一下他們的本質。

敲黑板！！！很重要！async聲明的函數的返回本質上是一個Promise。

什么意思呢？就是說你只要聲明了這個函數是async，那么內部不管你怎么處理，它的返回肯定是個Promise。

看下列例子：

(async function () {
    return "我是Promise"
})()
// 返回是Promise
//Promise?{: "我是Promise"}

你會發現返回是這個：Promise?{: "我是Promise"}。

自動解析成Promise.resolve("我是Promise");

等同于：

(async function () {
    return Promise.resolve("我是Promise");
})()

所以你想像一般function的返回那樣，拿到返回值，原來的思維要改改了！你可以這樣拿到返回值：

const demo = async function () {
    return Promise.resolve("我是Promise");
    // 等同于 return "我是Promise"
    // 等同于 return new Promise((resolve,reject)=>{ resolve("我是Promise") })
}
demo.then(result=>{
    console.log(result) // 這里拿到返回值
})

上述三種寫法都行，要看注釋細節都寫在里面了！！像對待Promise一樣去對待async的返回值！！！

好的接下去我們看await的干嘛用的.

await的本質是可以提供等同于”同步效果“的等待異步返回能力的語法糖。

這一句咋一看很別扭，好的不急，我們從例子開始看：

const demo = async ()=>{
    let result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve("我延遲了一秒")
      }, 1000)
    });
    console.log("我由于上面的程序還沒執行完，先不執行“等待一會”");
}
// demo的返回當做Promise
demo().then(result=>{
  console.log("輸出",result);
})

await顧名思義就是等待一會，只要await聲明的函數還沒有返回，那么下面的程序是不會去執行的！！！。這就是字面意義的等待一會（等待返回再去執行）。

那么你到這測試一下，你會發現輸出是這個：輸出 undefined。這是為什么呢？這也是我想強調的一個地方！！！

你在demo函數里面都沒聲明返回，哪來的then？所以正確寫法是這樣：

const demo = async ()=>{
    let result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve("我延遲了一秒")
      }, 1000)
    });
    console.log("我由于上面的程序還沒執行完，先不執行“等待一會”");
    return result;
}
// demo的返回當做Promise
demo().then(result=>{
  console.log("輸出",result); // 輸出 我延遲了一秒
})

我推薦的寫法是帶上then，規范一點，當然你沒有返回也是沒問題的，demo會照常執行。下面這種寫法是不帶返回值的寫法：

const demo = async ()=>{
    let result = await new Promise((resolve, reject) => {
      setTimeout(()=>{
        resolve("我延遲了一秒")
      }, 1000)
    });
    console.log("我由于上面的程序還沒執行完，先不執行“等待一會”");
}
demo();

所以可以發現，只要你用await聲明的異步返回，是必須“等待”到有返回值的時候，代碼才繼續執行下去。

那事實是這樣嗎？你可以跑一下這段代碼：

const demo = async ()=>{
    let result = await setTimeout(()=>{
      console.log("我延遲了一秒");
    }, 1000)
    console.log("我由于上面的程序還沒執行完，先不執行“等待一會”");
    return result
}
demo().then(result=>{
  console.log("輸出",result);
})

你會發現，輸出是這樣的：

我由于上面的程序還沒執行完，先不執行“等待一會”
輸出 1
我延遲了一秒

奇怪，并沒有await啊？setTimeout是異步啊，問題在哪？問題就在于setTimeout這是個異步，但是不是Promise！起不到“等待一會”的作用。

所以更準確的說法應該是用await聲明的Promise異步返回，必須“等待”到有返回值的時候，代碼才繼續執行下去。

當然這種等待的效果只存在于“異步”的情況，await可以用于聲明一般情況下的傳值嗎？

事實是當然可以：

const demo = async ()=>{
    let message = "我是聲明值"
    let result = await message;
    console.log(result); 
    console.log("我由于上面的程序還沒執行完，先不執行“等待一會”");
    return result
}
demo().then(result=>{
  console.log("輸出",result);
})

輸出：

我是聲明值
我由于上面的程序還沒執行完，先不執行“等待一會”
輸出 我是聲明值

這里只要注意一點：then的執行總是最后的。

現在我們看一下實戰：

const setDelay = (millisecond) => {
  return new Promise((resolve, reject)=>{
      if (typeof millisecond != "number") reject(new Error("參數必須是number類型"));
      setTimeout(()=> {
        resolve(`我延遲了${millisecond}毫秒后輸出的`)
      }, millisecond)
  })
}
const setDelaySecond = (seconds) => {
  return new Promise((resolve, reject)=>{
      if (typeof seconds != "number" || seconds > 10) reject(new Error("參數必須是number類型，并且小于等于10"));
      setTimeout(()=> {
        resolve(`我延遲了${seconds}秒后輸出的，注意單位是秒`)
      }, seconds * 1000)
  })
}

比如上面兩個延時函數（寫在上面），比如我想先延時1秒，在延遲2秒，再延時1秒，最后輸出“完成”，這個過程，如果用then的寫法，大概是這樣（嵌套地獄寫法出門右拐不送）：

setDelay(1000)
.then(result=>{
    console.log(result);
    return setDelaySecond(2)
})
.then(result=>{
    console.log(result);
    return setDelay(1000)
})
.then(result=>{
    console.log(result);
    console.log("完成")
})
.catch(err=>{
    console.log(err);
})

咋一看是不是挺繁瑣的？如果邏輯多了估計看得更累，現在我們來試一下async/await

(async ()=>{
  const result = await setDelay(1000);
  console.log(result);
  console.log(await setDelaySecond(2));
  console.log(await setDelay(1000));
  console.log("完成了");
})()

看！是不是沒有冗余的長長的鏈式代碼，語義化也非常清楚，非常舒服，那么你看到這里，一定還發現了，上面的catch我們是不是沒有在async中實現？接下去我們就分析一下async/await如何處理錯誤？

因為async函數返回的是一個Promise，所以我們可以在外面catch住錯誤。

const demo = async ()=>{
  const result = await setDelay(1000);
  console.log(result);
  console.log(await setDelaySecond(2));
  console.log(await setDelay(1000));
  console.log("完成了");
}
demo().catch(err=>{
    console.log(err);
})

在async函數的catch中捕獲錯誤，當做一個Pormise處理，同時你不想用這種方法，可以使用try...catch語句：

(async ()=>{
  try{
    const result = await setDelay(1000);
    console.log(result);
    console.log(await setDelaySecond(2));
    console.log(await setDelay(1000));
    console.log("完成了");
  } catch (e) {
    console.log(e); // 這里捕獲錯誤
  }
})()

當然這時候你就不需要在外面catch了。

通常我們的try...catch數量不會太多，幾個最多了，如果太多了，說明你的代碼肯定需要重構了，一定沒有寫得非常好。還有一點就是try...catch通常只用在需要的時候，有時候不需要catch錯誤的地方就可以不寫。

有人會問了，我try...catch好像只能包裹代碼塊，如果我需要拆分開分別處理，不想因為一個的錯誤就整個process都crash掉了，那么難道我要寫一堆try...catch嗎？我就是別扭，我就是不想寫try...catch怎嘛辦？下面有一種很好的解決方案，僅供參考：

我們知道await后面跟著的肯定是一個Promise那是不是可以這樣寫？

(async ()=>{
  const result = await setDelay(1000).catch(err=>{
      console.log(err)
  });
  console.log(result);
  const result1 = await setDelaySecond(12).catch(err=>{
      console.log(err)
  })
  console.log(result1);
  console.log(await setDelay(1000));
  console.log("完成了");
})()

這樣輸出：

我延遲了1000毫秒后輸出的
Error: 參數必須是number類型，并且小于等于10
    at Promise (test4.html:19)
    at new Promise ()
    at setDelaySecond (test4.html:18)
    at test4.html:56
undefined
我延遲了1000毫秒后輸出的
完成了

是不是就算有錯誤，也不會影響后續的操作，是不是很棒？當然不是，你說這代碼也忒丑了吧，亂七八糟的，寫得別扭await又跟著catch。那么我們可以改進一下，封裝一下提取錯誤的代碼函數：

// to function
function to(promise) {
   return promise.then(data => {
      return [null, data];
   })
   .catch(err => [err]); // es6的返回寫法
}

返回的是一個數組，第一個是錯誤，第二個是異步結果，使用如下：

(async ()=>{
   // es6的寫法，返回一個數組(你可以改回es5的寫法覺得不習慣的話)，第一個是錯誤信息，第二個是then的異步返回數據，這里要注意一下重復變量聲明可能導致問題（這里舉例是全局，如果用let，const，請換變量名）。
  [err, result] = await to(setDelay(1000)) 
   // 如果err存在就是有錯，不想繼續執行就拋出錯誤
  if (err) throw new Error("出現錯誤，同時我不想執行了");
  console.log(result);
  [err, result1] = await to(setDelaySecond(12))
   // 還想執行就不要拋出錯誤
  if (err) console.log("出現錯誤，同時我想繼續執行", err);
  console.log(result1);
  console.log(await setDelay(1000));
  console.log("完成了");
})()

首先我們要明確的是，Promise本身是無法中止的，Promise本身只是一個狀態機，存儲三個狀態（pending，resolved，rejected），一旦發出請求了，必須閉環，無法取消，之前處于pending狀態只是一個掛起請求的狀態，并不是取消，一般不會讓這種情況發生，只是用來臨時中止鏈式的進行。

中斷（終止）的本質在鏈式中只是掛起，并不是本質的取消Promise請求，那樣是做不到的，Promise也沒有cancel的狀態。

不同于Promise的鏈式寫法，寫在async/await中想要中斷程序就很簡單了，因為語義化非常明顯，其實就和一般的function寫法一樣，想要中斷的時候，直接return一個值就行，null，空，false都是可以的。看例子：

let count = 6;
const demo = async ()=>{
  const result = await setDelay(1000);
  console.log(result);
  const result1 = await setDelaySecond(count);
  console.log(result1);
  if (count > 5) {
      return "我退出了，下面的不進行了";
    // return; 
    // return false; // 這些寫法都可以
    // return null;
  }
  console.log(await setDelay(1000));
  console.log("完成了");
};
demo().then(result=>{
  console.log(result);
})
.catch(err=>{
  console.log(err);
})

實質就是直接return返回了一個Promise，相當于return Promise.resolve("我退出了下面不進行了")，當然你也可以返回一個“拒絕”：return Promise.reject(new Error("拒絕"))那么就會進到錯誤信息里去。

async函數實質就是返回一個Promise！

我們經常會使用上述兩種寫法，也可能混用，有時候會遇到一些情況，這邊舉例子說明：

并行的不用多說，很簡單，直接循環發出請求就可以或者用Promise.all。如果我們需要串行循環一個請求，那么應該怎么做呢？

我們需要實現一個依次分別延遲1秒輸出值，一共5秒的程序，首先是Promise的循環，這個循環就相對來說比較麻煩：

我們經常會犯的錯誤！就是不重視函數名與函數執行對程序的影響

先不說循環，我們先舉一個錯誤的例子，現在有一個延遲函數

const setDelay = (millisecond) => {
  return new Promise((resolve, reject)=>{
      if (typeof millisecond != "number") reject(new Error("參數必須是number類型"));
      setTimeout(()=> {
        resolve(`我延遲了${millisecond}毫秒后輸出的`)
      }, millisecond)
  })
}

我們想做到：“循環串行執行延遲一秒的Promise函數”，期望的結果應該是：隔一秒輸出我延遲了1000毫秒后輸出的，一共經過循環3次。我們想當然地寫出下列的鏈式寫法：

arr = [setDelay(1000), setDelay(1000), setDelay(1000)]
arr[0]
.then(result=>{
  console.log(result)
  return arr[1]
})
.then(result=>{
  console.log(result)
  return arr[2]
})
.then(result=>{
  console.log(result)
})

但是很不幸，你發現輸出是并行的！！！也就是說一秒鐘一次性輸出了3個值！。那么這是什么情況呢？其實很簡單。。。就是你把setDelay(1000)這個直接添加到數組的時候，其實就已經執行了，注意你的執行語句(1000)

這其實是基礎，是語言的特性，很多粗心的人（或者是沒有好好學習JS的人）會以為這樣就把函數添加到數組里面了，殊不知函數已經執行過一次了。

那么這樣導致的后果是什么呢？也就是說數組里面保存的每個Promise狀態都是resolve完成的狀態了，那么你后面鏈式調用直接return arr[1]其實沒有去請求，只是立即返回了一個resolve的狀態。所以你會發現程序是相當于并行的，沒有依次順序調用。

那么解決方案是什么呢？直接函數名存儲函數的方式（不執行Promise）來達到目的

我們這樣改一下程序：

arr = [setDelay, setDelay, setDelay]
arr[0](1000)
.then(result=>{
  console.log(result)
  return arr[1](1000)
})
.then(result=>{
  console.log(result)
  return arr[2](1000)
})
.then(result=>{
  console.log(result)
})

上述相當于把Promise預先存儲在一個數組中，在你需要調用的時候，再去執行。當然你也可以用閉包的方式存儲起來，需要調用的時候再執行。

上述寫法是不優雅的，次數一多就GG了，為什么要提一下上面的then，其實就是為了后面的for循環做鋪墊。

上面的程序根據規律改寫一下：

arr = [setDelay, setDelay, setDelay]
var temp
temp = arr[0](1000)
for (let i = 1; i <= arr.length; i++) {
    if (i == arr.length) {
      temp.then(result=>{
        console.log("完成了");
      })
      break;
    }
    temp = temp.then((result)=>{
        console.log(result);
        return arr[i-1](1000)
    });
}

錯誤處理可以在for循環中套入try...catch，或者在你每個循環點進行.then().catch()、都是可行的。如果你想提取成公共方法，可以再改寫一下，利用遞歸的方式：

首先你需要閉包你的Promise程序

function timeout(millisecond) {
  return ()=> {
    return setDelay(millisecond);
  }
}

如果不閉包會導致什么后果呢？不閉包的話，你傳入的參數值后，你的Promise會馬上執行，導致狀態改變，如果用閉包實現的話，你的Promise會一直保存著，等到你需要調用的時候再使用。而且最大的優點是可以預先傳入你需要的參數。

改寫數組：

arr = [timeout(2000), timeout(1000), timeout(1000)]

提取方法，Promise數組作為參數傳入：

const syncPromise = function (arr) {
  const _syncLoop = function (count) {
    if (count === arr.length - 1) { // 是最后一個就直接return
      return arr[count]()
    }
    return arr[count]().then((result)=>{
      console.log(result);
      return _syncLoop(count+1) // 遞歸調用數組下標
    });
  }
  return _syncLoop(0);
}

使用：

syncPromise(arr).then(result=>{
  console.log(result);
  console.log("完成了");
})
// 或者 添加到Promise類中方法
Promise.syncAll = function syncAll(){
  return syncPromise
}// 以后可以直接使用
Promise.syncAll(arr).then(result=>{
  console.log(result);
  console.log("完成了");
})

還有大神總結了一個reduce的寫法，其實就是一個迭代數組的過程：

const p = arr.reduce((total, current)=>{
    return total.then((result)=>{
        console.log(result);
        return current()
    })
}, Promise.resolve("程序開始"))
p.then((result)=>{
    console.log("結束了", result);
})

都是可行的，在Promise的循環領域。

現在就來介紹一下牛逼的async/await實戰，上述的代碼你是不是要看吐了，的確，我也覺得好麻煩啊，那么如果用async/await能有什么改進嗎？這就是它出現的意義：

模擬上述代碼的循環：

(async ()=>{
    arr = [timeout(2000), timeout(1000), timeout(1000)]
    for (var i=0; i < arr.length; i++) {
        result = await arr[i]();
        console.log(result);
    }
})()

。。。這就完了？是的。。。就完了，是不是特別方便！！！！語義化也非常明顯！！這里為了保持與上面風格一致，沒有加入錯誤處理，所以實戰的時候記得加入你的try...catch語句來捕獲錯誤。

一直想總結一下Promise和async/await，很多地方可能總結得不夠，已經盡力擴大篇幅了，后續有新的知識點和總結點可能會更新（未完待續），但是入門這個基本夠用了。

我們常說什么async/await的出現淘汰了Promise，可以說是大錯特錯，恰恰相反，正因為有了Promise，才有了改良版的async/await，從上面分析就可以看出，兩者是相輔相成的，缺一不可。

想學好async/await必須先精通Promise，兩者密不可分，有不同意見和改進的歡迎指導！

前端小白，大家互相交流，peace！