不同于一般的function的break的方式，如果你是這樣的操作：func().then().then().then().catch()的方式，你想在第一個(gè)then就跳出鏈?zhǔn)剑竺娴牟幌雸?zhí)行了，不同于一般的break;return null;return false等操作，可以說(shuō)，如何停止Promise鏈，是一大難點(diǎn)，是整個(gè)Promise最復(fù)雜的地方。

1.用鏈?zhǔn)降乃季S想，我們拒絕掉某一鏈，那么不就是相當(dāng)于直接跳到了catch模塊嗎？

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

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

但是很容易看到缺點(diǎn)：有時(shí)候你并不確定是因?yàn)殄e(cuò)誤跳出的，還是主動(dòng)跳出的，所以我們可以加一個(gè)標(biāo)志位：

return Promise.reject({
    isNotErrorExpection: true // 返回的地方加一個(gè)標(biāo)志位，判斷是否是錯(cuò)誤類(lèi)型，如果不是，那么說(shuō)明可以是主動(dòng)跳出循環(huán)的
}) 

或者根據(jù)上述的代碼判斷catch的地方輸出的類(lèi)型是不是屬于錯(cuò)誤對(duì)象的，是的話(huà)說(shuō)明是錯(cuò)誤，不是的話(huà)說(shuō)明是主動(dòng)跳出的，你可以自己選擇（這就是為什么要統(tǒng)一錯(cuò)誤reject的時(shí)候輸出new Error("錯(cuò)誤信息")的原因，規(guī)范！）

當(dāng)然你也可以直接拋出一個(gè)錯(cuò)誤跳出：

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

2.那有時(shí)候我們有這個(gè)需求：catch是放在中間（不是末尾），而同時(shí)我們又不想執(zhí)行catch后面的代碼，也就是鏈?zhǔn)降慕^對(duì)中止，應(yīng)該怎么辦？

我們看這段代碼：

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

這時(shí)候最后一步then還是執(zhí)行了，整條鏈都其實(shí)沒(méi)有本質(zhì)上的跳出，那應(yīng)該怎么辦呢？

敲黑板！！重點(diǎn)來(lái)了！我們看Promise/A+規(guī)范可以知道：

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

Promise其實(shí)是有三種狀態(tài)的：pending，resolve，rejected，那么我們一直在討論resolve和rejected這2個(gè)狀態(tài)，是不是忽視了pending這個(gè)狀態(tài)呢？pending狀態(tài)顧名思義就是請(qǐng)求中的狀態(tài)，成功請(qǐng)求就是resolve，失敗就是reject，其實(shí)他就是個(gè)中間過(guò)渡狀態(tài)。

而我們上面討論過(guò)了，then的下一層級(jí)其實(shí)得到的是上一層級(jí)返回的Promise對(duì)象，也就是說(shuō)原Promise對(duì)象與新對(duì)象狀態(tài)保持一致。那么重點(diǎn)來(lái)了，如果你想在這一層級(jí)進(jìn)行終止，是不是直接讓它永遠(yuǎn)都pending下去，那么后續(xù)的操作不就沒(méi)了嗎？是不是就達(dá)到這個(gè)目的了？？覺(jué)得有疑問(wèn)的可以參考Promise/A+規(guī)范。

我們直接看代碼：

setDelay(2000)
.then((result)=>{
  console.log(result)
  console.log("我進(jìn)行到第一步的");
  return setDelaySecond(1)
})
.then((result)=>{
  console.log(result);
  console.log("我主動(dòng)跳出循環(huán)了");
  // return Promise.reject("跳出循環(huán)的信息")
  // 重點(diǎn)在這
  return new Promise(()=>{console.log("后續(xù)的不會(huì)執(zhí)行")}) // 這里返回的一個(gè)新的Promise，沒(méi)有resolve和reject，那么會(huì)一直處于pending狀態(tài)，因?yàn)闆](méi)返回啊，那么這種狀態(tài)就一直保持著，中斷了這個(gè)Promise
})
.then((result)=>{
  console.log("我不執(zhí)行");
})
.catch((mes)=>{
  console.dir(mes)
  console.log("我跳出了");
})
.then((res)=>{
  console.log("我也不會(huì)執(zhí)行")
})

這樣就解決了上述，錯(cuò)誤跳出而導(dǎo)致無(wú)法完全終止Promise鏈的問(wèn)題。

