回调地狱是指在 JavaScript 中，当需要执行多层嵌套的异步操作时，代码呈现出嵌套的回调函数层级结构，导致代码可读性差、难以维护。而 Promise 对象的出现，为解决这一问题提供了一种可行的方案。
Promise 简介
Promise 是 ES6 中新增的一种异步编程解决方案，它可以将异步操作以同步的方式表达出来，避免了回调地狱的问题。Promise 对象有三种状态：pending（等待中）、fulfilled（已完成）、rejected（已拒绝）。当异步操作执行成功时，Promise 对象的状态会变为 fulfilled，执行失败时则会变为 rejected。
一个 Promise 对象包含两个方法：then() 和 catch()。then() 方法用于处理异步操作成功的情况，catch() 方法用于处理异步操作失败的情况。
Promise 的基本用法
下面是一个简单的 Promise 示例代码：
// javascriptcn.com 代码示例
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
getData()
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});上述代码中，getData() 方法返回了一个 Promise 对象。在 then() 方法中处理异步操作成功的情况，在 catch() 方法中处理异步操作失败的情况。当 getData() 方法执行成功后，会调用 then() 方法，并将成功的结果传递给 then() 方法中的回调函数。
Promise 的链式调用
Promise 对象的 then() 方法可以返回一个新的 Promise 对象，从而实现链式调用。下面是一个 Promise 链式调用的示例代码：
// javascriptcn.com 代码示例
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
getData()
.then(data => {
console.log(data);
return 'more data';
})
.then(data => {
console.log(data);
})
.catch(error => {
console.log(error);
});上述代码中，第一个 then() 方法返回了一个新的 Promise 对象，第二个 then() 方法会接收到这个新的 Promise 对象，并处理它的成功情况。这样就可以实现链式调用，避免了回调地狱的问题。
async/await
async/await 是 ES8 中新增的一种异步编程解决方案，它是基于 Promise 实现的语法糖。async 函数返回一个 Promise 对象，可以使用 await 关键字等待 Promise 对象的执行结果。async/await 的优点在于它可以让异步代码看起来更像同步代码，可读性更高。
下面是一个 async/await 的示例代码：
// javascriptcn.com 代码示例
function getData() {
return new Promise((resolve, reject) => {
setTimeout(() => {
resolve('data');
}, 1000);
});
}
async function fetchData() {
try {
const data = await getData();
console.log(data);
const moreData = await getData();
console.log(moreData);
} catch (error) {
console.log(error);
}
}
fetchData();上述代码中，fetchData() 函数使用了 async 关键字，返回了一个 Promise 对象。在函数中使用了 await 关键字等待 Promise 对象的执行结果，并在 try...catch 语句中处理异步操作的成功和失败情况。
总结
回调地狱是 JavaScript 异步编程中常见的问题，使用 Promise 和 async/await 可以有效地解决这一问题。Promise 对象的 then() 和 catch() 方法可以实现链式调用，避免回调地狱的问题。async/await 可以让异步代码看起来更像同步代码，可读性更高。在实际开发中，我们应该选择最适合当前场景的异步编程解决方案。
来源：JavaScript中文网 ，转载请注明来源 https://www.javascriptcn.com/post/650834f895b1f8cacd35c2a6