在 JavaScript 中,处理异步操作时,过去我们通常会使用回调函数来处理。但是当代码嵌套多层时,很容易导致回调地狱(callback hell),使代码难以维护和理解。ES6 提供了一些新的特性,使我们更容易地处理异步操作,其中包括 Promise 和 async 和 await。
Promise
Promise 是一个代表了异步操作最终完成或失败的对象。Promises 可以让我们更好地处理异步操作的结果,而不需要嵌套回调函数。
一个 "promise" 有三个状态:
- pending:初始状态,不是 fulfilled(已完成)或 rejected(已失败)状态之一。
- fulfilled:意味着操作成功完成。
- rejected:意味着操作失败。
Promise 构造函数有两个参数:执行器函数和可选的错误处理函数。执行器函数在 Promise 对象中定义异步操作。如果操作成功,它会调用resolve()函数;如果出现错误,它会调用 reject() 函数,这会导致 Promise 对象被拒绝。
下面是一个简单的 Promise 示例:
-- -------------------- ---- ------- ----- --------- - --- ----------------- ------- -- - ------------- -- - --- ------ - -------------- --------- -- ------- - ---- - -------------------- ------ - ---- - ------------------ ------ - -- ------ --- --------------------- -- - -------------------- -------------- -- - ------------------- ---
在上述示例中,myPromise 代表了一个异步操作,它将在 1000 毫秒后返回成功或失败的结果。如果操作成功完成,将调用 resolve() 函数并返回 "Success!";如果操作失败,将调用 reject() 函数并返回 "Failed!"。
then()
方法是 Promise 的一个方法,它接收一个函数作为参数,该函数接收由 resolve() 方法返回的结果作为参数。catch()
方法也是 Promise 的一个方法,它接受一个函数作为参数,该函数用于处理异常情况。
async 和 await
async 和 await 是 ES2017(ES8)提供的一个步骤更进的异步编程模式,有效地解决了回调地狱的问题。
async 函数是一个返回 Promise 对象的函数。当函数前面有 async 关键字时,函数就会自动变成 Promise 对象。async 函数内部使用的 await 关键字会让 JavaScript 引擎暂停运行,直到 Promise 完成并返回一个结果。
下面是一个示例,该示例使用了 async 和 await 来处理异步操作:
-- -------------------- ---- ------- -------- --------- - ------ --- --------------- -- ------------------- ----- - ----- -------- ----------- - --- - ------------------ -------- -------- ----- ------------ ----- -------- - ----- ------------------------------------ ----- ---- - ----- ---------------- ----------------- ----- -------------------------------- - ----- ------- - --------------------- - - ------------
在上述示例中,我们使用了一个自定义的 delay 函数来模拟一个异步操作。fetchData 函数使用了 async 关键字,以及使用了 await 关键字来暂停代码的运行,直到 Promise 对象被解决。try/catch 语句用于在异步操作发生错误时捕获异常。
结论
使用 Promise 和 async 和 await 可以使我们更容易地处理异步操作,避免回调地狱,使我们的代码更易于维护和理解。这两个功能是 ES6 的关键新特性,任何人在学习 JavaScript 中处理异步操作时,都应该掌握它们。
来源:JavaScript中文网 ,转载请注明来源 https://www.javascriptcn.com/post/66fbe81b44713626016652ea