摘要：前言對于這門語言，其實(shí)我更喜歡稱它為，從一開始我們就已經(jīng)涉及到異步編程，但是多數(shù)開發(fā)者從來沒有認(rèn)真思考過自己程序中的異步，到底是怎么實(shí)現(xiàn)的，以及為什么會出現(xiàn)。

對于JavaScript這門語言，其實(shí)我更喜歡稱它為ECMAScript，從一開始我們就已經(jīng)涉及到異步編程，但是多數(shù)JavaScript開發(fā)者從來沒有認(rèn)真思考過自己程序中的異步，到底是怎么實(shí)現(xiàn)的，以及為什么會出現(xiàn)。但是由于開發(fā)者對JavaScript的需求和項(xiàng)目的復(fù)雜程度日漸擴(kuò)大，特別是對異步的管理越來越令人痛苦，這一切導(dǎo)致我們迫切需要更加強(qiáng)大、更加合理的異步方法，幫我們管理異步的狀態(tài)。

在JavaScript異步編程歷史上，我認(rèn)為一共出現(xiàn)了三種異步編程方式

回調(diào)

Promise

Async/Await

由于我不想回憶起很久以前，被回調(diào)地獄支配的恐懼，就跳過回調(diào)這一塊，讀者們自行了解（篇幅有限）
（PS：好吧，new Date() --> Sat May 19 2018 23:55:17 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間),寫完洗洗睡吧）

Promise是一種范式。在這里扯一句：回調(diào)是將我們封裝的回調(diào)函數(shù)交給第三方（甚至可能是外部代碼），緊接著我們期待它能夠調(diào)用我們封裝的回調(diào)函數(shù)。那么Promise就是不把自己的程序傳遞給第三方，而是第三方給我們提供此任務(wù)何時(shí)結(jié)束，然后由我們自己決定下一步做什么。

設(shè)想一個(gè)場景，今天早上，我去買早餐，到了一個(gè)快餐店，點(diǎn)了一個(gè)漢堡（做了一次請求），我就在收銀臺上支付了這個(gè)漢堡的價(jià)格（類似于參數(shù)的傳遞），但是我并沒有立即得到這個(gè)漢堡，而是拿到了一個(gè)訂單號，這個(gè)時(shí)候我就只需要坐著等待小姐姐叫到我的訂單號（這個(gè)時(shí)候已經(jīng)產(chǎn)生了一個(gè)Promise），在這個(gè)中間等待的時(shí)間，我們可以做一些其他的事情，比如打電話、玩兒手機(jī)、談工作等等......（這就是合理利用中間的空隙時(shí)間，在js的異步中也可以完全體現(xiàn)，但不在本文的探討范圍內(nèi)），直到小姐姐叫到XX號碼的好了（一個(gè)Promise執(zhí)行結(jié)束），結(jié)果一般有兩種，要么是漢堡做好了（Promise中的resolve()中設(shè)置的值），要么是漢堡賣完了（Promise中的reject()中設(shè)置的值），這時(shí)我就需要考慮換其他食物了。假設(shè)漢堡做好了，我再過去拿我的漢堡，拿到過后，我可以自行選擇吃掉它或者是扔掉它(當(dāng)然這是不可能的)(這就體現(xiàn)了具體怎么實(shí)現(xiàn)的決定權(quán)在我們)
這個(gè)例子我覺得還是很形象的，哈哈哈。

首先我先告訴你Promise的決議結(jié)果：resovle是完成、reject是拒絕

  // -----------------------> Promise 的創(chuàng)建與使用
  function creat_promise () {
    return new Promise((resolve, reject) => {
      resolve(42)
    })
  }
  function use_promise () {
    const a_promise = creat_promise()
    a_promise.then(res => console.log(res))
  }
  use_promise()

當(dāng)你看到這一節(jié)時(shí)，需要用到自定義的模擬數(shù)據(jù)請求類
該api類在這兒
或者查看本項(xiàng)目的源碼，配合著瀏覽本文章

