在传统开发中，我们常常使用回调函数来处理异步编程。然而，随着技术的发展，ES6 中异步编程的新特性 async 和 await 的出现，让我们能更加简便地处理异步任务，从繁琐的回调函数中解脱出来。
async 和 await 简介
async 和 await 是 ES2017 中新引入的关键字，可以让我们更加方便地处理异步任务。async 函数用来表示函数是异步的，而 await 关键字则用来等待异步操作完成。
通过使用 async 和 await，我们可以将异步操作写成同步操作的形式，提高代码的可读性和可维护性。
async function getUserData() { return fetch('https://jsonplaceholder.typicode.com/todos/1') .then(response => response.json()) .then(data => data) }
在上例中，我们使用 async 关键字声明函数为异步函数，然后使用 fetch API 异步获取 JSON 数据。返回的数据是一个 Promise。
await 使用
我们可以通过添加关键字 await 等待异步操作完成，然后返回结果。
async function getUserData() { const response = await fetch('https://jsonplaceholder.typicode.com/todos/1') const data = await response.json() return data }
在上例中，我们使用 await 等待 fetch 方法异步获取数据的返回结果。如果 fetch 返回一个 rejected 状态，那么 await 将抛出异常。
使用 async 和 await 后，我们可以避免回调函数的嵌套，还可以更方便地捕获异常。
Promise 相关点
在使用 await的时候，await 所在的函数的返回值是 Promise 对象，如果此 Promise 对象 resolved 一个非 Promise 对象的值并被此 Promise 对象的 then 方法的处理函数接收，但是如果此 Promise 对象 resolved 一个 Promise 对象的值并被此 Promise 对象的 then 方法的处理函数接收，那么 await 表达式的返回值就是这个 Promise 对象的 resolved 状态的值。
-- -------------------- ---- ------- ----- -------- ------------------------- - ----- ------ - ----- --------------------- ----- ---------- - ----- ---------------------- ------ ----------- - ----------------------------------------- -------- - -------------------- ---展开代码
在上面的代码中，当执行到 const symbol = await getStockSymbol(name); 时，getStockPriceByName 函数将立即返回一个 resolved 状态的 Promise 对象，并且这个 Promise 对象 resolved 的值为 getStockSymbol 函数返回的 Promise 对象的 resolved 状态的值，而这个值的类型是字符串。此时，getStockPriceByName 函数并没有执行完。
当 const stockPrice = await getStockPrice(symbol); 执行时，getStockPriceByName 函数会暂停执行，等待 getStockPrice 函数返回的 Promise 对象 resolved，这个 resolved 状态的值的类型是一个数值类型。此时，getStockPriceByName 函数才真正执行完毕。
最后，getStockPriceByName 函数将把 getStockPrice 函数返回的 resolved 状态值作为后面的 then 的处理函数的接受值。
错误处理
使用 async 和 await 时，错误处理比较简单，可以用 try/catch 语句捕获异常。
async function myFunction() { try { const result = await someFunction(); } catch (error) { console.log(error); } }
在上述代码中，try 语句块包含一个异步调用 await someFunction()，如果发生错误，catch 语句将捕捉到并输出错误信息。
变量的并发赋值
在 Promise 中，实现并发调用 Promise，得到每一个 Promise 的结果是需要 Promise.all 方法。然后将结果映射到变量上。而使用 async/await 可以非常方便地简写这个操作。
-- -------------------- ---- ------- ----- -------- ----------- - ----- --------- -------- -------- - - ----- ----------- ----- ----------- ----- ----------- -- -- ----------- -- -------------------- -------- --------- - ------------展开代码
结束语
在我们使用 ES6 的 async 和 await 机制，可以清晰的表达异步调用的流程和处理方式，代码可读性和可维护性得到大大提高。我们要在实际的开发中加强对这方面的理解和应用，在掌握异步编程的基础之后，熟练使用 async 和 await 可以给我们的项目带来很多帮助。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/67be958c0c976d473a2a0ca1
