Javascript 回调函数、Promise 和 async/await

一级目录

二级目录

三级目录

回调函数概念

在JavaScript中，回调函数（Callback Function）是一个非常重要的概念，它允许你传递一个函数作为参数到另一个函数中，并在需要的时候由另一个函数来调用它。回调函数常用于异步操作、事件处理、定时任务等场景

• A函数作为参数到B函数中，那么B函数就是回调函数
• 例如：定时器中的调用函数，事件处理函数，都是回调函数
• element.onclick = function(){} 或者 element.addEventListener(“click”, fn) 里面传入的函数也是回调函数

基本用法

下面是一个简单的回调函数示例，其中callMeBack是一个回调函数，被传递给doSomething函数并在其中被调用：

function doSomething(callback) {
  // 做一些事情...
  
  // 调用回调函数
  callback();
}

function callMeBack() {
  console.log('回调函数被调用了！');
}

// 调用doSomething函数，并将callMeBack作为回调函数传递
doSomething(callMeBack);

异步操作中的回调

在异步操作中，回调函数特别有用，比如使用setTimeout或fetch等函数时：

// 使用setTimeout的回调
setTimeout(function() {
  console.log('一秒钟后执行！');
}, 1000);

// 使用fetch的回调
fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

在上面的fetch示例中，.then方法接受一个回调函数作为参数，该函数将在Promise解决（即请求成功）时被调用。.catch方法也接受一个回调函数，用于处理Promise被拒绝（即请求失败）的情况。

回调函数的优缺点

优点：

1. 灵活性：允许你编写更通用的代码，可以将行为（即函数）作为参数传递。
2. 异步处理：回调函数非常适合处理异步操作，如定时器、网络请求等。

缺点：

1. 嵌套地狱（Callback Hell）：当多个异步操作需要相互依赖时，可能会导致深度嵌套的回调函数，使代码难以阅读和维护。
2. 错误处理：如果不正确使用，可能会导致错误传播和难以追踪的错误处理。
3. 控制流不直观：在异步编程中，回调函数可能会在不同的时间点执行，使得控制流难以跟踪。

Promise 和 async/await 的出现

为了克服回调函数的缺点，JavaScript引入了Promise对象和async/await语法，它们提供了更简洁、更易于理解的方式来处理异步操作和回调函数。

使用Promise，你可以链式调用.then和.catch方法，避免了回调函数的嵌套问题：

fetch('https://api.example.com/data')
  .then(response => response.json())
  .then(data => console.log(data))
  .catch(error => console.error('请求失败:', error));

使用async/await语法，你可以将异步操作写得像同步代码一样直观：

async function fetchData() {
  try {
    const response = await fetch('https://api.example.com/data');
    const data = await response.json();
    console.log(data);
  } catch (error) {
    console.error('请求失败:', error);
  }
}

fetchData();

尽管Promise和async/await提供了更现代的解决方案，但在某些情况下，回调函数仍然是必要的和有用的。