上述已經(jīng)寫好了關(guān)于then里面三個(gè)回調(diào)中第二個(gè)回調(diào)（reject）會(huì)與catch沖突的問題，那么我們實(shí)際寫的時(shí)候，參數(shù)捕獲的方式基本寫得少，catch的寫法會(huì)用到更多。

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

答案當(dāng)然是：不需要！，哪有那么麻煩的寫法，只需要在末尾catch一下就可以了，因?yàn)殒準(zhǔn)綄懛ǖ腻e(cuò)誤處理具有“冒泡”特性，鏈?zhǔn)街腥魏我粋€(gè)環(huán)節(jié)出問題，都會(huì)被catch到，同時(shí)在某個(gè)環(huán)節(jié)后面的代碼就不會(huì)執(zhí)行了。

既然說到這里，我們把catch移到第一個(gè)鏈?zhǔn)降姆祷乩锩鏁?huì)發(fā)生什么事呢？看下面代碼：

setDelay("2000")
.then((result)=>{
  console.log("第一步完成了");
  console.log(result)
  return setDelaySecond(3)
})
.catch((err)=>{ // 這里移到第一個(gè)鏈?zhǔn)饺ィl(fā)現(xiàn)上面的不執(zhí)行了，下面的繼續(xù)執(zhí)行
  console.log(err);
})
.then((result)=>{
  console.log("第二步完成了");
  console.log(result);
})

驚喜的發(fā)現(xiàn)，鏈?zhǔn)嚼^續(xù)走下去了??！輸出如下（undefined是因?yàn)樯弦粋€(gè)then沒有返回一個(gè)Promise）：

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

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

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

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

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

那么你到這測(cè)試一下，你會(huì)發(fā)現(xiàn)輸出是這個(gè)：輸出 undefined。這是為什么呢？這也是我想強(qiáng)調(diào)的一個(gè)地方?。?！

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

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

我推薦的寫法是帶上then，規(guī)范一點(diǎn)，當(dāng)然你沒有返回也是沒問題的，demo會(huì)照常執(zhí)行。下面這種寫法是不帶返回值的寫法：

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

所以可以發(fā)現(xiàn)，只要你用await聲明的異步返回，是必須“等待”到有返回值的時(shí)候，代碼才繼續(xù)執(zhí)行下去。

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

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

你會(huì)發(fā)現(xiàn)，輸出是這樣的：

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

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

所以更準(zhǔn)確的說法應(yīng)該是用await聲明的Promise異步返回，必須“等待”到有返回值的時(shí)候，代碼才繼續(xù)執(zhí)行下去。

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

事實(shí)是當(dāng)然可以：

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

輸出：

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

這里只要注意一點(diǎn)：then的執(zhí)行總是最后的。

現(xiàn)在我們看一下實(shí)戰(zhàn)：

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

比如上面兩個(gè)延時(shí)函數(shù)（寫在上面），比如我想先延時(shí)1秒，在延遲2秒，再延時(shí)1秒，最后輸出“完成”，這個(gè)過程，如果用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);
})

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

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

看！是不是沒有冗余的長(zhǎng)長(zhǎng)的鏈?zhǔn)酱a，語義化也非常清楚，非常舒服，那么你看到這里，一定還發(fā)現(xiàn)了，上面的catch我們是不是沒有在async中實(shí)現(xiàn)？接下去我們就分析一下async/await如何處理錯(cuò)誤？

因?yàn)閍sync函數(shù)返回的是一個(gè)Promise，所以我們可以在外面catch住錯(cuò)誤。

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函數(shù)的catch中捕獲錯(cuò)誤，當(dāng)做一個(gè)Pormise處理，同時(shí)你不想用這種方法，可以使用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); // 這里捕獲錯(cuò)誤
  }
})()

當(dāng)然這時(shí)候你就不需要在外面catch了。

