编辑“︁JavaScript异步模式”︁

{{Note|本文是JavaScript异步编程系列的一部分，适合初学者及需要深入理解异步模式的开发者。}}

= JavaScript异步模式 =

'''JavaScript异步模式'''是一种编程范式，用于处理非阻塞操作（如网络请求、文件读写、定时任务等），以避免阻塞主线程的执行。由于JavaScript是单线程语言，异步模式对于构建高效、响应迅速的应用程序至关重要。

== 介绍 ==
JavaScript的异步模式允许代码在等待某些操作（如I/O或计时器）完成时继续执行其他任务，而不是阻塞整个程序。常见的异步模式包括：
* '''回调函数（Callbacks）'''
* '''Promise对象'''
* '''async/await语法'''
* '''事件监听（Event Listeners）'''

异步编程的核心思想是：'''“现在启动，稍后完成”'''。例如，当发起一个网络请求时，程序不会等待响应返回，而是继续执行后续代码，待数据返回后再通过回调或Promise处理结果。

== 回调函数（Callbacks）==
回调函数是最基础的异步模式，通过将函数作为参数传递给另一个函数，在异步操作完成后调用。

=== 示例代码 ===
<syntaxhighlight lang="javascript">
function fetchData(callback) {
    setTimeout(() => {
        const data = { id: 1, name: "Example Data" };
        callback(data);
    }, 1000); // 模拟1秒延迟
}

fetchData((data) => {
    console.log("Data received:", data);
});
</syntaxhighlight>

'''输出：'''
<pre>
Data received: { id: 1, name: "Example Data" }
</pre>

=== 问题：回调地狱（Callback Hell）===
嵌套回调会导致代码难以维护：
<syntaxhighlight lang="javascript">
fetchData((data1) => {
    process(data1, (data2) => {
        save(data2, (result) => {
            console.log(result);
        });
    });
});
</syntaxhighlight>

== Promise对象 ==
Promise是ES6引入的异步解决方案，提供更清晰的链式调用（`.then()`和`.catch()`）。

=== 基本用法 ===
<syntaxhighlight lang="javascript">
function fetchData() {
    return new Promise((resolve, reject) => {
        setTimeout(() => {
            const success = true;
            if (success) {
                resolve({ id: 2, name: "Promise Data" });
            } else {
                reject("Error: Data fetch failed");
            }
        }, 1000);
    });
}

fetchData()
    .then(data => console.log("Success:", data))
    .catch(error => console.error("Failure:", error));
</syntaxhighlight>

'''输出：'''
<pre>
Success: { id: 2, name: "Promise Data" }
</pre>

=== Promise链 ===
解决回调地狱问题：
<syntaxhighlight lang="javascript">
fetchData()
    .then(process)
    .then(save)
    .then(result => console.log(result))
    .catch(error => console.error(error));
</syntaxhighlight>

== async/await ==
ES2017引入的语法糖，使异步代码看起来像同步代码。

=== 示例 ===
<syntaxhighlight lang="javascript">
async function loadData() {
    try {
        const data = await fetchData();
        console.log("Async/Await result:", data);
    } catch (error) {
        console.error(error);
    }
}
loadData();
</syntaxhighlight>

'''输出：'''
<pre>
Async/Await result: { id: 2, name: "Promise Data" }
</pre>

== 事件监听模式 ==
通过事件驱动处理异步操作（如DOM事件或Node.js的`EventEmitter`）。

=== 浏览器示例 ===
<syntaxhighlight lang="javascript">
document.getElementById("myButton").addEventListener("click", () => {
    console.log("Button clicked!");
});
</syntaxhighlight>

== 实际应用场景 ==
1. '''网络请求'''：使用`fetch`或`axios`获取API数据。
2. '''定时任务'''：`setTimeout`/`setInterval`。
3. '''文件操作'''：Node.js中的`fs.readFile`。
4. '''数据库查询'''：MongoDB的异步驱动。

=== 综合案例：并行请求 ===
使用`Promise.all`处理多个并行请求：
<syntaxhighlight lang="javascript">
const urls = ["api/data1", "api/data2"];
const requests = urls.map(url => fetch(url));

Promise.all(requests)
    .then(responses => Promise.all(responses.map(res => res.json())))
    .then(data => console.log("All data:", data));
</syntaxhighlight>

== 性能考虑 ==
* '''任务队列'''：异步任务通过任务队列（微任务和宏任务）调度。
* '''主线程阻塞'''：长时间运行的同步代码会延迟异步回调的执行。

<mermaid>
graph LR
    A[同步代码] --> B[任务队列]
    B --> C{事件循环}
    C -->|微任务| D[Promise回调]
    C -->|宏任务| E[setTimeout回调]
</mermaid>

== 数学表示 ==
异步操作的时间关系可以用以下公式表示：
<math>
T_{total} = T_{sync} + \max(T_{async1}, T_{async2}, \dots)
</math>
其中<math>T_{async}</math>代表各异步操作的完成时间。

== 总结 ==
{| class="wikitable"
|+ 异步模式对比
! 模式 !! 优点 !! 缺点
|-
| 回调函数 || 简单直接 || 容易产生回调地狱
|-
| Promise || 链式调用，错误集中处理 || 需要理解状态机
|-
| async/await || 代码直观，易于调试 || 必须包裹在`async`函数中
|}

{{Tip|在现代开发中，优先选择`async/await`与Promise结合的方式。}}

== 下一步 ==
* 学习[[JavaScript事件循环]]机制
* 探索[[Web Workers]]实现多线程

[[Category:编程语言]]
[[Category:JavaScript]]
[[Category:Javascript异步编程]]