脱离定义以外的CallBack与Promise解析

2023-11-09 00:00:41

1. 概念梳理：CallBack与Promise

CallBack，又称为回调函数，是指在某件事完成后调用的函数。本质上，CallBack就是一种非阻塞异步编程的技术，当你的JavaScript代码进入CallBack时，将把控制权移交至JS引擎，而JS引擎将继续处理其他事情，待CallBack处理结束后再把控制权交还给JavaScript代码。

Promise，则是另一种非阻塞异步编程的技术，它也是通过定义一个函数来处理异步操作，但与CallBack不同的是，Promise能够处理多个异步操作，并能以更清晰的方式处理错误。

2. 关键区别：状态与链式调用

CallBack与Promise的一个关键区别在于状态。Promise有三个状态：待处理、成功和失败。状态的转变会触发相应的回调函数，从而处理异步操作的结果。而CallBack则没有明确的状态，它只是在异步操作完成后调用。

链式调用是Promise的另一个关键特性。它允许你将多个异步操作连接起来，以便一个操作的结果成为下一个操作的输入。CallBack不具备链式调用功能，因此你必须使用嵌套函数或其他技术来实现类似的行为。

3. 选择指南：哪种更好？

哪种更好取决于你要解决的问题以及你的个人偏好。以下是一些选择指南：

如果你的异步操作简单且不需要处理错误，那么CallBack可能是更好的选择。
如果你的异步操作复杂或需要处理错误，那么Promise可能是更好的选择。
如果你的代码中有多个异步操作，并且你想以更清晰的方式处理它们，那么Promise可能是更好的选择。

4. 应用实例：获取用户数据

为了更具体地了解CallBack和Promise的区别，让我们来看一个获取用户数据的例子。

使用CallBack：

function getUserData(callback) {
  // 模拟异步操作
  setTimeout(() => {
    const userData = {
      name: 'John Doe',
      age: 30,
    };

    callback(userData);
  }, 1000);
}

getUserData(function(userData) {
  console.log(userData);
});

使用Promise：

function getUserData() {
  return new Promise((resolve, reject) => {
    // 模拟异步操作
    setTimeout(() => {
      const userData = {
        name: 'John Doe',
        age: 30,
      };

      resolve(userData);
    }, 1000);
  });
}

getUserData()
  .then(userData => {
    console.log(userData);
  })
  .catch(error => {
    console.log(error);
  });