当前位置：首页 > 文章列表 > 文章 > 前端 > JS：承诺还是回调？

JS：承诺还是回调？

来源：dev.to 2024-07-29 08:36:46 0浏览收藏

“纵有疾风来，人生不言弃”，这句话送给正在学习文章的朋友们，也希望在阅读本文《JS：承诺还是回调？》后，能够真的帮助到大家。我也会在后续的文章中，陆续更新文章相关的技术文章，有好的建议欢迎大家在评论留言，非常感谢！

JS：承诺还是回调？

理解 javascript 中的 promise 与 callback

认证测试的关键问题和解答

什么是回调函数，它与常规函数有何不同？
- 回调函数作为参数传递给另一个函数并被调用来处理异步操作。与常规函数不同，回调被设计为在完成某个任务后执行。
与回调相比，promise 如何提高代码可读性并管理异步操作？
- promise 允许链接和更好的错误处理，从而产生更具可读性和可维护性的代码。它们有助于避免被称为“回调地狱”的深层嵌套结构。
promise 的主要状态是什么，它们如何在这些状态之间转换？
如何使用 promise 处理错误，这与使用回调的错误处理相比如何？
promise.all 和 promise.race 有什么区别，什么时候会使用它们？
async/await 语法如何简化 promises 的使用，以及使用 wait 的规则是什么？

介绍

在 javascript 不断发展的环境中，有效管理异步操作是构建高性能 web 应用程序的关键。虽然回调是最初的方法，但 promises 引入了一种更加结构化和可读的方法来处理异步任务。本博客深入探讨了使用 promise 与回调的复杂性，假设您已经对这些概念有基本的了解。

promise 相对于回调的好处

提高可读性和可维护性

回调虽然有效，但通常会导致称为“回调地狱”的深层嵌套结构，使代码难以阅读和维护。

回调地狱的例子：

fetchdata(function(response1) {
  fetchmoredata(response1, function(response2) {
    fetchevenmoredata(response2, function(response3) {
      console.log(response3);
    });
  });
});

通过 promise 进行改进：

fetchdata()
  .then(response1 => fetchmoredata(response1))
  .then(response2 => fetchevenmoredata(response2))
  .then(response3 => console.log(response3))
  .catch(error => console.error(error));

错误处理

使用回调，错误处理可能会变得很麻烦，因为您需要传递错误对象并在每个级别处理它们。

使用回调处理错误：

function fetchdata(callback) {
  settimeout(() => {
    if (/* error condition */) {
      callback(new error('an error occurred'), null);
    } else {
      callback(null, 'data');
    }
  }, 1000);
}

fetchdata((error, data) => {
  if (error) {
    console.error(error);
  } else {
    console.log(data);
  }
});

使用 promise 进行错误处理：

function fetchdata() {
  return new promise((resolve, reject) => {
    settimeout(() => {
      if (/* error condition */) {
        reject(new error('an error occurred'));
      } else {
        resolve('data');
      }
    }, 1000);
  });
}

fetchdata()
  .then(data => console.log(data))
  .catch(error => console.error(error));

高级 promise 方法

promise.all

当你需要等待多个异步操作完成才能继续时，promise.all 非常有用。

例子：

const promise1 = promise.resolve(3);
const promise2 = 42;
const promise3 = new promise((resolve, reject) => {
  settimeout(resolve, 100, 'foo');
});

promise.all([promise1, promise2, promise3]).then(values => {
  console.log(values); // [3, 42, "foo"]
});

promise.race

当你需要最快操作的结果时，promise.race 很有用。

例子：

const promise1 = new promise((resolve, reject) => {
  settimeout(resolve, 500, 'one');
});

const promise2 = new promise((resolve, reject) => {
  settimeout(resolve, 100, 'two');
});

promise.race([promise1, promise2]).then(value => {
  console.log(value); // "two"
});

使用 async/await 简化异步代码

async/await 语法允许您编写看起来同步的异步代码，增强可读性并降低链接 promise 的复杂性。

例子：

async function fetchData() {
  return 'data';
}

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

processData();

结论

虽然回调为 javascript 中处理异步操作奠定了基础，但 promise 显着提高了异步代码的可读性、可维护性和错误处理能力。了解如何以及何时有效地使用这些工具对于现代 javascript 开发至关重要。借助 promises 和 async/await 语法，开发人员可以编写更清晰、更易于管理的代码，为更强大的应用程序铺平道路。

今天关于《JS：承诺还是回调？》的内容就介绍到这里了，是不是学起来一目了然！想要了解更多关于的内容请关注golang学习网公众号！

版本声明

本文转载于：dev.to 如有侵犯，请联系study_golang@163.com删除