你不知道的JavaScript ：Promise 與 Async/Await

wmui 發(fā)布于2019-08-22 17:23 / 2135人閱讀

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

前言

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

開(kāi)始

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

回調(diào)

Promise

Async/Await

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

Promise 什么是Promise

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

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

如何創(chuàng)建并使用一個(gè)Promise

首先我先告訴你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()

Promise的高級(jí)使用方法

當(dāng)你看到這一節(jié)時(shí)，需要用到自定義的模擬數(shù)據(jù)請(qǐng)求類
該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對(duì)象的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對(duì)象列表的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對(duì)象，因?yàn)镻romise內(nèi)在機(jī)制會(huì)將其轉(zhuǎn)換為一個(gè)可以使用的Promise)將會(huì)作為下一個(gè)Promise對(duì)象，即Promise.then( return ...)得到的是一個(gè)Promise對(duì)象，因此可以不斷地Promise.then( return ... ).then( return ... ).then( return ... ).then( return ... ).then( return ... ).then()......

Promise 的catch

function promise_lastErro () {
    api.throw_Error()
    .then(res => console.log("沒(méi)有錯(cuò)"))
    .catch(err => {
      console.log(err)
      foo.bar()
    })
    console.log("無(wú)法捕捉最后一個(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ù)競(jìng)爭(zhēng)：競(jìng)態(tài)(第一優(yōu)先) : Promise.race([...])
傳入的參數(shù)是一個(gè)Promise的數(shù)組
如果傳入的是[]，Promise.race([...])將不會(huì)決議，始終處于掛起狀態(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è)即可，但是會(huì)執(zhí)行所有Promise

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

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

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

Async/Await 什么是Async/Await

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

Async/Await的使用

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

async function async_Request () {
    console.log("請(qǐng)稍等..此時(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("串行請(qǐng)求10條數(shù)據(jù)，每條1秒，請(qǐng)稍等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("并行請(qǐng)求10條數(shù)據(jù)，每條1秒，請(qǐng)稍等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！本文并沒(méi)有講那些概念性的東西，只是簡(jiǎn)單地講這幾種實(shí)現(xiàn)用代碼描述出來(lái)，更詳細(xì)的。請(qǐng)大家參考官方文檔，其實(shí)對(duì)于這篇文章的排版，我發(fā)現(xiàn)應(yīng)該將Promise 與 Async/Await對(duì)比起來(lái)描述，懶得重新排版了，委屈各位手動(dòng)對(duì)比了。(:
源碼地址
(PS: newDate() ---> Sun May 20 2018 00:42:15 GMT+0800 (中國(guó)標(biāo)準(zhǔn)時(shí)間))
不知不覺(jué)竟然寫了接近一個(gè)小時(shí)，溜了溜了，不修仙。