掌握异步 JavaScript：回调、Promise 和 Async/Await-js教程-PHP中文网

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

Barbara Streisand

发布： 2024-12-20 11:11:09

原创

554 人浏览过

Mastering Asynchronous JavaScript: Callbacks, Promises, and 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 中管理异步操作的机制。任务按以下顺序排队并执行：

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

示例：

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

登录后复制

5.常见陷阱

忘记处理错误:
- 始终使用 .catch() 或 try/catch 来实现承诺。
阻塞主线程:
- 避免长时间运行的同步任务。
回调地狱:
- 使用 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中文网其他相关文章！