通常我們的try...catch數(shù)量不會(huì)太多，幾個(gè)最多了，如果太多了，說明你的代碼肯定需要重構(gòu)了，一定沒有寫得非常好。還有一點(diǎn)就是try...catch通常只用在需要的時(shí)候，有時(shí)候不需要catch錯(cuò)誤的地方就可以不寫。

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

我們知道await后面跟著的肯定是一個(gè)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: 參數(shù)必須是number類型，并且小于等于10
    at Promise (test4.html:19)
    at new Promise ()
    at setDelaySecond (test4.html:18)
    at test4.html:56
undefined
我延遲了1000毫秒后輸出的
完成了

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

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

返回的是一個(gè)數(shù)組，第一個(gè)是錯(cuò)誤，第二個(gè)是異步結(jié)果，使用如下：

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

首先我們要明確的是，Promise本身是無法中止的，Promise本身只是一個(gè)狀態(tài)機(jī)，存儲(chǔ)三個(gè)狀態(tài)（pending，resolved，rejected），一旦發(fā)出請(qǐng)求了，必須閉環(huán)，無法取消，之前處于pending狀態(tài)只是一個(gè)掛起請(qǐng)求的狀態(tài)，并不是取消，一般不會(huì)讓這種情況發(fā)生，只是用來臨時(shí)中止鏈?zhǔn)降倪M(jìn)行。

中斷（終止）的本質(zhì)在鏈?zhǔn)街兄皇菕炱?，并不是本質(zhì)的取消Promise請(qǐng)求，那樣是做不到的，Promise也沒有cancel的狀態(tài)。

不同于Promise的鏈?zhǔn)綄懛?，寫在async/await中想要中斷程序就很簡(jiǎn)單了，因?yàn)檎Z義化非常明顯，其實(shí)就和一般的function寫法一樣，想要中斷的時(shí)候，直接return一個(gè)值就行，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 "我退出了，下面的不進(jìn)行了";
    // return; 
    // return false; // 這些寫法都可以
    // return null;
  }
  console.log(await setDelay(1000));
  console.log("完成了");
};
demo().then(result=>{
  console.log(result);
})
.catch(err=>{
  console.log(err);
})

實(shí)質(zhì)就是直接return返回了一個(gè)Promise，相當(dāng)于return Promise.resolve("我退出了下面不進(jìn)行了")，當(dāng)然你也可以返回一個(gè)“拒絕”：return Promise.reject(new Error("拒絕"))那么就會(huì)進(jìn)到錯(cuò)誤信息里去。

async函數(shù)實(shí)質(zhì)就是返回一個(gè)Promise！

我們經(jīng)常會(huì)使用上述兩種寫法，也可能混用，有時(shí)候會(huì)遇到一些情況，這邊舉例子說明：

并行的不用多說，很簡(jiǎn)單，直接循環(huán)發(fā)出請(qǐng)求就可以或者用Promise.all。如果我們需要串行循環(huán)一個(gè)請(qǐng)求，那么應(yīng)該怎么做呢？

我們需要實(shí)現(xiàn)一個(gè)依次分別延遲1秒輸出值，一共5秒的程序，首先是Promise的循環(huán)，這個(gè)循環(huán)就相對(duì)來說比較麻煩：

我們經(jīng)常會(huì)犯的錯(cuò)誤！就是不重視函數(shù)名與函數(shù)執(zhí)行對(duì)程序的影響

先不說循環(huán)，我們先舉一個(gè)錯(cuò)誤的例子，現(xiàn)在有一個(gè)延遲函數(shù)

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

我們想做到：“循環(huán)串行執(zhí)行延遲一秒的Promise函數(shù)”，期望的結(jié)果應(yīng)該是：隔一秒輸出我延遲了1000毫秒后輸出的，一共經(jīng)過循環(huán)3次。我們想當(dāng)然地寫出下列的鏈?zhǔn)綄懛ǎ?/p>

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)
})

