前端笔记（异步进阶）

2024-01-25 01:49:28

异步编程是前端开发中的重要概念，它允许开发者在等待服务器响应或其他耗时操作时继续执行其他任务，从而提高应用程序的性能和用户体验。在前端开发中，常见的异步编程技术包括回调函数、Promise和async/await。

await

await 是 JavaScript 中用于暂停执行 async 函数的，直到该 async 函数中的异步操作完成为止。await 可以与 Promise 一起使用，也可以与 fetch API 一起使用。

// 使用 await 暂停 async 函数执行，直到 Promise 完成
async function getPosts() {
  const response = await fetch('https://example.com/api/posts');
  const data = await response.json();
  return data;
}

// 使用 await 暂停 async 函数执行，直到 fetch API 完成
async function getPost(id) {
  const response = await fetch(`https://example.com/api/posts/${id}`);
  const data = await response.json();
  return data;
}

Callback

Callback 是 JavaScript 中用于指定在异步操作完成时要执行的函数。Callback 通常作为参数传递给异步函数，并在异步操作完成时被调用。

// 使用 callback 指定在异步操作完成时要执行的函数
fetch('https://example.com/api/posts', (response) => {
  response.json().then((data) => {
    console.log(data);
  });
});

宏任务

宏任务是 JavaScript 中的一类任务，它将在当前执行栈清空后才执行。宏任务包括 DOM 操作、 setTimeout()、setInterval() 和 I/O 操作等。

// DOM 操作是宏任务
document.getElementById('my-button').addEventListener('click', () => {
  console.log('Button clicked!');
});

// setTimeout() 是宏任务
setTimeout(() => {
  console.log('Timeout!');
}, 1000);

微任务

微任务是 JavaScript 中的一类任务，它将在当前执行栈清空后立即执行。微任务包括 Promise 的 resolve 和 reject 回调函数、MutationObserver 的回调函数以及一些其他内置函数的回调函数等。

// Promise 的 resolve 回调函数是微任务
new Promise((resolve, reject) => {
  resolve('Hello!');
}).then((data) => {
  console.log(data);
});

// MutationObserver 的回调函数是微任务
const observer = new MutationObserver((mutations) => {
  console.log(mutations);
});

observer.observe(document.body, {
  childList: true
});

DOM

DOM 是 Document Object Model 的缩写，它是一个表示 HTML 文档的结构化文档对象树。DOM 可以通过 JavaScript 操作，从而实现对 HTML 文档的动态修改。

// 通过 JavaScript 操作 DOM
const button = document.getElementById('my-button');

button.addEventListener('click', () => {
  const text = button.textContent;
  button.textContent = text + '!';
});