在前端开发中，我们经常会使用异步编程来处理一些需要等待时间的操作。在异步编程中，回调函数是一种常用的方式。但是回调函数的嵌套很容易导致代码的可读性和可维护性下降。这时，Promise 就出现了。那么 Promise 和回调函数有什么区别？又该如何选择使用哪种方式呢？
回调函数
回调函数是一种将函数作为参数传递给另一个函数并在执行另一个函数时调用的方式。回调函数通常用于处理异步操作的结果。
举个例子，我们需要从数据库中查询数据并展示在页面上。我们可以使用 Node.js 提供的 Mongoose 库中的 find 方法来查询数据：
-- -------------------- ---- -------
----- ------- - -------------------------------------
-------- ----------------- ---- -
------------------ --------- -- -
-- ----- -
------ ---------------------- ------ ----------- ---
-
------ -------------------
---
-在上面的代码中，Student.find 方法带有一个回调函数，当查询数据操作完成时，它将调用这个回调函数。代码的问题在于，如果我们在代码中嵌套多个异步操作，将会导致代码的可读性很差。
Promise
Promise 是 ES6 引入的一种解决异步编程的语法。通过 Promise，我们可以很容易地完成异步操作，并且可读性也很高。Promise 有三种状态：pending（等待状态）、fulfilled（成功状态）和 rejected（失败状态）。
举个例子，我们可以通过 axios 库中的 get 方法获取数据：
const axios = require('axios');
function getPosts() {
return axios.get('/api/posts').then(response => {
return response.data;
});
}上面的代码中，axios.get 方法返回一个 Promise 对象。我们通过 then 方法来获取异步操作完成后的结果，这样就不需要通过回调函数来处理异步操作的结果了。
在异步操作异常处理方面，Promise 也提供了 catch 方法，可以很好地处理异步操作的错误。如下代码演示了基于 Promise 的异步操作的异常处理方式：
function getPosts() {
return axios.get('/api/posts').then(response => {
return response.data;
}).catch(error => {
console.error(error);
});
}对比和优劣
回到回调函数和 Promise 的对比，下面是他们的优缺点：
回调函数
优点：
- 回调函数是异步编程的最基本的方式，在所有 JavaScript 环境中都可用。
- 可以处理任何数量的异步操作，包括嵌套的异步操作。
缺点：
- 代码可读性和可维护性差，容易形成回调地狱。
- 错误处理困难。
Promise
优点：
- 可读性和可维护性高。
- 可以链式调用，极大地提高代码的可读性。
- 异常处理方便。
缺点：
- Promise 是 ES6 的新特性，低版本浏览器无法支持，需要引入 polyfill 库。
- Promise 只可以处理异步操作的成功或失败，而不能处理其他异步操作的情况。
总结来说，使用 Promise 可以更好地处理异步编程，解决回调地狱的问题，可读性和可维护性也得到了提高。
示例代码
最后我们来看一下一个完整的基于 Promise 的异步操作的示例代码：
-- -------------------- ---- -------
-------- ---------- -
------ ------------------------------------- -- -
------ -------------------------------
-------------- -- -
---------------------
---
-
-------- ----------- -
------ ------------------------------------------- -- -
----- ---- - --------------
------ ----------------------
-------------- -- -
---------------------
---
-
-------- ---------------- -
------ ------------------------ ------------------- -- -
----- ------- - --------------
------ -------------------------
-------------- -- -
---------------------
---
-
-------- ---------------- -
------ ---------------------------------- ------------------- -- -
----- ----------- - --------------
------ -----------------------------
-------------- -- -
---------------------
---
-
-------- -------------- -
------ ---------------------------------------- -- -
------ ------------------
-------------- -- -
---------------------
---
-上面的代码中，我们通过 Promise 来处理了异步操作的结果。这样，我们代码中的异步操作就更加清晰和易于维护了。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/645c9ead968c7c53b0f0c0b3