巧用回调，巧妙处理async与promise的回调地狱

前端

2023-10-13 11:27:41

巧妙化解 Async/Promise 回调地狱的秘诀

在前端开发的广阔世界中，异步操作无处不在。这带来了回调函数的兴起，但它也带来了一个令人头疼的问题：回调地狱。当异步操作层层嵌套时，代码的可读性和可维护性就会遭受重创。

Promise 和 async/await 的曙光

为了拯救开发人员于回调地狱的水火之中，JavaScript 引入了 Promise 和 async/await。Promise 为异步操作提供了一种统一的接口，而 async/await 则允许我们在同步代码中书写异步操作。

使用 Promise 和 async/await，我们可以将复杂的异步代码转化为更易读、更简洁的代码。然而，即使是这些现代工具，在某些情况下也会导致回调地狱。例如，当我们并行执行多个异步操作时，依然需要回调函数来处理这些操作的结果。

巧妙的解决方案

别担心，我们还有巧妙的解决方案来解决并发执行异步操作时产生的回调地狱。

Promise.all() 和 async/await 并行处理

Promise.all() 函数允许我们同时执行多个 Promise，并将结果收集到一个数组中。async/await 的并行处理功能提供了类似的功能，使我们可以在一个数组中收集同时执行多个异步操作的结果。

通过使用 Promise.all() 或 async/await 的并行处理，我们可以巧妙地避免回调地狱，将代码保持整洁和易于理解。

代码示例

const promise1 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 1 resolved');
  }, 1000);
});

const promise2 = new Promise((resolve, reject) => {
  setTimeout(() => {
    resolve('Promise 2 resolved');
  }, 2000);
});

Promise.all([promise1, promise2]).then((results) => {
  console.log(results);
});