js异步实现

异步实现的常见方法

JavaScript 中实现异步操作有多种方式，主要包括回调函数、Promise、async/await 和事件监听等。以下介绍几种常用的异步实现方法。

回调函数

回调函数是 JavaScript 中最基础的异步实现方式，通过将函数作为参数传递给另一个函数，在异步操作完成后执行回调。

function fetchData(callback) {
  setTimeout(() => {
    callback('Data fetched');
  }, 1000);
}

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

Promise

Promise 是 ES6 引入的异步解决方案，提供了更清晰的链式调用和错误处理机制。

function fetchData() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

fetchData()
  .then((data) => {
    console.log(data); // 输出: Data fetched
  })
  .catch((error) => {
    console.error(error);
  });

async/await

async/await 是 ES2017 引入的语法糖，基于 Promise，使异步代码的书写更加接近同步代码的风格。

async function fetchData() {
  return new Promise((resolve) => {
    setTimeout(() => {
      resolve('Data fetched');
    }, 1000);
  });
}

async function main() {
  try {
    const data = await fetchData();
    console.log(data); // 输出: Data fetched
  } catch (error) {
    console.error(error);
  }
}

main();

事件监听

通过事件监听机制实现异步操作，常见于 DOM 事件或自定义事件。

const EventEmitter = require('events');
const emitter = new EventEmitter();

emitter.on('dataFetched', (data) => {
  console.log(data); // 输出: Data fetched
});

setTimeout(() => {
  emitter.emit('dataFetched', 'Data fetched');
}, 1000);

异步操作的错误处理

异步操作中错误处理至关重要，不同的异步实现方式有不同的错误处理机制。

Promise 的错误处理

通过 .catch() 方法捕获 Promise 链中的错误。

fetchData()
  .then((data) => {
    console.log(data);
  })
  .catch((error) => {
    console.error('Error:', error);
  });

async/await 的错误处理

使用 try...catch 结构捕获异步函数中的错误。

async function main() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.error('Error:', error);
  }
}

并行异步操作

在某些场景下需要并行执行多个异步操作，可以通过 Promise.all 或 Promise.race 实现。

Promise.all

等待所有 Promise 完成，返回结果数组；如果有一个失败，立即抛出错误。

const promise1 = fetchData();
const promise2 = fetchData();

Promise.all([promise1, promise2])
  .then((results) => {
    console.log(results); // 输出: ['Data fetched', 'Data fetched']
  })
  .catch((error) => {
    console.error(error);
  });

Promise.race

返回最先完成的 Promise 结果（无论成功或失败）。

Promise.race([promise1, promise2])
  .then((result) => {
    console.log(result); // 输出最先完成的 Promise 的结果
  })
  .catch((error) => {
    console.error(error);
  });

微任务与宏任务

JavaScript 的事件循环机制中，异步任务分为微任务（Microtask）和宏任务（Macrotask），执行顺序不同。

• 微任务：包括 Promise.then、process.nextTick（Node.js）等，在当前任务结束后立即执行。
• 宏任务：包括 setTimeout、setInterval、I/O 操作等，在下一个事件循环中执行。

console.log('Start');

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

Promise.resolve().then(() => {
  console.log('Promise'); // 微任务
});

console.log('End');

// 输出顺序:
// Start
// End
// Promise
// Timeout

总结

JavaScript 的异步实现方式多样，从早期的回调函数到现代的 async/await，开发者可以根据需求选择合适的方式。Promise 和 async/await 提供了更清晰的代码结构和错误处理机制，而事件监听适用于特定场景。理解微任务和宏任务的执行顺序有助于更好地控制异步流程。