// api.js
// 定義初始數(shù)據(jù)
const users = [
  { id: 1, name: "jack", year: 12, grade: 1 },
  { id: 2, name: "john", year: 12, grade: 1 },
  { id: 3, name: "winer", year: 12, grade: 2 }
]

// user的father，根據(jù)child鏈接
const fathers = [
  {id: 11, child: "jack", name: "jack_father"},
  {id: 22, child: "john", name: "john_father"},
  {id: 33, child: "winer", name: "winer_father"}
]

class Api {
  // 根據(jù)id獲取一個(gè)User對象的Promise
  getUserById (id, request_time = 1000, fn = function () {}) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const user = users.find(item => {
          return item.id === id
        })
        fn()
        resolve(user)
      }, request_time)
    })
  }
  // 根據(jù)grade獲取一個(gè)User對象列表的Promise
  getUsersByGrade (grade) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const _users = users.filter(item => {
          return item.grade === grade
        })
        resolve(_users)
      }, 1000)
    })
  }
  // 根據(jù)user獲取一個(gè)UserName的Promise
  getUserName (user, request_time = 1000) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const child = users.find(item => {
          return item.name === user.name
        })
        resolve(child.name)
      }, request_time)
    })
  }
  // 根據(jù)userName獲取一個(gè)Father的Promise
  getFatherByChildName (childName) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const father = fathers.find(item => {
          return item.child === childName
        })
        resolve(father)
      }, 1000)
    })
  }
  // 拋出一個(gè)異常的Promise
  throw_Error () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error("api.js-------->拋出了一個(gè)錯(cuò)誤"))
      }, 1000)
    })
  }
}

首先 const api = new Api()

Promise 的鏈?zhǔn)巾樞蚰Ｊ?/p>

// -----------------------> Promise 的鏈?zhǔn)巾樞蚰Ｊ?  function promise_chain () {
    api.getUserById(1)
      .then(res => {
        console.log(res)
        return api.getUserName(res)
      })
      .then(res => {
        console.log(res)
        return api.getFatherByChildName(res)
      })
      .then(res => console.log(res))
  }
  promise_chain()

每個(gè)Promise.then(..)中的返回值(即使返回的不是Promise對象，因?yàn)镻romise內(nèi)在機(jī)制會將其轉(zhuǎn)換為一個(gè)可以使用的Promise)將會作為下一個(gè)Promise對象，即Promise.then( return ...)得到的是一個(gè)Promise對象，因此可以不斷地Promise.then( return ... ).then( return ... ).then( return ... ).then( return ... ).then( return ... ).then()......

Promise 的catch

function promise_lastErro () {
    api.throw_Error()
    .then(res => console.log("沒有錯(cuò)"))
    .catch(err => {
      console.log(err)
      foo.bar()
    })
    console.log("無法捕捉最后一個(gè)catch的錯(cuò)誤：foo.bar()")
  }
  promise_lastErro()

Promise 的并發(fā)/并行 : Promise.all([...])
傳入的參數(shù)是一個(gè)Promise的數(shù)組
如果傳入的是[]，Promise.all([...])將立即決議為完成
全部Promise完成，Promise.all([...])完成
如果有一個(gè)被拒絕，則Promise.all([...])被拒絕

function promise_concurrent_1 () {
    const p1 = api.getUserById(1,Math.random() * 1000, () => { console.log("p1執(zhí)行完畢") })
    const p2 = api.getUserById(1,Math.random() * 1000, () => { console.log("p2執(zhí)行完畢") })
    Promise.all([p1, p2])
      .then(res => console.log("p1 p2 都執(zhí)行完畢"))
  }
  promise_concurrent_1()

Promise 的任務(wù)競爭：競態(tài)(第一優(yōu)先) : Promise.race([...])
傳入的參數(shù)是一個(gè)Promise的數(shù)組
如果傳入的是[]，Promise.race([...])將不會決議，始終處于掛起狀態(tài)
只要有一個(gè)Primise完成，Promise.race([...])則完成
如果有一個(gè)被拒絕，則Promise.race([...])被拒絕

