原文地点=>
6 Reasons Why JavaScript’s Async/Await Blows Promises Away (Tutorial)

Async/await 是建立在 Promises上的，不能被运用在平常回调以及节点回调

Async/await 和 Promises 很像，不壅塞

Async/await 代码看起来像同步代码。

语法

假定函数getJSON返回值是 Promise，而且 Promise resolves 有一些JSON 对象。我们只想挪用它而且纪录该JSON而且返回完成。

运用Promise

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

makeRequest()

运用Async

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

makeRequest()

区分

1. 在函数前有一个关键字async，await关键字只能在运用async定义的函数中运用。任何一个async函数都邑隐式返回一个promise，而且promise resolve 的值就是 return 返回的值 (例子中是”done”)
2. 不能在函数开首运用await

有哪些优点

1. 简约的代码

运用async函数能够让代码简约许多，不须要像Promise一样须要些then

1. 毛病处置惩罚

Promise 中不能自定义运用 try/catch 举行毛病捕捉，然则在 Async/await 中能够像处置惩罚同步代码处置惩罚毛病

const makeRequest = () => {
  try {
    getJSON()
      .then(result => {
        // this parse may fail
        const data = JSON.parse(result)
        console.log(data)
      })
      // uncomment this block to handle asynchronous errors
      // .catch((err) => {
      //   console.log(err)
      // })
  } catch (err) {
    console.log(err)
  }
}

Async/await

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

1. 前提语句

前提语句也和毛病捕捉是一样的，在 Async 中也能够像日常平凡平常运用前提语句

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

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    
  }
}

1. 中心值

在一些场景中，或许须要 promise1 去触发 promise2 再去触发 promise3，这个时刻代码应该是如许的

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return promise2(value1)
        .then(value2 => {
          // do something          
          return promise3(value1, value2)
        })
    })
}

如过 promise3 不须要 value1，嵌套将会变得简朴。假如你有强迫症，则将值1&2运用 promise.all() 分装起来。

const makeRequest = () => {
  return promise1()
    .then(value1 => {
      // do something
      return Promise.all([value1, promise2(value1)])
    })
    .then(([value1, value2]) => {
      // do something          
      return promise3(value1, value2)
    })
}

然则运用 Async 就会变得很简朴

const makeRequest = async () => {
  const value1 = await promise1()
  const value2 = await promise2(value1)
  return promise3(value1, value2)
}

1. 毛病栈

如过 Promise 一连挪用，关于毛病的处置惩罚是很贫苦的。你没法晓得毛病出在那里。

const makeRequest = () => {
  return callAPromise()
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => callAPromise())
    .then(() => {
      throw new Error("oops");
    })
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at callAPromise.then.then.then.then.then (index.js:8:13)
  })

然则关于 Async 就不一样了

const makeRequest = async () => {
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  await callAPromise()
  throw new Error("oops");
}

makeRequest()
  .catch(err => {
    console.log(err);
    // output
    // Error: oops at makeRequest (index.js:7:9)
  })