在编写JavaScript代码时，我们经常需要处理像网络请求、文件读取和用户交互等异步操作。异步操作可以提高应用程序的响应能力和性能，因为它们不会阻塞主线程。本文将介绍异步编程的基础知识，包括回调函数、Promise和async/await。
回调函数
在JavaScript中，回调函数是一种处理异步操作的传统方式。当您发起一个异步操作时，您可以传递一个回调函数作为参数，该函数将在操作完成后被调用。例如，在以下示例中，我们使用XMLHttpRequest对象发起了一个HTTP GET请求，并使用回调函数处理响应：
-------- ------------ --------- -
--- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- - -- ----------- -- ---- -
----------------------------
-
--
----------------- ---- ------
-------------
-
------------------------------------------------------- ---------------------- -
--------------------------
---在这个例子中，我们创建了一个名为loadDoc的函数，该函数接受一个URL和一个回调函数作为参数。在函数内部，我们使用XMLHttpRequest对象发起了一个HTTP GET请求，并在onreadystatechange事件处理程序中检查响应状态。如果状态是4（即请求已完成）且status为200（即请求成功），则调用回调函数，并将响应文本作为参数传递给它。
这种回调函数的模式可以处理简单的异步操作，但是当您需要处理多个异步操作或进行错误处理时，代码会变得非常混乱和难以维护。此外，这种模式还容易出现回调地狱问题，即多个嵌套的回调函数导致代码难以阅读和理解。
Promise
Promise是一种用于处理异步操作的新方法。它提供了一种更清晰、更简单的方式来编写异步代码，并支持更好的错误处理。
Promise有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。当Promise处于pending状态时，它表示异步操作正在进行中。当操作完成时，Promise将变为fulfilled状态，并将结果作为参数传递给.then()方法。如果操作失败，则Promise将变为rejected状态，并将错误原因作为参数传递给.catch()方法。例如，在以下示例中，我们使用Promise处理上一个示例中的HTTP GET请求：
-------- ------------ -
------ --- ------------------------- ------- -
--- ----- - --- -----------------
------------------------ - ---------- -
-- ---------------- -- -- -
-- ------------ -- ---- -
---------------------------
- ---- -
------------------------
-
-
--
----------------- ---- ------
-------------
---
-
-------------------------------------------------------
---------------------------- -
--------------------------
--
---------------------- -
---------------------
---在这个例子中，我们创建了一个名为loadDoc的函数，该函数返回一个Promise对象。在Promise构造函数内部，我们执行与前面示例相同的HTTP GET请求，并使用resolve()和reject()方法将异步操作结果传递给Promise对象。
在调用loadDoc()函数时，我们使用.then()和.catch()方法处理异步操作结果和错误。如果异步操作成功，则.then()方法将被调用，并将响应文本作为参数传递给它。如果异步操作失败，则.catch()方法将被调用，并将错误原因作为参数传递给它。
使用Promise可以避免回调地狱问题，并提供更好的错误处理。但是，当您需要处理多个异步操作时，代码
来源：JavaScript中文网 ，转载请注明来源 本文地址：https://www.javascriptcn.com/post/5252