常用的几种异步实现方式-CFANZ编程社区

前端开发中，异步实现方式主要有以下几种：

回调函数（Callback）：
回调函数是异步编程的基本形式，通过将一个函数作为参数传递给另一个函数，在适当的时候调用该函数。回调函数可以用来处理异步操作的结果，如网络请求、定时器等。

function asyncOperation(callback) {
  setTimeout(() => {
    const result = '异步操作完成';
    callback(result);
  }, 1000);
}

function handleResult(result) {
  console.log(result);
}

asyncOperation(handleResult);

Promise：
Promise 是一种更加结构化的异步处理方式，它表示一个异步操作的最终结果。Promise 有三种状态：pending（进行中）、fulfilled（已成功）和rejected（已失败）。Promise 可以链式调用，使得异步操作更加简洁和易于理解。

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '异步操作完成';
      resolve(result);
    }, 1000);
  });
}

asyncOperation()
  .then(handleResult)
  .catch((error) => {
    console.error('发生错误:', error);
  });

function handleResult(result) {
  console.log(result);
}

async/await：
async/await 是基于 Promise 的一种更简洁的异步处理方式，它允许我们使用类似同步代码的方式编写异步代码。async 关键字用于声明一个异步函数，await 关键字用于等待一个 Promise 的结果。

async function main() {
  try {
    const result = await asyncOperation();
    handleResult(result);
  } catch (error) {
    console.error('发生错误:', error);
  }
}

function asyncOperation() {
  return new Promise((resolve, reject) => {
    setTimeout(() => {
      const result = '异步操作完成';
      resolve(result);
    }, 1000);
  });
}

function handleResult(result) {
  console.log(result);
}

main();

事件监听（Event Listener）：
事件监听是一种常见的异步处理方式，用于处理用户交互、网络请求等事件。通过为事件添加监听器，当事件触发时，监听器会自动执行相应的回调函数。

document.querySelector('button').addEventListener('click', handleClick);

function handleClick() {
  console.log('按钮被点击');
}

观察者模式（Observer Pattern）：
观察者模式是一种设计模式，用于在对象之间实现松耦合的通信。观察者模式包括观察者和被观察者两个角色，当被观察者的状态发生变化时，观察者会自动收到通知。

class Observable {
  constructor() {
    this.observers = [];
  }

  subscribe(observer) {
    this.observers.push(observer);
  }

  unsubscribe(observer) {
    this.observers = this.observers.filter((obs) => obs !== observer);
  }

  notify(data) {
    this.observers.forEach((observer) => observer.update(data));
  }
}

class Observer {
  update(data) {
    console.log('收到通知:', data);
  }
}

const observable = new Observable();
const observer = new Observer();

observable.subscribe(observer);
observable.notify('异步操作完成');

这些异步实现方式在前端开发中有各自的应用场景，根据实际需求选择合适的方式来处理异步操作。