promise和async的區別

promise

• Promise，我們了解到promise是ES6為解決異步回調而生，避免出現這種回調地獄，那么為何又需要Async/Await呢？你是不是和我一樣對Async/Await感興趣以及想知道如何使用，下面一起來看看這篇文章：Async/Await替代Promise的6個理由。

什么是Async/Await

• async/await是寫異步代碼的新方式，使用的方式看起來像同步，以前的方法有回調函數和Promise。
• async/await是基於Promise實現的，它不能用於普通的回調函數。

Async/Await語法

使用Promise是這樣的:

const makeRequest = () =>
  getJSON()
    .then(data => {
      console.log(data)
      return "done"
    })

makeRequest()

• 示例中，getJSON函數返回一個promise，這個promise成功resolve時會返回一個JSON對象。我們只是調用這個函數，打印返回的JSON對象，然后返回”done”。

使用Async/Await是這樣的:

const makeRequest = async () => {
  console.log(await getJSON())
  return "done"
}

makeRequest()

它們有一些細微不同:

• 函數前面多了一個aync關鍵字。await關鍵字只能用在aync定義的函數內。async函數會隱式地返回一個promise，該promise的reosolve值就是函數return的值。(示例中reosolve值就是字符串”done”)
• 第1點暗示我們不能在最外層代碼中使用await，因為不在async函數內。

為什么Async/Await更好？

1. 簡潔

• 由示例可知，使用Async/Await明顯節約了不少代碼。我們不需要寫.then，不需要寫匿名函數處理Promise的resolve值，也不需要定義多余的data變量，還避免了嵌套代碼。這些小的優點會迅速累計起來，這在之后的代碼示例中會更加明顯。

2.錯誤處理

Async/Await讓try/catch可以同時處理同步和異步錯誤。在下面的promise示例中，try/catch不能處理JSON.parse的錯誤，因為它在Promise中。我們需要使用.catch，這樣錯誤處理代碼非常冗余。並且，在我們的實際生產代碼會更加復雜。

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // JSON.parse可能會出錯
        const data = JSON.parse(result)
        console.log(data)
      })
      // 取消注釋，處理異步代碼的錯誤
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

• 使用aync/await的話，catch能處理JSON.parse錯誤:

const makeRequest = async () => {
  try {
    // this parse may fail
    const data = JSON.parse(await getJSON())
    console.log(data)
  } catch (err) {
    console.log(err)
  }
}

3.條件語句

• 下面示例中，需要獲取數據，然后根據返回數據決定是直接返回，還是繼續獲取更多的數據。

// promise
const makeRequest = () => {
  return getJSON()
    .then(data => {
      if (data.needsAnotherRequest) {
        return makeAnotherRequest(data)
          .then(moreData => {
            console.log(moreData)
            return moreData
          })
      } else {
        console.log(data)
        return data
      }
    })
}

• 上面的代碼使用async/await編寫可以大大地提高可讀性:

const makeRequest = async () => {
  const data = await getJSON()
  if (data.needsAnotherRequest) {
    const moreData = await makeAnotherRequest(data);
    console.log(moreData)
    return moreData
  } else {
    console.log(data)
    return data    
  }
}

4. 調試

promise

• promise不能在返回表達式的箭頭函數中設置斷點
• 如果你在.then代碼塊中設置斷點，使用Step Over快捷鍵，調試器不會跳到下一個.then，因為它只會跳過異步代碼

async

• async/await能夠使得代碼調試更簡單
• 使用await/async時，你不再需要那么多箭頭函數，這樣你就可以像調試同步代碼一樣跳過await語句
• 如果它等到的不是一個 Promise 對象，那 await 表達式的運算結果就是它等到的東西。
• 如果它等到的是一個 Promise 對象，await 就忙起來了，它會阻塞后面的代碼，等着 Promise 對象 resolve，然后得到 resolve 的值，作為 await 表達式的運算結果。