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

2023年8月11日 135次阅读来源: Winer

媒介

關於JavaScript這門言語，實在我更喜好稱它為ECMAScript，從一最先我們就已涉及到異步編程，然則多半JavaScript開發者從來沒有認真思考過本身遞次中的異步，究竟是怎樣完成的，以及為何會湧現。然則由於開發者對JavaScript的需乞降項目標龐雜水平日漸擴展，特別是對異步的治理愈來愈使人痛楚，這一切致使我們迫切須要越發壯大、越發合理的異步要領，幫我們治理異步的狀況。

最先

在JavaScript異步編程歷史上，我以為一共湧現了三種異步編程體式格局

回調
Promise
Async/Await

由於我不想回憶起很久以前，被回調地獄安排的恐驚，就跳過回調這一塊，讀者們自行相識（篇幅有限）
（PS：好吧，new Date() --> Sat May 19 2018 23:55:17 GMT+0800 (中國標準時候),寫完洗洗睡吧）

Promise

什麼是Promise

Promise是一種範式。在這裏扯一句：回調是將我們封裝的回調函數交給第三方（以至多是外部代碼），緊接着我們期待它能夠挪用我們封裝的回調函數。那末Promise就是不把本身的遞次通報給第三方，而是第三方給我們供應此使命什麼時刻終了，然後由我們本身決定下一步做什麼。

想象一個場景，本日早上，我去買早飯，到了一個快餐店，
點了一個漢堡（
做了一次請求），我就在收銀台上
支付了這個漢堡的價錢（
相似於參數的通報），然則我並沒有馬上獲得這個漢堡，而是拿到了一個訂單號，這個時刻我就只須要坐着守候小姐姐叫到我的訂單號（
這個時刻已產生了一個Promise），在這个中心守候的時候，我們能夠做一些其他的事變，比方打電話、玩兒手機、談事情等等……（
這就是合理應用中心的閑暇時候，在js的異步中也能夠完整表現，但不在本文的討論範圍內），直到小姐姐叫到XX號碼的好了（
一個Promise實行終了），
效果平常有兩種，要麼是
漢堡做好了（
Promise中的resolve()中設置的值），要麼是
漢堡賣完了（Promise中的reject()中設置的值），這時候我就須要斟酌換其他食品了。假定漢堡做好了，我再過去拿我的漢堡，拿到事後，我能夠自行挑選吃掉它或許是拋棄它(固然這是不可能的)(
這就表現了細緻怎樣完成的決定權在我們)
這個例子我以為照樣很抽象的，哈哈哈。

怎樣建立並運用一個Promise

起首我先通知你Promise的決定效果：resovle是完成、reject是謝絕

  // -----------------------> Promise 的建立與運用
  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的高等運用要領

當你看到這一節時，須要用到自定義的模仿數據請求類
該api類在這兒
 或許檢察本項目標源碼，配合著閱讀本文章

// api.js
// 定義初始數據
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，依據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 {
  // 依據id獵取一個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)
    })
  }
  // 依據grade獵取一個User對象列表的Promise
  getUsersByGrade (grade) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const _users = users.filter(item => {
          return item.grade === grade
        })
        resolve(_users)
      }, 1000)
    })
  }
  // 依據user獵取一個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)
    })
  }
  // 依據userName獵取一個Father的Promise
  getFatherByChildName (childName) {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        const father = fathers.find(item => {
          return item.child === childName
        })
        resolve(father)
      }, 1000)
    })
  }
  // 拋出一個非常的Promise
  throw_Error () {
    return new Promise((resolve, reject) => {
      setTimeout(() => {
        reject(new Error('api.js-------->拋出了一個毛病'))
      }, 1000)
    })
  }
}

起首 const api = new Api()

Promise 的鏈式遞次形式
```
// -----------------------> Promise 的鏈式遞次形式
  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()
```
每一個Promise.then(..)中的返回值(縱然返回的不是Promise對象，由於Promise內涵機制會將其轉換為一個能夠運用的Promise)將會作為下一個Promise對象，即Promise.then( return ...)獲得的是一個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('沒有錯'))
    .catch(err => {
      console.log(err)
      foo.bar()
    })
    console.log('沒法捕獲末了一個catch的毛病：foo.bar()')
  }
  promise_lastErro()

Promise 的併發/并行 : Promise.all([...])
傳入的參數是一個Promise的數組
假如傳入的是[]，Promise.all([…])將馬上決定為完成
悉數Promise完成，Promise.all([…])完成
假如有一個被謝絕，則Promise.all([…])被謝絕

function promise_concurrent_1 () {
    const p1 = api.getUserById(1,Math.random() * 1000, () => { console.log('p1實行終了') })
    const p2 = api.getUserById(1,Math.random() * 1000, () => { console.log('p2實行終了') })
    Promise.all([p1, p2])
      .then(res => console.log('p1 p2 都實行終了'))
  }
  promise_concurrent_1()

Promise 的使命合作：競態(第一優先) : Promise.race([...])
傳入的參數是一個Promise的數組
假如傳入的是[]，Promise.race([…])將不會決定，一直處於掛起狀況
只需有一個Primise完成，Promise.race([…])則完成
假如有一個被謝絕，則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()
```
關於Promise.all([…])與Promise.race([…])的變體有許多
- Promise.none([…])：請求[…]悉數被謝絕，Promise.none([…])決定為完成
- Promise.any([…])：與Promise.all([…])相似，但只需求完成一個即可，然則會實行一切Promise
- Promise.first([…])：與Promise.any([…])相似，然則只需有第一個Promise決定為完成，就不關心背面的Promise了
- Promise.last([…])：與Promise.first([…])相反，末了一個完成的勝出

到此Promise的基礎用法就是這些了吧，不知不覺半個小時過去了。

Async/Await

什麼是Async/Await

我以為Async/Await是區分於Promise更文雅的表現，它能夠簡化Promise的大部分代碼，讓你的代碼看上去文雅雅觀而且大氣。而且我支撐你，在如今以至今後，對異步的治理盡量運用Async/Await。

Async/Await的運用

運用Async/Await替代鏈式promise(類比 —> Promise的鏈式遞次形式)

async function async_Request () {
    console.log('請稍等..此時是三個setTimeOut，每一個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的併發與并行

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的毛病捕獲

async function async_CatchErro () {
  try {
    await api.throw_Error()
    console.log('未捕獲到毛病？')
  } catch (error) {
    console.log(error)
  }
}
async_CatchErro()

Async/Await函數的相互挪用

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('數據獵取中...')
    const { user, userName, father } = await async_A()
    console.log('userInfo',{ user, userName, father })
}
async_B()

Async/Await檢索十條數據,串行

async function async_ten_serial (length = 10) {
    try {
      const users = []
      console.log('串行請求10條數據，每條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檢索十條數據,并行

async function async_ten_parallel (length = 10) {
    try {
      const usersPromise = []
      console.log('并行請求10條數據，每條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！本文並沒有講那些概念性的東西，只是簡樸地講這幾種完成用代碼形貌出來，更細緻的。請人人參考官方文檔，實在關於這篇文章的排版，我發明應當將Promise 與 Async/Await對照起來形貌，懶得從新排版了，冤枉列位手動對照了。(:
源碼地點
(PS: newDate() ---> Sun May 20 2018 00:42:15 GMT+0800 (中國標準時候))
不知不覺居然寫了靠近一個小時，溜了溜了，不修仙。

    原文作者：Winer
    原文地址: https://segmentfault.com/a/1190000014938839
    本文转自网络文章，转载此文章仅为分享知识，如有侵权，请联系博主进行删除。