function promise_compete () {
    const p1 = api.getUserById(1, 2000)
    const p2 = api.getUserById(2)
    Promise.race([p1, p2]).then(res => console.log(res))
  }
  promise_compete()

關(guān)于Promise.all([...])與Promise.race([...])的變體有很多

Promise.none([...])： 要求[...]全部被拒絕，Promise.none([...])決議為完成

Promise.any([...])： 與Promise.all([...])類似，但只要求完成一個(gè)即可，但是會執(zhí)行所有Promise

Promise.first([...])：與Promise.any([...])類似，但是只要有第一個(gè)Promise決議為完成，就不關(guān)心后面的Promise了

Promise.last([...])：與Promise.first([...])相反，最后一個(gè)完成的勝出

到此Promise的基本用法就是這些了吧，不知不覺半個(gè)小時(shí)過去了。

我認(rèn)為Async/Await是區(qū)別于Promise更優(yōu)雅的體現(xiàn)，它可以簡化Promise的大部分代碼，讓你的代碼看上去優(yōu)雅美觀并且大氣。并且我支持你，在現(xiàn)在甚至以后，對異步的管理盡可能使用Async/Await。

使用Async/Await代替鏈?zhǔn)絧romise(類比 ---> Promise的鏈?zhǔn)巾樞蚰Ｊ?

async function async_Request () {
    console.log("請稍等..此時(shí)是三個(gè)setTimeOut，每個(gè)1s，需要等待3s")
    const user = await api.getUserById(1)
    const userName = await api.getUserName(user)
    const father = await api.getFatherByChildName(userName)
    console.log(father)
}
async_Request()

使用Async/Await的并發(fā)與并行

async function async_Concurrent () {
    const users = await api.getUsersByGrade(1)
    const usersPromise = users.map(item => api.getUserName(item, Math.random() * 1000))
    Promise.all(usersPromise).then(res => {
      console.log(res)
    })
}
async_Concurrent()

使用Async/Await的錯(cuò)誤捕捉

async function async_CatchErro () {
  try {
    await api.throw_Error()
    console.log("未捕捉到錯(cuò)誤？")
  } catch (error) {
    console.log(error)
  }
}
async_CatchErro()

Async/Await函數(shù)的互相調(diào)用

async function async_A () {
    const user = await api.getUserById(2)
    const userName = await api.getUserName(user)
    const father = await api.getFatherByChildName(userName)
    return { user, userName, father }
}
async function async_B () {
    console.log("數(shù)據(jù)獲取中...")
    const { user, userName, father } = await async_A()
    console.log("userInfo",{ user, userName, father })
}
async_B()

Async/Await檢索十條數(shù)據(jù),串行

async function async_ten_serial (length = 10) {
    try {
      const users = []
      console.log("串行請求10條數(shù)據(jù)，每條1秒，請稍等10秒鐘....")
      while(users.length < 10) {
        users.push(await api.getUserById(1))
      }
      console.log(users)
    } catch (error) {
      console.log(error)
    }
}
async_ten_serial()

Async/Await檢索十條數(shù)據(jù),并行

async function async_ten_parallel (length = 10) {
    try {
      const usersPromise = []
      console.log("并行請求10條數(shù)據(jù)，每條1秒，請稍等1秒鐘....")
      while(usersPromise.length < 10) {
        usersPromise.push(api.getUserById(2))
      }
      const users = await Promise.all(usersPromise)
      console.log(users)
    } catch (error) {
      console.log(error)
    }
}
async_ten_parallel()

ok！本文并沒有講那些概念性的東西，只是簡單地講這幾種實(shí)現(xiàn)用代碼描述出來，更詳細(xì)的。請大家參考官方文檔，其實(shí)對于這篇文章的排版，我發(fā)現(xiàn)應(yīng)該將Promise 與 Async/Await對比起來描述，懶得重新排版了，委屈各位手動(dòng)對比了。(:
源碼地址
(PS: newDate() ---> Sun May 20 2018 00:42:15 GMT+0800 (中國標(biāo)準(zhǔn)時(shí)間))
不知不覺竟然寫了接近一個(gè)小時(shí)，溜了溜了，不修仙。