但是很不幸，你發(fā)現(xiàn)輸出是并行的?。?！也就是說一秒鐘一次性輸出了3個(gè)值！。那么這是什么情況呢？其實(shí)很簡(jiǎn)單。。。就是你把setDelay(1000)這個(gè)直接添加到數(shù)組的時(shí)候，其實(shí)就已經(jīng)執(zhí)行了，注意你的執(zhí)行語句(1000)

這其實(shí)是基礎(chǔ)，是語言的特性，很多粗心的人（或者是沒有好好學(xué)習(xí)JS的人）會(huì)以為這樣就把函數(shù)添加到數(shù)組里面了，殊不知函數(shù)已經(jīng)執(zhí)行過一次了。

那么這樣導(dǎo)致的后果是什么呢？也就是說數(shù)組里面保存的每個(gè)Promise狀態(tài)都是resolve完成的狀態(tài)了，那么你后面鏈?zhǔn)秸{(diào)用直接return arr[1]其實(shí)沒有去請(qǐng)求，只是立即返回了一個(gè)resolve的狀態(tài)。所以你會(huì)發(fā)現(xiàn)程序是相當(dāng)于并行的，沒有依次順序調(diào)用。

那么解決方案是什么呢？直接函數(shù)名存儲(chǔ)函數(shù)的方式（不執(zhí)行Promise）來達(dá)到目的

我們這樣改一下程序：

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)
})

上述相當(dāng)于把Promise預(yù)先存儲(chǔ)在一個(gè)數(shù)組中，在你需要調(diào)用的時(shí)候，再去執(zhí)行。當(dāng)然你也可以用閉包的方式存儲(chǔ)起來，需要調(diào)用的時(shí)候再執(zhí)行。

上述寫法是不優(yōu)雅的，次數(shù)一多就GG了，為什么要提一下上面的then，其實(shí)就是為了后面的for循環(huán)做鋪墊。

上面的程序根據(jù)規(guī)律改寫一下：

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)
    });
}

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

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

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

如果不閉包會(huì)導(dǎo)致什么后果呢？不閉包的話，你傳入的參數(shù)值后，你的Promise會(huì)馬上執(zhí)行，導(dǎo)致狀態(tài)改變，如果用閉包實(shí)現(xiàn)的話，你的Promise會(huì)一直保存著，等到你需要調(diào)用的時(shí)候再使用。而且最大的優(yōu)點(diǎn)是可以預(yù)先傳入你需要的參數(shù)。

改寫數(shù)組：

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

提取方法，Promise數(shù)組作為參數(shù)傳入：

const syncPromise = function (arr) {
  const _syncLoop = function (count) {
    if (count === arr.length - 1) { // 是最后一個(gè)就直接return
      return arr[count]()
    }
    return arr[count]().then((result)=>{
      console.log(result);
      return _syncLoop(count+1) // 遞歸調(diào)用數(shù)組下標(biāo)
    });
  }
  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("完成了");
})

還有大神總結(jié)了一個(gè)reduce的寫法，其實(shí)就是一個(gè)迭代數(shù)組的過程：

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

都是可行的，在Promise的循環(huán)領(lǐng)域。

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

模擬上述代碼的循環(huán)：

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

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

一直想總結(jié)一下Promise和async/await，很多地方可能總結(jié)得不夠，已經(jīng)盡力擴(kuò)大篇幅了，后續(xù)有新的知識(shí)點(diǎn)和總結(jié)點(diǎn)可能會(huì)更新（未完待續(xù)），但是入門這個(gè)基本夠用了。

我們常說什么async/await的出現(xiàn)淘汰了Promise，可以說是大錯(cuò)特錯(cuò)，恰恰相反，正因?yàn)橛辛薖romise，才有了改良版的async/await，從上面分析就可以看出，兩者是相輔相成的，缺一不可。

想學(xué)好async/await必須先精通Promise，兩者密不可分，有不同意見和改進(jìn)的歡迎指導(dǎo)！

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