掌握异步 JavaScript：回调、Promise 和 Async/Await

异步 JavaScript

异步 JavaScript 允许独立于主线程执行任务，确保应用程序保持响应灵敏且高效。这对于处理 API 调用、文件读取或延迟等操作尤其重要。

---

1.同步与异步代码

同步代码：

• 按顺序逐行执行。
• 阻止后续操作，直到当前操作完成。

例子：

console.log("Start");
console.log("End");
// Output:
// Start
// End

异步代码：

• 允许在等待任务完成时继续其他操作。
• 使用回调、promise 或 async/await 来处理结果。

例子：

console.log("Start");
setTimeout(() => {
  console.log("Async Task");
}, 2000);
console.log("End");
// Output:
// Start
// End
// Async Task

---

2.异步编程方法

a.回调

回调是作为参数传递给另一个函数的函数，在异步任务完成后执行。

示例：

function fetchData(callback) {
  setTimeout(() => {
    callback("Data fetched!");
  }, 2000);
}

fetchData((data) => {
  console.log(data); // Output: Data fetched!
});

缺点：

• 链接多个异步操作时会导致“回调地狱”。

b.承诺

Promise 代表一个可能现在、将来或永远不可用的值。

承诺状态：

• 待处理：初始状态。
• 已完成：成功完成。
• 拒绝：失败。

创建一个 Promise:

const fetchData = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve("Data fetched!");
  }, 2000);
});

fetchData.then((data) => {
  console.log(data); // Output: Data fetched!
});

处理错误:

fetchData
  .then((data) => console.log(data))
  .catch((error) => console.error(error));

c.异步/等待

async 和await 为使用promise 提供了更易读的语法。

示例：

async function fetchData() {
  const data = await new Promise((resolve) => {
    setTimeout(() => resolve("Data fetched!"), 2000);
  });
  console.log(data); // Output: Data fetched!
}

fetchData();

错误处理:

async function fetchData() {
  try {
    const data = await new Promise((resolve, reject) => {
      reject("Error fetching data!");
    });
    console.log(data);
  } catch (error) {
    console.error(error); // Output: Error fetching data!
  }
}
fetchData();

---

3.异步用例

a.使用 Fetch 进行 API 调用

fetch API 是一种发出 HTTP 请求的现代方式。

async function getData() {
  const response = await fetch("https://jsonplaceholder.typicode.com/posts/1");
  const data = await response.json();
  console.log(data);
}
getData();

b.事件监听器

事件处理中的异步行为。

document.getElementById("button").addEventListener("click", () => {
  setTimeout(() => {
    console.log("Button clicked!");
  }, 1000);
});

c.计时器

使用 setTimeout 和 setInterval 来延迟。

setTimeout(() => console.log("Timeout executed!"), 2000);

---

4.事件循环

事件循环是 JavaScript 中管理异步操作的机制。任务按以下顺序排队并执行：

1. 调用堆栈：执行同步代码。
2. 任务队列：执行异步回调（例如，setTimeout）。
3. 微任务队列：执行承诺决议。

示例：

console.log("Start");
console.log("End");
// Output:
// Start
// End

---

5.常见陷阱

1. 忘记处理错误:

   • 始终使用 .catch() 或 try/catch 来实现承诺。

2. 阻塞主线程:

   • 避免长时间运行的同步任务。

3. 回调地狱:

   • 使用 Promise 或 async/await 来代替。

---

6.总结

Technique	Description
Callbacks	Functions executed after async tasks.
Promises	Chained mechanism for async tasks.
Async/Await	Cleaner syntax for handling promises.

理解和利用 JavaScript 中的异步编程对于创建响应迅速且高效的 Web 应用程序至关重要。通过掌握回调、Promise 和 async/await，开发人员可以有效地管理异步任务。

嗨，我是 Abhay Singh Kathayat！
我是一名全栈开发人员，拥有前端和后端技术方面的专业知识。我使用各种编程语言和框架来构建高效、可扩展且用户友好的应用程序。
请随时通过我的商务电子邮件与我联系：kaashshorts28@gmail.com。

以上是掌握异步 JavaScript：回调、Promise 和 Async/Await的详细内容。更多信息请关注PHP中文网其他相关文章！