JavaScript 异步编程

事件循环 (Event Loop)

JavaScript 是单线程语言，通过事件循环机制实现异步操作。

javascript复制
console.log('1');

setTimeout(() => {
  console.log('2');
}, 0);

Promise.resolve().then(() => {
  console.log('3');
});

console.log('4');

// 输出顺序: 1, 4, 3, 2

Promise

Promise 是异步编程的一种解决方案，比传统的回调函数更加强大。

基本用法

javascript复制
const promise = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('操作成功');
  }, 1000);
});

promise
  .then(result => {
    console.log(result); // "操作成功"
  })
  .catch(error => {
    console.error(error);
  });

Promise 链式调用

javascript复制
fetch('/api/data')
  .then(response => response.json())
  .then(data => {
    console.log(data);
    return processData(data);
  })
  .then(processed => {
    console.log('处理完成:', processed);
  })
  .catch(error => {
    console.error('请求失败:', error);
  });

async/await

async/await 是基于 Promise 的语法糖，让异步代码看起来像同步代码。

基本用法

javascript复制
async function fetchData() {
  try {
    const response = await fetch('/api/data');
    const data = await response.json();
    console.log(data);
    return data;
  } catch (error) {
    console.error('获取数据失败:', error);
    throw error;
  }
}

并行执行

javascript复制
async function fetchMultiple() {
  const [user, posts] = await Promise.all([
    fetch('/api/user'),
    fetch('/api/posts')
  ]);
  
  return {
    user: await user.json(),
    posts: await posts.json()
  };
}

常见面试题

1. 实现 Promise.all

javascript复制
function promiseAll(promises) {
  return new Promise((resolve, reject) => {
    const results = [];
    let completed = 0;
    
    promises.forEach((promise, index) => {
      Promise.resolve(promise)
        .then(result => {
          results[index] = result;
          completed++;
          
          if (completed === promises.length) {
            resolve(results);
          }
        })
        .catch(reject);
    });
    
    if (promises.length === 0) {
      resolve([]);
    }
  });
}

2. 实现防抖函数

javascript复制
function debounce(fn, delay) {
  let timer = null;
  
  return function(...args) {
    clearTimeout(timer);
    timer = setTimeout(() => {
      fn.apply(this, args);
    }, delay);
  };
}

最佳实践

1. 总是处理 Promise 拒绝：使用 .catch() 或 try...catch
2. 避免嵌套 Promise：使用链式调用或 async/await
3. 合理使用并行执行：Promise.all() 用于并行请求
4. 注意内存泄漏：及时清理事件监听器和定时器