但是！隨之而來(lái)也有一個(gè)問(wèn)題，那就是可能會(huì)導(dǎo)致潛在的內(nèi)存泄漏，因?yàn)槲覀冎肋@個(gè)一直處于pending狀態(tài)下的Promise會(huì)一直處于被掛起的狀態(tài)，而我們具體不知道瀏覽器的機(jī)制細(xì)節(jié)也不清楚，一般的網(wǎng)頁(yè)沒(méi)有關(guān)系，但大量的復(fù)雜的這種pending狀態(tài)勢(shì)必會(huì)導(dǎo)致內(nèi)存泄漏，具體的沒(méi)有測(cè)試過(guò)，后續(xù)可能會(huì)跟進(jìn)測(cè)試（nodeJS或webapp里面不推薦這樣），而我通過(guò)查詢(xún)也難以找到答案，這篇文章可以推薦看一下：從如何停掉 Promise 鏈說(shuō)起。可能對(duì)你有幫助在此種情況下如何做。

當(dāng)然一般情況下是不會(huì)存在泄漏，只是有這種風(fēng)險(xiǎn)，無(wú)法取消Promise一直是它的痛點(diǎn)。而上述兩個(gè)奇妙的取消方法要具體情形具體使用。

其實(shí)這幾個(gè)方法就簡(jiǎn)單了，就是一個(gè)簡(jiǎn)寫(xiě)串聯(lián)所有你需要的Promise執(zhí)行，具體可以參照阮一峰的ES6Promise.all教程。

我這上一個(gè)代碼例子

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

輸出的是一個(gè)數(shù)組，相當(dāng)于把all方法里面的Promise并行執(zhí)行，注意是并行。
相當(dāng)于兩個(gè)Promise同時(shí)開(kāi)始執(zhí)行，同時(shí)返回值，并不是先執(zhí)行第一個(gè)再執(zhí)行第二個(gè)，如果你想串行執(zhí)行，請(qǐng)參考我后面寫(xiě)的循環(huán)Promise循環(huán)串行（第4.2小節(jié)）。

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

什么是async/await呢？可以總結(jié)為一句話(huà)：async/await是一對(duì)好基友，缺一不可，他們的出生是為Promise服務(wù)的。可以說(shuō)async/await是Promise的爸爸，進(jìn)化版。為什么這么說(shuō)呢？且聽(tīng)我細(xì)細(xì)道來(lái)。

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

前文已經(jīng)說(shuō)過(guò)了，為了解決大量復(fù)雜不易讀的Promise異步的問(wèn)題，才出現(xiàn)的改良版。

這兩個(gè)基友必須同時(shí)出現(xiàn)，缺一不可，那么先說(shuō)一下Async：

async function process() {
}

上面可以看出，async必須聲明的是一個(gè)function，不要去聲明別的，要是那樣await就不理你了（報(bào)錯(cuò)）。

這樣聲明也是錯(cuò)的！

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

必須緊跟著function。接下來(lái)說(shuō)一下它的兄弟await。

上面說(shuō)到必須是個(gè)函數(shù)（function），那么await就必須是在這個(gè)async聲明的函數(shù)內(nèi)部使用，否則就會(huì)報(bào)錯(cuò)。

就算你這樣寫(xiě)，也是錯(cuò)的。

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

必須是直系（作用域鏈不能隔代），這樣會(huì)報(bào)錯(cuò)：Uncaught SyntaxError: await is only valid in async function。

講完了基本規(guī)范，我們接下去說(shuō)一下他們的本質(zhì)。

敲黑板！！！很重要！async聲明的函數(shù)的返回本質(zhì)上是一個(gè)Promise。

什么意思呢？就是說(shuō)你只要聲明了這個(gè)函數(shù)是async，那么內(nèi)部不管你怎么處理，它的返回肯定是個(gè)Promise。

看下列例子：

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

你會(huì)發(fā)現(xiàn)返回是這個(gè)：Promise?{: "我是Promise"}。

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

等同于：

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

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

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

上述三種寫(xiě)法都行，要看注釋細(xì)節(jié)都寫(xiě)在里面了！！像對(duì)待Promise一樣去對(duì)待async的返回值！！！

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

所以更準(zhǔn)確的說(shuō)法應(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("我由于上面的程序還沒(méi)執(zhí)行完，先不執(zhí)行“等待一會(huì)”");
    return result
}
demo().then(result=>{
  console.log("輸出",result);
})

輸出：

我是聲明值
我由于上面的程序還沒(méi)執(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類(lèi)型"));
      setTimeout(()=> {
        resolve(`我延遲了${millisecond}毫秒后輸出的`)
      }, millisecond)
  })
}
const setDelaySecond = (seconds) => {
  return new Promise((resolve, reject)=>{
      if (typeof seconds != "number" || seconds > 10) reject(new Error("參數(shù)必須是number類(lèi)型，并且小于等于10"));
      setTimeout(()=> {
        resolve(`我延遲了${seconds}秒后輸出的，注意單位是秒`)
      }, seconds * 1000)
  })
}

