“编程有时感觉就像一部悬疑电影 - 充满了意想不到的曲折。但是，如果您可以使代码像精心设计的场景一样流畅，该怎么办？欢迎来到回调、Promise 和异步/等待的世界！”
回调 是一个函数，您可以将其作为参数传递给另一个函数，然后在该函数完成后执行该函数。可以这样想：您在线订购电影票，并告诉他们在票准备好后向您发送电子邮件（回调函数）。
示例：
想象一下您正在网上订购电影《蜘蛛侠 4》的门票：
function orderTicket(movie, callback) {
console.log(`Ordering ticket for ${movie}...`);
// Simulate a delay with setTimeout
setTimeout(() => {
console.log('Ticket ordered successfully!');
callback(); // Notify when the ticket is ready
}, 2000);
}
function notifyUser() {
console.log('Your ticket is ready! Enjoy the movie!');
}
orderTicket('Spider-Man 4', notifyUser);
输出：
Ordering ticket for Spider-Man 4... Ticket ordered successfully! Your ticket is ready! Enjoy the movie!
这里的notifyUser是订票后调用的回调函数。
回调地狱 当多个回调相互嵌套时就会发生，导致代码难以阅读和维护。它看起来像金字塔或楼梯，很难跟上正在发生的事情。
示例：
现在想象一下您想要做多项事情，比如订票、买爆米花和找到座位，所有这些都按顺序进行：
function orderTicket(movie, callback) {
console.log(`Ordering ticket for ${movie}...`);
setTimeout(() => {
console.log('Ticket ordered successfully!');
callback();
}, 2000);
}
function getPopcorn(callback) {
console.log('Getting popcorn...');
setTimeout(() => {
console.log('Popcorn ready!');
callback();
}, 1000);
}
function findSeat(callback) {
console.log('Finding your seat...');
setTimeout(() => {
console.log('Seat found!');
callback();
}, 1500);
}
orderTicket('Spider-Man 4', function() {
getPopcorn(function() {
findSeat(function() {
console.log('All set! Enjoy the movie!');
});
});
});
输出：
Ordering ticket for Spider-Man 4... Ticket ordered successfully! Getting popcorn... Popcorn ready! Finding your seat... Seat found! All set! Enjoy the movie!
这是回调地狱：您可以看到代码如何变得更加嵌套且更难以阅读。
promise 是一个表示异步操作最终完成（或失败）的对象。它允许您编写更清晰的代码并更轻松地处理异步任务，而不会陷入回调地狱。
示例：
让我们使用 Promise
来简化上面的例子
function orderTicket(movie) {
return new Promise((resolve) => {
console.log(`Ordering ticket for ${movie}...`);
setTimeout(() => {
console.log('Ticket ordered successfully!');
resolve();
}, 2000);
});
}
function getPopcorn() {
return new Promise((resolve) => {
console.log('Getting popcorn...');
setTimeout(() => {
console.log('Popcorn ready!');
resolve();
}, 1000);
});
}
function findSeat() {
return new Promise((resolve) => {
console.log('Finding your seat...');
setTimeout(() => {
console.log('Seat found!');
resolve();
}, 1500);
});
}
orderTicket('Spider-Man 4')
.then(getPopcorn)
.then(findSeat)
.then(() => {
console.log('All set! Enjoy the movie!');
});
输出：
Ordering ticket for Spider-Man 4... Ticket ordered successfully! Getting popcorn... Popcorn ready! Finding your seat... Seat found! All set! Enjoy the movie!
Promise 通过链接 .then() 方法使代码更易于阅读，避免嵌套问题。
Async/await 是一种现代语法，允许您编写外观和行为类似于同步代码的异步代码。它建立在 Promise 之上，使代码更加清晰、更容易理解。
示例：
让我们使用 async/await 来处理相同的场景
function orderTicket(movie) {
return new Promise((resolve) => {
console.log(`Ordering ticket for ${movie}...`);
setTimeout(() => {
console.log('Ticket ordered successfully!');
resolve();
}, 2000);
});
}
function getPopcorn() {
return new Promise((resolve) => {
console.log('Getting popcorn...');
setTimeout(() => {
console.log('Popcorn ready!');
resolve();
}, 1000);
});
}
function findSeat() {
return new Promise((resolve) => {
console.log('Finding your seat...');
setTimeout(() => {
console.log('Seat found!');
resolve();
}, 1500);
});
}
async function watchMovie() {
await orderTicket('Spider-Man 4');
await getPopcorn();
await findSeat();
console.log('All set! Enjoy the movie!');
}
watchMovie();
输出：
Ordering ticket for Spider-Man 4... Ticket ordered successfully! Getting popcorn... Popcorn ready! Finding your seat... Seat found! All set! Enjoy the movie!
使用 async/await，代码更加简单，类似于您在现实生活中描述过程的方式。 wait 关键字会暂停执行，直到 Promise 得到解决，从而使操作流程易于遵循。
“通过掌握回调、Promise 和异步/等待，您可以将复杂的代码变成无缝的体验。告别回调地狱，迎接更干净、更高效的 JavaScript。快乐编码！”
以上是回调、回调地狱、Promise、异步/等待的详细内容。更多信息请关注PHP中文网其他相关文章！
