一、promise與async和await有什么用

都是為了解決異步回調產生的。

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

async和await遵循的是Generator 函數的語法糖，他擁有內置執(zhí)行器，不需要額外的調用直接會自動執(zhí)行并輸出結果，它返回的是一個Promise對象。

二、Promise的作用

底層代碼是怎樣的？

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

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

在之前沒有promise的時候，我們處理多個異步請求回調是一層一層嵌套的，第一個函數的輸出是第二個函數的輸入，比如：

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

如果業(yè)務邏輯復雜，且基本上我們對于請求回來的數據還得做一系列的處理，這樣的代碼對于后期的可閱讀性和可維護性都十分不友好，那么promise的鏈式調用就解決了多層異步嵌套回調的問題，且代碼可讀性和可維護性都會提高。

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

new Promise調用的時候需要傳入一個executor執(zhí)行器函數，該函數會立即執(zhí)行；

executor函數接收兩個參數，resolve，reject，分別對應異步請求成功執(zhí)行和失敗執(zhí)行；

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

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

promise有一個then方法，接收兩個參數onFulfilled、onRejected，分別為異步請求成功的回調和失敗的回調。

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函數，首先得來了解一下Generator函數。因為 async和await遵循的是 Generator 函數的語法糖

Generator函數生成器的理解：

是es6引入的一個數據類型，相當于一個狀態(tài)機，內部封裝了很多狀態(tài)，同時返回一個迭代器對象?？梢酝ㄟ^這個迭代器遍歷相關的值和狀態(tài)。

Generator的顯著特點是可以多次返回，每次的返回值作為迭代器的一部分保存下來，可以被我們顯式調用。

• async函數是使用async關鍵字聲明的函數。 async函數是AsyncFunction構造函數的實例， 并且其中允許使用await關鍵字。async和await關鍵字讓我們可以用一種更簡潔的方式寫出基于Promise的異步行為，而無需刻意地鏈式調用promise。
• async函數可能包含0個或者多個await表達式。await表達式會暫停整個async函數的執(zhí)行進程并出讓其控制權，只有當其等待的基于promise的異步操作被兌現或被拒絕之后才會恢復進程。promise的解決值會被當作該await表達式的返回值。使用async / await關鍵字就可以在異步代碼中使用普通的try / catch代碼塊。
• await關鍵字只在async函數內有效。如果你在async函數體之外使用它，就會拋出語法錯誤 SyntaxError 。
• async/await的目的為了簡化使用基于promise的API時所需的語法。async/await的行為就好像搭配使用了生成器和promise。
• async函數一定會返回一個promise對象。如果一個async函數的返回值看起來不是promise，那么它將會被隱式地包裝在一個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 是應用層的解決方案，它有一個規(guī)范，不同的語言也可以實現，它只能異步的處理錯誤，在js 里它本質上是一個對象。
• async-await 是語言層的解決方案，它可以說是 Promise的補充，可以讓用戶像編寫同步代碼一樣編寫異步代碼，通過try-catch 可以同步地處理錯誤。
• Promise 更多應用在函數封裝中，async用在函數的使用中。
• Promise鏈式調用相當于一個新的回調地獄， 也不能統(tǒng)一處理異常。 Promise 本身是同步函數，多個不會等待。
• async-await用同步的寫法使得可讀性更強，同時方便 try-catch 捕獲異常， async-await 有明確的前后關系，可讀性好。

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