在前端开发中，异步操作非常常见，例如请求后端接口获取数据、读取文件、动画效果等等。在 ES6 中，Promise 对象和 async 和 await 关键字的出现改变了异步编程的方式，让异步操作更加简单、直观和可维护。
Promise 对象
Promise 是一种异步编程的解决方案，可以将异步操作以同步的方式来写，避免了嵌套回调函数的问题。Promise 对象有三种状态：Pending（进行中）、Resolved（已完成）和Rejected（已失败）。当异步操作完成时，Promise 对象会从 Pending 状态变为 Resolved 或 Rejected 状态。
Promise 对象的基本用法
Promise 对象接收一个函数作为参数，该函数接收两个参数：resolve 和 reject，分别表示异步操作成功和失败时的回调函数。
const promise = new Promise((resolve, reject) => {
// 异步操作
if (异步操作成功) {
resolve(成功的结果);
} else {
reject(失败的原因);
}
});Promise 对象的链式调用
Promise 对象的链式调用可以让多个异步操作按照顺序执行，并且可以在其中任意一个异步操作出现错误时，跳过后续的操作并立即执行 catch 方法。
-- -------------------- ---- ------- ----- ------- - --- ----------------- ------- -- - -- ----- ------------- ----------------- -- - -- ----- ------ --------- ----------------- -- - -- ----- ------ --------- ---------------- -- - -- ---------- ---
async 和 await
async 和 await 是 ES7 中的新特性，可以让异步操作看起来像同步操作，让代码更加简洁易懂。
async
async 关键字可以将一个函数变为异步函数，该函数返回一个 Promise 对象。
async function func() {
// 异步操作
return 结果;
}await
await 关键字只能在异步函数中使用，可以等待一个 Promise 对象的结果，并将其赋值给一个变量。如果 Promise 对象返回的是 Resolved 状态，await 会返回 Promise 对象的结果；如果 Promise 对象返回的是 Rejected 状态，await 会抛出一个错误。
async function func() {
const result = await 异步操作的 Promise 对象;
// 后续操作
}async 和 await 的错误处理
在 async 函数中，可以使用 try...catch 语句来处理异步操作的错误。
async function func() {
try {
const result = await 异步操作的 Promise 对象;
// 后续操作
} catch (error) {
// 错误处理
}
}示例代码
下面是一个使用 Promise 对象和 async 和 await 的示例代码，用于获取 Github 用户的信息。
-- -------------------- ---- -------
-- -- ------- ---- ------ -----
----- ----------- - ---------- -- -
------ --- ----------------- ------- -- -
-------------------------------------------------
---------------- -- ----------------
------------ -- -
-- -------------- -
---------------------
- ---- -
--------------
-
--
-------------- -- -
--------------
---
---
--
-- -- ----- - ----- -- ------ -----
----- ------------ - ----- ---------- -- -
--- -
----- -------- - ----- ----------------------
----------------------
- ----- ------- -
---------------------
-
--
------------------------总结
ES6 的 Promise 对象和 ES7 的 async 和 await 关键字让异步编程更加简单、直观和可维护。在实际开发中，我们可以根据具体情况选择使用 Promise 对象或 async 和 await，以提高代码的可读性和可维护性。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/65795a49d2f5e1655d3613ae