JavaScript异步编程常见面试题汇总

什么是异步编程？

异步编程是 JavaScript 中的一种编程模式，是指在执行某个操作时，不会阻塞后续代码的执行，而是通过回调函数或者 Promise 等方式在异步操作完成后再进行后续的处理。

常见的异步编程方式

回调函数

回调函数是异步编程中最基础也是最常见的方式。在一个异步操作完成后，通过调用传递给该异步操作的回调函数来处理异步操作的结果。以下是一个通过回调函数处理异步操作的示例：

function fetchData(callback) {
  setTimeout(function() {
    callback('data');
  }, 1000);
}

function handleData(data) {
  console.log(data);
}

fetchData(handleData);

Promise

Promise 是一种更为高级的异步编程模式，使用 Promise 可以减少回调函数嵌套，使代码更为简洁易读。以下是一个通过 Promise 处理异步操作的示例：

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  });
}

fetchData().then(function(data) {
  console.log(data);
});

async/await

async/await 是 ECMAScript 2017 中新引入的异步编程方式，使用 async/await 可以更为直观的处理异步操作。以下是一个通过 async/await 处理异步操作的示例：

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  });
}

async function getData() {
  const data = await fetchData();
  console.log(data);
}

getData();

常见的异步编程问题及解决方法

问题1：如何解决回调地狱？

回调地狱指的是回调函数嵌套过多，导致代码难以维护的问题。可以通过 Promise 或 async/await 等方式解决。

Promise解决回调地狱

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  });
}

function handleData(data) {
  console.log(data);
}

fetchData()
  .then(function(data) {
    return fetchData();
  })
  .then(handleData);

async/await解决回调地狱

function fetchData() {
  return new Promise(function(resolve, reject) {
    setTimeout(function() {
      resolve('data');
    }, 1000);
  });
}

async function getData() {
  const data1 = await fetchData();
  const data2 = await fetchData();
  console.log(data1, data2);
}

getData();

问题2：如何处理异步操作中的异常？

在异步操作中，可能会发生异常导致代码执行出错，需要正确地处理异常。

在 Promise 中处理异常

function fetchData() {
  return new Promise(function(resolve, reject) {
    try {
      setTimeout(function() {
        resolve('data');
        throw new Error('error');
      }, 1000);
    } catch(e) {
      reject(e);
    }
  });
}

fetchData()
  .then(function(data) {
    console.log(data);
  })
  .catch(function(error) {
    console.log(error);
  });

在 async/await 中处理异常

function fetchData() {
  return new Promise(function(resolve, reject) {
    try {
      setTimeout(function() {
        resolve('data');
        throw new Error('error');
      }, 1000);
    } catch(e) {
      reject(e);
    }
  });
}

async function getData() {
  try {
    const data = await fetchData();
    console.log(data);
  } catch (error) {
    console.log(error);
  }
}

getData();