前言
在前端开发中，异步操作是非常常见的。Promise 和 async/await 是两种处理异步操作的方式，它们可以让我们更优雅、简单地处理异步任务。本文将会介绍 Promise 和 async/await 的使用技巧和区别，希望对初学者有所帮助。
Promise
Promise 是 ES6 中引入的一个异步编程的解决方案。它可以将异步操作封装成一个 Promise 对象，从而更加优雅地处理异步任务。
Promise 的基本用法
Promise 的基本用法是通过 new Promise() 构造函数创建一个 Promise 对象，该对象有三种状态：
pending：初始状态，既不是成功，也不是失败状态。fulfilled：意味着操作成功完成。rejected：意味着操作失败。
Promise 对象有一个 then() 方法，用来指定 Promise 成功时的回调函数和失败时的回调函数。例如：
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
-------------------- -- -
------------------- -- ---------
---------------- -- -
-------------------
---在上面的代码中，我们创建了一个 Promise 对象，它的状态是 pending。在 1 秒钟后，我们调用了 resolve() 方法，将 Promise 对象的状态改为 fulfilled，并传递了一个字符串 'success'。然后我们调用 then() 方法，指定了 Promise 成功时的回调函数，打印了 'success'。
Promise 的链式调用
Promise 的 then() 方法可以链式调用，这种方式可以让我们更加优雅地处理异步任务。例如：
----- ------- - --- ----------------- ------- -- - ------------------- --- -------------------- -- - ------------------- -- --------- ------ -------- --------------- -- - ------------------- -- ------- ---
在上面的代码中，我们创建了一个 Promise 对象，它的状态是 fulfilled。然后我们调用了 then() 方法，指定了 Promise 成功时的回调函数，打印了 'success'。在回调函数中，我们返回了一个字符串 'hello'，然后又调用了 then() 方法，指定了新的回调函数，打印了 'hello'。
Promise 的错误处理
Promise 对象的错误处理可以通过 catch() 方法来实现。例如：
----- ------- - --- ----------------- ------- -- - ---------- ---------------- --------- --- --------------------- -- - --------------------------- -- ---------- ------ ---
在上面的代码中，我们创建了一个 Promise 对象，它的状态是 rejected。然后我们调用了 catch() 方法，指定了 Promise 失败时的回调函数，打印了错误信息。
Promise.all()
Promise.all() 方法可以接收一个 Promise 对象数组，等待所有的 Promise 对象都完成后，再执行回调函数。例如：
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
---------------------- ------------------------ -- -
-------------------- -- ------------ -----------
---在上面的代码中，我们创建了两个 Promise 对象，它们分别在 1 秒钟和 2 秒钟后完成。然后我们调用了 Promise.all() 方法，传入了这两个 Promise 对象，等待它们都完成后，打印了它们的值。
async/await
async/await 是 ES8 中引入的一个异步编程的解决方案。它是基于 Promise 的语法糖，可以让我们更加简洁地处理异步任务。
async/await 的基本用法
async/await 的基本用法是通过在函数前面加上 async 关键字来定义一个异步函数，然后在函数中使用 await 关键字来等待异步操作完成。例如：
----- -------- ----- -
----- ------- - --- ----------------- ------- -- -
------------- -- -
-------------------
-- ------
---
----- ------ - ----- --------
-------------------- -- ---------
-在上面的代码中，我们定义了一个异步函数 foo()，它在内部创建了一个 Promise 对象，并使用 await 关键字等待异步操作完成。在异步操作完成后，我们打印了 'success'。
async/await 的错误处理
async/await 的错误处理可以使用 try...catch 语句来实现。例如：
----- -------- ----- -
--- -
----- ------- - --- ----------------- ------- -- -
---------- ---------------- ---------
---
----- ------ - ----- --------
--------------------
- ----- ------- -
--------------------------- -- ---------- ------
-
-在上面的代码中，我们定义了一个异步函数 foo()，它在内部创建了一个 Promise 对象，并使用 await 关键字等待异步操作完成。在异步操作失败后，我们捕获了错误，并打印了错误信息。
async/await 和 Promise.all() 的区别
async/await 和 Promise.all() 都可以用来处理多个异步任务，但它们的区别在于 Promise.all() 等待所有任务都完成后再执行回调函数，而 async/await 等待某个任务完成后再执行下一个任务。例如：
----- -------- ----- -
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- -------- - --- ----------------- ------- -- -
------------- -- -
--------------------
-- ------
---
----- ------- - ----- ---------
--------------------- -- ----------
----- ------- - ----- ---------
--------------------- -- ----------
-
------在上面的代码中，我们定义了一个异步函数 foo()，它首先等待 promise1 完成，然后再等待 promise2 完成。这种方式可以让我们更加优雅地处理异步任务。
总结
Promise 和 async/await 都是处理异步任务的方式，它们可以让我们更加优雅、简单地处理异步操作。在使用时，我们需要注意它们的区别和使用技巧，以便更好地处理异步任务。
来源：JavaScript中文网 ，转载请联系管理员！ 本文地址：https://www.javascriptcn.com/post/6556d567d2f5e1655d134170