比如上面兩個(gè)延時(shí)函數(shù)（寫(xiě)在上面），比如我想先延時(shí)1秒，在延遲2秒，再延時(shí)1秒，最后輸出“完成”，這個(gè)過(guò)程，如果用then的寫(xiě)法，大概是這樣（嵌套地獄寫(xiě)法出門(mén)右拐不送）：

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)在我們來(lái)試一下async/await

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

看！是不是沒(méi)有冗余的長(zhǎng)長(zhǎng)的鏈?zhǔn)酱a，語(yǔ)義化也非常清楚，非常舒服，那么你看到這里，一定還發(fā)現(xiàn)了，上面的catch我們是不是沒(méi)有在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語(yǔ)句：

(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è)最多了，如果太多了，說(shuō)明你的代碼肯定需要重構(gòu)了，一定沒(méi)有寫(xiě)得非常好。還有一點(diǎn)就是try...catch通常只用在需要的時(shí)候，有時(shí)候不需要catch錯(cuò)誤的地方就可以不寫(xiě)。

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

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

(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類(lèi)型，并且小于等于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)然不是，你說(shuō)這代碼也忒丑了吧，亂七八糟的，寫(xiě)得別扭await又跟著catch。那么我們可以改進(jìn)一下，封裝一下提取錯(cuò)誤的代碼函數(shù)：

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

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

(async ()=>{
   // es6的寫(xiě)法，返回一個(gè)數(shù)組(你可以改回es5的寫(xiě)法覺(jué)得不習(xí)慣的話(huà))，第一個(gè)是錯(cuò)誤信息，第二個(gè)是then的異步返回?cái)?shù)據(jù)，這里要注意一下重復(fù)變量聲明可能導(dǎo)致問(wèn)題（這里舉例是全局，如果用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本身是無(wú)法中止的，Promise本身只是一個(gè)狀態(tài)機(jī)，存儲(chǔ)三個(gè)狀態(tài)（pending，resolved，rejected），一旦發(fā)出請(qǐng)求了，必須閉環(huán)，無(wú)法取消，之前處于pending狀態(tài)只是一個(gè)掛起請(qǐng)求的狀態(tài)，并不是取消，一般不會(huì)讓這種情況發(fā)生，只是用來(lái)臨時(shí)中止鏈?zhǔn)降倪M(jìn)行。

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

不同于Promise的鏈?zhǔn)綄?xiě)法，寫(xiě)在async/await中想要中斷程序就很簡(jiǎn)單了，因?yàn)檎Z(yǔ)義化非常明顯，其實(shí)就和一般的function寫(xiě)法一樣，想要中斷的時(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; // 這些寫(xiě)法都可以
    // 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ì)使用上述兩種寫(xiě)法，也可能混用，有時(shí)候會(huì)遇到一些情況，這邊舉例子說(shuō)明：

并行的不用多說(shuō)，很簡(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ì)來(lái)說(shuō)比較麻煩：

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

先不說(shuō)循環(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類(lèi)型"));
      setTimeout(()=> {
        resolve(`我延遲了${millisecond}毫秒后輸出的`)
      }, millisecond)
  })
}

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

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)輸出是并行的！！！也就是說(shuō)一秒鐘一次性輸出了3個(gè)值！。那么這是什么情況呢？其實(shí)很簡(jiǎn)單。。。就是你把setDelay(1000)這個(gè)直接添加到數(shù)組的時(shí)候，其實(shí)就已經(jīng)執(zhí)行了，注意你的執(zhí)行語(yǔ)句(1000)

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

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

那么解決方案是什么呢？直接函數(shù)名存儲(chǔ)函數(shù)的方式（不執(zhí)行Promise）來(lái)達(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ǔ)起來(lái)，需要調(diào)用的時(shí)候再執(zhí)行。

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

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

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()、都是可行的。如果你想提取成公共方法，可以再改寫(xiě)一下，利用遞歸的方式：

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

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

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

改寫(xiě)數(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類(lèi)中方法
Promise.syncAll = function syncAll(){
  return syncPromise
}// 以后可以直接使用
Promise.syncAll(arr).then(result=>{
  console.log(result);
  console.log("完成了");
})

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

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

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

現(xiàn)在就來(lái)介紹一下牛逼的async/await實(shí)戰(zhàn)，上述的代碼你是不是要看吐了，的確，我也覺(jué)得好麻煩啊，那么如果用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);
    }
})()

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

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

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

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

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