文同步本人掘金平臺的原創翻譯文章：https://juejin.cn/post/6844903834456702984

異步的JavaScript從未如何簡單！過去段時間，我們使用回調。然后，我們使用promises。現在，我們有了異步功能函數。

異步函數能夠使得（我們）編寫異步JavaScript更加容易，但是，它自帶一套陷阱，對初學者很不友好。

在這個由兩部分組成的文章中，我想分享下你需要了解的有關異步函數的內容。【PS:另一部分暫不打算翻譯】

異步功能

異步功能函數包含async關鍵詞。你可以在正常的函數聲明中使用它：

async function functionName (arguments) {
  // Do something asynchronous
}
復制代碼

你也可以使用箭頭函數。

const functionName = async (arguments) => {
  // Do something asynchronous
}
復制代碼

異步函數總是返回promises

（異步函數）它不管你返回什么。其返回值都是promise。

const getOne = async _ => { 
  return 1 
} 

const promise = getOne()
console.log(promise) // Promise 
復制代碼

筆記：在接著往前讀之前，你應該知道什么是JavaScript Promises知識點，以及如何使用它們。否則，它會開始變得混亂。這篇文章會幫助你熟悉JavaScript Promise。

await關鍵字

當你調用promise時，你會在then中處理下一步，如下：

const getOne = async _ => { 
  return 1 
} 

getOne()
  .then(value => {
    console.log(value) // 1
  })
復制代碼

await關鍵字允許你等待promise去解析。一旦解析完promise，它就會返回參數傳遞給then調用。

const test = async _ => {
  const one = await getOne()
  console.log(one) // 1
}

test()
復制代碼

返回await

在返回承諾（promise）之前沒有必要等待（await）。你可以直接退回承諾。

如果你return await些內容，則你首先是解決了原先promise。然后，你從已經解析的內容（resolved value）創建新的promise。return await真的沒做什么有效的東西。無需額外的步驟。

// Don't need to do this 
const test = async _ => {
  return await getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })
復制代碼

// Do this instead
const test = async _ => {
  return getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })
復制代碼

注意：如果你不需要await，則不需要使用異步功能（async function）。上面的例子可以改寫如下:

// Do this instead
const test = _ => {
  return getOne()
}

test()
  .then(value => {
    console.log(value) // 1
  })
復制代碼

處理錯誤

如果一個promise出錯了，你可以使用catch調用來處理它，如下所示:

const getOne = async (success = true) => { 
  if (success) return 1
  throw new Error('Failure!')
} 

getOne(false)
  .catch(error => console.log(error)) // Failure!
復制代碼

如果你想在一個異步函數中處理錯誤，你需要調用try/catch。

const test = async _ => {
  try {
    const one = await getOne(false)
  } catch (error) {
    console.log(error) // Failure!
  }
}

test()
復制代碼

如果你有多個await關鍵字，錯誤處理可能變得很難看...

const test = async _ => {
  try {
    const one = await getOne(false)
  } catch (error) {
    console.log(error) // Failure!
  }

  try {
    const two = await getTwo(false)
  } catch (error) {
    console.log(error) // Failure!
  }

  try {
    const three = await getThree(false)
  } catch (error) {
    console.log(error) // Failure!
  }
}

test()
復制代碼

還有更好的方法。

我們知道異步函數總是返回一個promise。當我們調用promise時，我們可以在catch調用中處理錯誤。這意味著我們可以通過添加.catch來處理異步函數中的任何錯誤。

const test = async _ => {
  const one = await getOne(false)
  const two = await getTwo(false)
  const three = await getThree(false)
}

test()
  .catch(error => console.log(error)))
復制代碼

注意：Promise的catch方法只允許你捕獲一個錯誤。

多個awaits

await阻止JavaScript執行下一行代碼，直到promise解析為止。這可能會導致代碼執行速度減慢的意外效果。

為了實際演示這點，我們需要在解析promise之前創建一個延遲。我們可以使用sleep功能來創建延遲。

const sleep = ms => {
  return new Promise(resolve => setTimeout(resolve, ms))
}
復制代碼

ms是解析前等待的毫秒數。如果你傳入1000到sleep函數，JavaScript將等待一秒才能解析promise。

// Using Sleep
console.log('Now')
sleep(1000)
  .then(v => { 
    console.log('After one second') 
  })
復制代碼

假設getOne需要一秒來解析。為了創建這個延遲，我們將1000（一秒）傳入到sleep。一秒過后，sleeppromise解析后，我們返回值1。

const getOne = _ => {
  return sleep(1000).then(v => 1)
}
復制代碼

如果你使用await getOne()，你會發現在getOne解析之前需要一秒鐘。

const test = async _ => {
  console.log('Now')

  const one = await getOne()
  console.log(one)
}

test()
復制代碼

現在，假設你需要處理三個promises。每個promise都有一秒鐘的延遲。

const getOne = _ => {
  return sleep(1000).then(v => 1)
}

const getTwo = _ => {
  return sleep(1000).then(v => 2)
}

const getThree = _ => {
  return sleep(1000).then(v => 3)
}
復制代碼

如果你連續await這三個promises，你將要等待三秒才能解析完所有promises。這并不好，因為我們強迫JavaScript在做我們需要做的事情之前等待了兩秒鐘。

const test = async _ => {
  const one = await getOne()
  console.log(one)

  const two = await getTwo()
  console.log(two)

  const three = await getThree()
  console.log(three)

  console.log('Done')
}

test()
復制代碼

如果getOne，getTwo和getThree可以同時獲取，你將節省兩秒鐘。你可以使用Promise.all同時獲取這三個promises。

有三個步驟：

1. 創建三個promises
2. 將三個promises添加到一個數組中
3. 使用Promise.all來awaitpromises數組

如下所示：

const test = async _ => {
  const promises = [getOne(), getTwo(), getThree()]
  console.log('Now')

  const [one, two, three] = await Promise.all(promises)
  console.log(one)
  console.log(two)
  console.log(three)

  console.log('Done')
}

test()
復制代碼

這就是你需要了解的基本異步功能函數！我希望這篇文章為你掃除了些障礙。

筆記：這篇文章是Learn JavaScript的修改摘錄。如果你發現本文有用，你可能需要去查看它。

function sleep(time) { return new Promise(function(res) {
setTimeout(() => {
res()
}, time);
})
}

<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<style>
 div { width: 100px; height: 100px; background: lightgreen;
 } </style>
</head>
<body>
<div></div>
</body>
</html>

div { background: red;
}

const div = document.querySelecot('div');
console.log(div);

<header>
<link rel="stylesheet" href="/css/sleep3000-common.css">
<script src="/js/logDiv.js"></script></header>

<body>
<div></div>
<script src="/js/sleep3000-logDiv.js"></script>
<style>
 div { background: lightgrey;
 } </style>
<script src="/js/sleep5000-logDiv.js"></script>
<link rel="stylesheet" href="/css/common.css"></body>