一、promise與async和await有什么用

都是為了解決異步回調(diào)產(chǎn)生的。

Promise的字面意思是“承諾”，即承諾會(huì)執(zhí)行。Promise好比容器，里面存放著一些未來(lái)才會(huì)執(zhí)行完畢的事件的結(jié)果，而這些結(jié)果一旦生成是無(wú)法改變的。

async和await遵循的是Generator 函數(shù)的語(yǔ)法糖，他擁有內(nèi)置執(zhí)行器，不需要額外的調(diào)用直接會(huì)自動(dòng)執(zhí)行并輸出結(jié)果，它返回的是一個(gè)Promise對(duì)象。

二、Promise的作用

底層代碼是怎樣的？

promise的精髓是狀態(tài)的傳遞，方法的封裝者并不需要關(guān)心異步方法的執(zhí)行結(jié)果，方法的封裝者通過狀態(tài)傳遞拿到執(zhí)行結(jié)果書寫自己的邏輯，使得封裝者與使用者的真正解耦。

這種狀態(tài)傳遞有種發(fā)布訂閱的味道，回調(diào)地獄并非書寫上的地獄而詬病，promise 的鏈?zhǔn)秸{(diào)用也會(huì)有地獄之感，而回調(diào)地獄真正為之詬病的是沒有真正解耦。async 是 promise 的語(yǔ)法糖。

在之前沒有promise的時(shí)候，我們處理多個(gè)異步請(qǐng)求回調(diào)是一層一層嵌套的，第一個(gè)函數(shù)的輸出是第二個(gè)函數(shù)的輸入，比如：

ajax.get(url, function(id) {
    ajax.get({id}, function() {
        ajax.get({name}, function() {
            ......
        })
    })
})

如果業(yè)務(wù)邏輯復(fù)雜，且基本上我們對(duì)于請(qǐng)求回來(lái)的數(shù)據(jù)還得做一系列的處理，這樣的代碼對(duì)于后期的可閱讀性和可維護(hù)性都十分不友好，那么promise的鏈?zhǔn)秸{(diào)用就解決了多層異步嵌套回調(diào)的問題，且代碼可讀性和可維護(hù)性都會(huì)提高。

promise有三種狀態(tài)pending、fulfilled、reject

new Promise調(diào)用的時(shí)候需要傳入一個(gè)executor執(zhí)行器函數(shù)，該函數(shù)會(huì)立即執(zhí)行；

executor函數(shù)接收兩個(gè)參數(shù)，resolve，reject，分別對(duì)應(yīng)異步請(qǐng)求成功執(zhí)行和失敗執(zhí)行；

設(shè)置默認(rèn)狀態(tài)stratus為pending，請(qǐng)求成功狀態(tài)下的值為value，默認(rèn)值為undefined，請(qǐng)求失敗下的值為reason，默認(rèn)值為unfined

promise的狀態(tài)值只能從pending -> fulfilled 或者 pending -> reject，狀態(tài)一旦確定就不會(huì)再改變

promise有一個(gè)then方法，接收兩個(gè)參數(shù)onFulfilled、onRejected，分別為異步請(qǐng)求成功的回調(diào)和失敗的回調(diào)。

promise的使用

function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log('data==>', data)
      return 'done'
    })
    .catch(err => {
      console.log('err==>', err)
    })
makeRequest()

三、async和await的使用

要理解async函數(shù)，首先得來(lái)了解一下Generator函數(shù)。因?yàn)?async和await遵循的是 Generator 函數(shù)的語(yǔ)法糖

Generator函數(shù)生成器的理解：

是es6引入的一個(gè)數(shù)據(jù)類型，相當(dāng)于一個(gè)狀態(tài)機(jī)，內(nèi)部封裝了很多狀態(tài)，同時(shí)返回一個(gè)迭代器對(duì)象。可以通過這個(gè)迭代器遍歷相關(guān)的值和狀態(tài)。

Generator的顯著特點(diǎn)是可以多次返回，每次的返回值作為迭代器的一部分保存下來(lái)，可以被我們顯式調(diào)用。

• async函數(shù)是使用async關(guān)鍵字聲明的函數(shù)。 async函數(shù)是AsyncFunction構(gòu)造函數(shù)的實(shí)例， 并且其中允許使用await關(guān)鍵字。async和await關(guān)鍵字讓我們可以用一種更簡(jiǎn)潔的方式寫出基于Promise的異步行為，而無(wú)需刻意地鏈?zhǔn)秸{(diào)用promise。
• async函數(shù)可能包含0個(gè)或者多個(gè)await表達(dá)式。await表達(dá)式會(huì)暫停整個(gè)async函數(shù)的執(zhí)行進(jìn)程并出讓其控制權(quán)，只有當(dāng)其等待的基于promise的異步操作被兌現(xiàn)或被拒絕之后才會(huì)恢復(fù)進(jìn)程。promise的解決值會(huì)被當(dāng)作該await表達(dá)式的返回值。使用async / await關(guān)鍵字就可以在異步代碼中使用普通的try / catch代碼塊。
• await關(guān)鍵字只在async函數(shù)內(nèi)有效。如果你在async函數(shù)體之外使用它，就會(huì)拋出語(yǔ)法錯(cuò)誤 SyntaxError 。
• async/await的目的為了簡(jiǎn)化使用基于promise的API時(shí)所需的語(yǔ)法。async/await的行為就好像搭配使用了生成器和promise。
• async函數(shù)一定會(huì)返回一個(gè)promise對(duì)象。如果一個(gè)async函數(shù)的返回值看起來(lái)不是promise，那么它將會(huì)被隱式地包裝在一個(gè)promise中。

Async/Await的使用

function getJSON() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      let json = Math.random() * 2
      if (json > 1) {
        resolve(json)
      } else {
        reject(json)
      }
    }, 2000)
  })
}
const makeRequest = async () => {
  const value = await getJSON()
  console.log(value)
  return value
}
makeRequest()

四、promise與async、await的區(qū)別

• Promise 是應(yīng)用層的解決方案，它有一個(gè)規(guī)范，不同的語(yǔ)言也可以實(shí)現(xiàn)，它只能異步的處理錯(cuò)誤，在js 里它本質(zhì)上是一個(gè)對(duì)象。
• async-await 是語(yǔ)言層的解決方案，它可以說是 Promise的補(bǔ)充，可以讓用戶像編寫同步代碼一樣編寫異步代碼，通過try-catch 可以同步地處理錯(cuò)誤。
• Promise 更多應(yīng)用在函數(shù)封裝中，async用在函數(shù)的使用中。
• Promise鏈?zhǔn)秸{(diào)用相當(dāng)于一個(gè)新的回調(diào)地獄， 也不能統(tǒng)一處理異常。 Promise 本身是同步函數(shù)，多個(gè)不會(huì)等待。
• async-await用同步的寫法使得可讀性更強(qiáng)，同時(shí)方便 try-catch 捕獲異常， async-await 有明確的前后關(guān)系，可讀性好。

到此這篇關(guān)于JavaScript Promise與async/await作用詳細(xì)講解的文章就介紹到這了,更多相關(guān)JS Promise內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

最新評(píng)論